[GN] Vue3快速上手1-Toy模板网

这篇具有很好参考价值的文章主要介绍了[GN] Vue3快速上手1。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

Vue2 展示

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'App',
    data() {
      return {
        name:'张三',
        age:18,
        tel:'13888888888'
      }
    },
    methods:{
      changeName(){
        this.name = 'zhang-san'
      },
      changeAge(){
        this.age += 1
      },
      showTel(){
        alert(this.tel)
      }
    },
  }
</script>

使用 vue-cli 创建 VUE3.0

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

VUE 3.0 介绍

Composition API

vue 3.0 作为组合式API

首要配置 setup

setup执行很早，在beforeCreate之前执行一次。

Vue3.0中一个新的配置项
setup是所有Composition API（组合API） 表演的舞台 ”。
组件中所用到的：数据、方法等等，均要配置在setup中。

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <button @click="changAge">年龄+1</button>
  </div>
</template>

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let age = 18

  // 方法
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
</script>

注意点：
- 尽量不要与Vue2.x配置混用
  - Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
  - 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
  - 如果有重名, setup优先。
- setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

ref函数

作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
返回值一个RefImpl的实例对象，简称ref对象，ref对象的value属性是响应式的。
- JS中操作数据： xxx.value。模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
- 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

<script setup lang="ts" >
  import {ref} from 'vue'
  // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
  let name = ref('张三')

  function changeName(){
    // JS中操作ref对象时候需要.value
    name.value = '李四'
    console.log(name.value)

    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
    // name = ref('zhang-san')
  }
</script>

reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”。

<script lang="ts" setup >
import { reactive } from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

// 如果下面是ref 则需要在第二个位置加上value 例：game.value[0].name = '大马猴'
function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
</script>

ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。

reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

toRefs与 toRef

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

计算属性与监视

1.computed函数

<template>
 <div class="person">
   姓：<input type="text" v-model="firstName"> <br>
   名：<input type="text" v-model="lastName"> <br>
   全名：<span>{{fullName}}</span> <br>
 </div>
</template>

<script setup lang="ts" name="App">
 import {ref,computed} from 'vue'

 let firstName = ref('zhang')
 let lastName = ref('san')


 // 计算属性——既读取又修改
 let fullName = computed({
   // 读取
   get(){
     return firstName.value + '-' + lastName.value
   },
   // 修改
   set(val){ //将改变的值 导入val  在分解分别付给firstname lastname
     console.log('有人修改了fullName',val)
     firstName.value = val.split('-')[0]
     lastName.value = val.split('-')[1]
   }
 })

 function changeFullName(){
   fullName.value = 'li-si'
 } 
</script>

2.watch函数

两个小“坑”：

监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
监视reactive定义的响应式数据中某个属性时：deep配置有效。

//情况一：监视ref定义的响应式数据
 const stopWatch = watch(sum,(newValue,oldValue)=>{
  console.log('sum变化了',newValue,oldValue)
  if(newValue >= 10){
    stopWatch()
  }
})


  /* 
  监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
  watch的第一个参数是：被监视的数据
  watch的第二个参数是：监视的回调
  watch的第三个参数是：配置对象（deep、immediate等等.....） 
*/
watch(person,(newValue,oldValue)=>{
  console.log('person变化了',newValue,oldValue)
},{deep:true})


/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性 且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
//结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效