vue3核心语法

发表于 更新于 分类于 ， 阅读次数： Waline： 本文字数： 30k 阅读时长 ≈ 27 分钟
  • 组合式API setup语法糖（name属性 – vite插件简化）
  • 响应式数据的创建：ref、reactive
  • 计算属性：computed（get、set）
  • 监听器：watch (能够监听的4种数据、监听的 5种情况)
  • 标签的ref属性
  • props（接收+限制类型+指定默认值+限制必要性）
  • vue生命周期（整体可分为四个阶段、八个钩子）
    • vue解析流程、父子组件生命周期顺序
  • hooks（封装）

OptionsAPI 与 CompositionAPI

  • Vue2的API设计是Options（配置）风格的。
  • Vue3的API设计是Composition（组合）风格的。

Options API 的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

options劣势1.gif options劣势2.gif

Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

comp优势1.gif comp优势2.gif

说明：以上四张动图原创作者：大帅老猿(掘金)

拉开序幕的 setup

setup 概述

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视……等等，均配置在setup中。

特点如下：

  • setup函数返回的对象中的内容，可直接在模板中使用。
  • setup中访问this是undefined。
  • setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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:'Person',
    setup(){
      console.log(this)//setup中的this是undefined，vue3中已经弱化this了

      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'
      let age = 18
      let tel = '13888888888'

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

setup 的返回值

  • 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。
  • 若返回一个函数：则可以自定义渲染内容，代码如下：
    1
    2
    3
    4
    setup(){
      // setup的返回值也可以是一个渲染函数
      return ()=> '你好啊！'
    }

setup 与 Options API 的关系

  • Vue2 的配置（data、methos……）中可以访问到 setup中的属性、方法。
  • 但在setup中不能访问到Vue2的配置（data、methos……）。

    因为setup是最早的生命周期，所以setup可以被其他选项摸到，而它摸不到其他选项。

  • 如果与Vue2冲突，则setup优先。

    虽然他们可以共存，但是vue3不要写vue2的data、method，不到万不得已。

setup 语法糖

每次我们在setup中定义了数据，并使用，都需要把它return出去，这就很麻烦，大量的编写应用，就很容易忘记去return。所以有更简单的写法 —— setup语法糖
多写一个script标签，写上setup属性<script setup></script>
这样，这个里面的东西就相当于，写到setup(){}函数里面，而且它还会自动return

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
  }
</script>

<!-- 下面的写法是setup语法糖 -->
<!--  <script> and <script setup> 必须是相同的语法类型，否则报错，这里都是ts类型 -->
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'

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

所以对于vue3的项目，有两个script标签，一个是专门配置组合式API的，一个是专门配置组件名字的。但是写两个难受了，还不能合到一块，我们可以借助插件完成↓

扩展：上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化

  1. 第一步：npm i vite-plugin-vue-setup-extend -D

  2. 第二步：vite.config.ts

    1
    2
    3
    4
    5
    6
    import { defineConfig } from 'vite'
    import VueSetupExtend from 'vite-plugin-vue-setup-extend'

    export default defineConfig({
      plugins: [ VueSetupExtend() ]
    })

  3. 第三步：<script setup lang="ts" name="Person">

ref 创建：基本类型的响应式数据

在vue2中，只要将数据定义到data节点里面，这个数据就自动是响应式的了，其他它在背后是做了数据代理和数据劫持
vue3有两个东西去定义响应式数据：ref、reactive(这个ref和vue2中的$ref不是一个东西)

  • 作用：定义响应式变量。
  • 语法：let xxx = ref(初始值)。
  • 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
  • 注意点：
    • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
    • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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 setup lang="ts" name="Person">
  import {ref} from 'vue'
  // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
  let name = ref('张三')
  let age = ref(18)
  // tel就是一个普通的字符串，不是响应式的
  let tel = '13888888888'

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

    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
    // name = ref('zhang-san')
  }
  function changeAge(){
    // JS中操作ref对象时候需要.value
    age.value += 1 
    console.log(age.value)
  }
  function showTel(){
    alert(tel)
  }
</script>

reactive 创建：对象类型的响应式数据

  • 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）

    reactive只能定义 对象类型的响应式数据

  • 语法：let 响应式对象= reactive(源对象)。
  • 返回值： 一个Proxy的实例对象，简称：响应式对象。
  • 注意点：reactive定义的响应式数据是“深层次”的。
    • 该对象的所有子属性（不论嵌套多深）都会被转换为响应式的。
    • 即使是后来新增的属性，由于使用了Proxy代理，Vue也能确保这些新属性自动成为响应式的
    • 当删除一个属性时，Vue的响应式系统也能感知到这一变化，并相应地处理依赖更新。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
  </div>
</template>

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

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

function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
</script>

ref 创建：对象类型的响应式数据

  • 其实ref接收的数据可以是：基本类型、对象类型。
  • 若ref接收的是对象类型的时候，内部其实也是调用了reactive函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
  </div>
</template>

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

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

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
</script>

ref 对比 reactive

宏观角度看：

  1. ref用来定义：基本类型数据、对象类型数据；

  2. reactive用来定义：对象类型数据。

  • 区别：

  1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
    设置 – 扩展 – Volar(老版的TS volar插件)
    设置 – 扩展 – Vue(新版的vue-offical插件)

    自动补充value

  2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。（官方文档将其叫做：reactive的局限性）

  • 一个注意点：.value的问题
    ref创建的变量，必须使用.value
    reactive创建的变量：

    1
    2
    3
    4
    5
    6
    let obj = reactive({
      a:1,
      b:2,
      c:ref(3)
    })
    console.log(obj.a , obj.b , obj.c)

    虽然c是一个响应式的数据，数字3 ，， 但是不需要.value,如果.value得到的事undefined
    c是一个响应式的数据，但是它是放在一个响应式对象里面的，也就是说，当你去触碰obj.c的时候，它自动就解包了(自动已经开始读取value了)

  • 重新分配一个对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <h2>汽车信息：一辆{{car.brand}}车，价值{{car.price}}万</h2>
    <button @click="changePrice">修改汽车价格</button>
    <button @click="changeCar">换一辆车</button> // 点击按钮不起作用 -- 失去响应式
    // 重新分配一个对象
    let car = reactive({brand:'奔驰',price:100})
    // 方法
    function changePrice(){
      car.price += 10
    }
    // 触发换车事件后，由于失去响应式，修改价格也不会再生效
    function changeCar(){
      car = {brand:'奥拓',price:1}
      car = reactive({brand:'奥拓',price:1}) // 即便是用reactive包裹，依旧一样会失去响应式

      // 可以通过ES6的assign方法来修改，会将后面所有对象的属性加到car中，同名则覆盖
      Object.assign(car,{brand:'奥拓',price:1}) 
    }
    1
    2
    3
    4
    let car = ref({brand:'奔驰',price:100})
    function changeCar(){
      car.value = {brand:'奥拓',price:1} // 如果是ref，就可以直接整体改
    }

这种写法经常是无法避免的，比如后端返回一个对象，有二十多个属性，我们是不可能一个一个修改属性值的，肯定是要重新分配一个对象

  • 使用原则：
  1. 若需要一个基本类型的响应式数据，必须使用ref。
  2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
  3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

    做表单相关的，做收集数据、表单数据回显，推荐使用reactive
    如果一个表单里面有非常多数据，大量的使用ref，最终的代码就会一堆.value，不是很合适
    ref代理对象还是调的reactive,所以reactive代理对象性能更好

toRefs 与 toRef

toRefs应该会更常用些，毕竟写法更简单，而且也可以获取单个属性

  • 作用：将一个响应式对象中的每一个属性，转换为ref对象。

    如果嵌套的过多，每次都要去.很多东西，就很麻烦，直接取出来可以更方便

  • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。
  • 语法如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    {/* 模板中也可以直接写解构出来的响应式数据，如 {{ name }}*/}
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRef、toRefs得到的都是ObjectRefImpl对象，修改得到的响应式数据的值，对象中的属性值也同时被修改
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} = toRefs(person)
  // 通过toRef将person对象中的age属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 这样写是不一样的！！！得到的都是RefImpl对象，而不是ObjectRefImpl对象
  // 这两个写法都是把person的age这个基本数据的值取了出来，作为定义的响应式数据的初始值，
  // 不会影响到person.age
  let age = toRef(person.age)
  let age = ref(person.age) 

  // 如果是这种写法
  // 由于ref(person)得到的是一个RefImpl对象，想要解构出name、gender属性，必须.value才行
  // 最终取到的值，只是普通的基本类型数据，所以结构得到的name、gender是非响应式数据
  let {name,gender} = ref(person).value

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>

computed

作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span> <br>
    全名：<span>{{fullName}}</span> <br>
    全名：<span>{{fullName}}</span> <br>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>

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

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

  // 计算属性——只读取，不修改
  // 这么定义出来的fullname是个`ComputedRefImpl`对象
  // 所以打印fullname的值应该.value，但是不能修改
  /* let fullName = computed(()=>{
    // 计算属性是有缓存的，方法是没有缓存的
    // 它在第一次算完之后，再次使用的时候，数据没变，就直接拿上一次的计算结果来用
    console.log(1) // 模版中使用多次计算属性，只会打印一个1
    return firstName.value + '-' + lastName.value
  }) */


  // 计算属性——既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){ // 这里的val就是.value接收的值 -- li-si
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })

  function changeFullName(){
    // 这里没有修改任何东西，只是引起了fullname的set调用
    fullName.value = 'li-si'
  } 
</script>

watch

  • 作用：监视数据的变化（和Vue2中的watch作用一致）
  • 特点：Vue3中的watch只能监视以下四种数据：
    1. ref定义的数据。
    2. reactive定义的数据。
    3. 一个函数，返回一个值（相当于一个getter函数）。
    4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

* 情况一(常用)

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div class="person">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 监视，情况一：监视【ref】定义的【基本类型】数据
  const stopWatch = watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
    if(newValue >= 10){
      stopWatch() // 解除监视 ，函数名就是定义的名称
    }
  })
</script>

* 情况二

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

  • 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

  • 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了，去访问的时候都是已经改变过的值了。

    实际开发中，大多数情况下，我们是不管这个旧值的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let person = ref({
    name:'张三',
    age:18
  })
  // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson(){
    // 通过字面量的形式，缔造一个全新的对象赋值给value
    person.value = {name:'李四',age:90}
  }
  /* 
    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
    watch的第一个参数是：被监视的数据
    watch的第二个参数是：监视的回调
    watch的第三个参数是：配置对象（deep、immediate等等.....） 
  */
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  },{deep:true,immediate:true})
  // deep属性，开启深度监视，属性值改变也会触发
  // immediate属性，代表立即监视，一上来先执行一次，这个时候新的值是当前这个，旧的值是undefined
  
</script>

* 情况三

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <hr>
    <h2>测试：{{obj.a.b.c}}</h2>
    <button @click="test">修改obj.a.b.c</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
  // 数据
  let person = reactive({
    name:'张三',
    age:18
  })
  let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changePerson(){
    // 地址值根本没有发生变化
    // 只能说批量的去修改了里面的属性
    Object.assign(person,{name:'李四',age:80})
  }
  function test(){
    obj.a.b.c = 888
  }

  // 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
  // 并且这里的深度监视是不能关闭的，这叫隐式的创建了深层的监听
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  })
  watch(obj,(newValue,oldValue)=>{
    console.log('Obj变化了',newValue,oldValue)
  })
</script>

* 情况四(常用)

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

  1. 若该属性值不是【对象类型】，需要写成函数形式。
  2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

    如果直接监听，只能监听到属性改变，但是整体改变后监听就失效了
    写成函数监听，就和ref的对象数据监听一样了

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
  <div class="person">
    <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
  /* watch(()=> person.name,(newValue,oldValue)=>{
    console.log('person.name变化了',newValue,oldValue)
  }) */

  // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
  watch(()=>person.car,(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
</script>

* 情况五(有几率)

监视上述的多个数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
  <div class="person">
    <h1>情况五：监视上述的多个数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况五：监视上述的多个数据
  watch([()=>person.name,person.car],(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})

</script>

watchEffect

  • 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

  • watch对比watchEffect

    1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

    2. watch：要明确指出监视的数据

    3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

      全自动的监视

  • 示例代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <template>
      <div class="person">
        <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
        <h2 id="demo">水温：{{temp}}</h2>
        <h2>水位：{{height}}</h2>
        <button @click="changePrice">水温+1</button>
        <button @click="changeSum">水位+10</button>
      </div>
    </template>

    <script lang="ts" setup name="Person">
      import {ref,watch,watchEffect} from 'vue'
      // 数据
      let temp = ref(0)
      let height = ref(0)

      // 方法
      function changePrice(){
        temp.value += 10
      }
      function changeSum(){
        height.value += 1
      }

      // 用watch实现，需要明确的指出要监视：temp、height
      watch([temp,height],(value)=>{
        // 从value中获取最新的temp值、height值
        const [newTemp,newHeight] = value
        // 室温达到50℃，或水位达到20cm，立刻联系服务器
        if(newTemp >= 50 || newHeight >= 20){
          console.log('联系服务器')
        }
      })

      // 用watchEffect实现，不用
      const stopWtach = watchEffect(()=>{
        // 室温达到50℃，或水位达到20cm，立刻联系服务器
        if(temp.value >= 50 || height.value >= 20){
          console.log(document.getElementById('demo')?.innerText)
          console.log('联系服务器')
        }
        // 水温达到100，或水位达到50，取消监视
        if(temp.value === 100 || height.value === 50){
          console.log('清理了')
          stopWtach()
        }
      })
    </script>

标签的 ref 属性

作用：用于注册模板引用。

  • 用在普通DOM标签上，获取的是DOM节点。

  • 用在组件标签上，获取的是组件实例对象。

用在普通DOM标签上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <div class="person">
    <h1 ref="title1">尚硅谷</h1>
    <h2 ref="title2">前端</h2>
    <h3 ref="title3">Vue</h3>
    <input type="text" ref="inpt"> <br><br>
    <button @click="showLog">点我打印内容</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref} from 'vue'
  
  // 创建一个title1，用于存储ref标记的内容
  // 名称必须和标记的名称一致
  let title1 = ref()
  let title2 = ref()
  let title3 = ref()

  // 如果直接打印出来，由于setup执行是最早的，元素还没有渲染，所以是undefined
  console.log(title1.value); // undefined

  function showLog(){
    // 通过id获取元素
    const t1 = document.getElementById('title1')
    // 打印内容
    console.log((t1 as HTMLElement).innerText)
    console.log((<HTMLElement>t1).innerText)
    console.log(t1?.innerText)
    
    // 通过ref获取元素
    console.log(title1.value)
    console.log(title2.value)
    console.log(title3.value)
  }
</script>

用在组件标签上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 父组件App.vue -->
<template>
  <Person ref="ren"/>
  <button @click="test">测试</button>
</template>

<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
  import {ref} from 'vue'

  let ren = ref()

  function test(){
    console.log(ren.value.name)
    console.log(ren.value.age)
  }
</script>


  • 子组件Person.vue中要使用defineExpose宏命令暴露内容
    在app组件中直接打印出组件的实例对象，是看不到组件内的数据的，这是一种保护措施
1
2
3
4
5
6
7
8
9
10
// vue3最新版本已经内置了defineExpose,不需要引入了，是宏命令
<script lang="ts" setup name="Person">
  import {ref,defineExpose} from 'vue'
	// 数据
  let name = ref('张三')
  let age = ref(18)
  /****************************/
  // 使用defineExpose将组件中的数据交给外部
  defineExpose({name,age})
</script>

props

1
2
3
4
5
6
7
8
9
10
11
12
// TS接口
// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {
 id:string,
 name:string,
 age:number,
 x?:number // x是可有可无，有的话必须为number类型
}
   
// TS 自定义类型 & 泛型
// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>

App.vue中代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <Person :list="persons"/>
</template>
  
<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
  import {reactive} from 'vue'
  // 最新的规范，为了与值做区分，导入的类型要加type
  import {type Persons} from './types'
  
  // 虽然let persons<Persons> = reactive([...])这样写没有报错，但是这种写法并没有使得规范生效
  // reactive对象，是支持泛型的
  let persons = reactive<Persons>([
   {id:'e98219e12',name:'张三',age:18},
   {id:'e98219e13',name:'李四',age:19},
   {id:'e98219e14',name:'王五',age:20,x:9}
  ])
</script>

Person.vue中代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div class="person">
    <ul>
      <li v-for="item in list" :key="item.id">
        {{item.name}}--{{item.age}}
      </li>
    </ul>
  </div>
</template>
  
<script lang="ts" setup name="Person">
// 新版vue3似乎也内置了defineProps和withDefaults,不需要引入
//defineXXX，这种的一般都属于宏函数，在vue3里面不用引入
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'
  
// 第一种写法：仅接收
// defineProps返回值是一个Proxy对象，包含所有你接收的东西
// defineProps参数必须是字符串的数组，命名必须和传入的值保持一致(否则为undefined)
const props = defineProps(['list'])
  
// 第二种写法：接收+限制类型（而且还是个必要传的值）
const props = defineProps<{list:Persons}>()
  
// 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
  list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
// vue2中直接把props属性定义为对象类型default:xxx，就很简单
console.log(props)
</script>

生命周期

  • 概念：Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子

    生命周期、生命周期函数、生命周期钩子，都是指的生命周期

  • 规律：

    生命周期整体分为四个阶段，八个钩子：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

    这些是vue最为常用、最为基本的生命周期。
    虽然vue的钩子(生命周期)不止8个，像是nextTick，路由守卫，缓存路由组件的钩子，但是只要掌握基本的这8个，其他的都可以现用现查现写

  • Vue2的生命周期

    创建阶段：beforeCreate、created

    挂载阶段：beforeMount、mounted

    更新阶段：beforeUpdate、updated

    销毁阶段：beforeDestroy、destroyed

  • Vue3的生命周期

    创建阶段：setup

    挂载阶段：onBeforeMount、onMounted

    更新阶段：onBeforeUpdate、onUpdated

    卸载阶段：onBeforeUnmount、onUnmounted

  • 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

  • 示例代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <template>
      <div class="person">
        <h2>当前求和为：{{ sum }}</h2>
        <button @click="changeSum">点我sum+1</button>
      </div>
    </template>

    <!-- vue3写法 -->
    <script lang="ts" setup name="Person">
      import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
      // 数据
      let sum = ref(0)
      // 方法
      function changeSum() {
        sum.value += 1
      }
      console.log('setup')
      // 生命周期钩子
      onBeforeMount(()=>{
        console.log('挂载之前')
      })
      onMounted(()=>{
        console.log('挂载完毕')
      })
      onBeforeUpdate(()=>{
        console.log('更新之前')
      })
      onUpdated(()=>{
        console.log('更新完毕')
      })
      onBeforeUnmount(()=>{
        console.log('卸载之前')
      })
      onUnmounted(()=>{
        console.log('卸载完毕')
      })
    </script>

  • vue解析流程：
    任何一个组件都有生命周期，这就涉及到了父与子之间的生命周期顺序:

    1
    2
    3
    4
    5
    // App.vue
    <template>
      <Person v-if="show" />
      <h1>你好</h1>
    </template>

    父创建 – 父挂载前 – 子创建 – 子挂载前 – 子挂载完毕 – 父挂载完毕

    父 和 子 ， 子组件先挂载完
    解析流程：
    入口文件index.html 引入了main.ts，main.ts要把App挂到页面上，于是解析App组件。
    解析的时候发现App组件里面用到了Person子组件，它马上去忙Person，等把Person里面所有的东西都忙完了，然后就算<Person/>这一行解析完了(证明该调的钩子都调完了)
    App整个解析完了，就是h1这块解析完了

    子是先执行的，父是最后的。所以App组件永远是最后挂载的

自定义hook

  • 什么是hook？—— 把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。

    本质是一个函数，一个 .js/.ts文件
    作用：封装，高内聚，低耦合。让一个功能的数据和方法贴在一起(不用hooks和vue2写法没太大区别)
    正是有了hooks，组合式才发挥出来了威力！

  • 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。

  • 命名规范：useXXX

  • 返回值: 返回值没有强制要求必须是对象，但是为了更好地组织和管理状态，以及提高代码的可读性，建议在组合函数中返回一个对象

示例代码：

  • useSum.ts中内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    import {ref,onMounted} from 'vue'

    // 默认导出的必须是一个函数，并且没有名字！
    export default function(){
      let sum = ref(0)

      const increment = ()=>{
        sum.value += 1
      }
      const decrement = ()=>{
        sum.value -= 1
      }
      onMounted(()=>{ // hooks里面能写钩子！
        increment()
      })

      //向外部暴露数据，写数组[]，甚至map容器都行，但是推荐写对象。
      return {sum,increment,decrement}
    }

  • useDog.ts中内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    import {reactive,onMounted} from 'vue'
    import axios,{AxiosError} from 'axios'

    export default function(){
      let dogList = reactive<string[]>([])

      // 方法
      async function getDog(){
        try {
          // 发请求
          let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
          // 维护数据
          dogList.push(data.message)
        } catch (error) {
          // 处理错误
          const err = <AxiosError>error
          console.log(err.message)
        }
      }

      // 挂载钩子
      onMounted(()=>{
        getDog()
      })
    	
      //向外部暴露数据
      return {dogList,getDog}
    }

  • 组件中具体使用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <template>
      <h2>当前求和为：{{sum}}</h2>
      <button @click="increment">点我+1</button>
      <button @click="decrement">点我-1</button>
      <hr>
      <img v-for="(u,index) in dogList.urlList" :key="index" :src="(u as string)"> 
      <span v-show="dogList.isLoading">加载中......</span><br>
      <button @click="getDog">再来一只狗</button>
    </template>

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

      export default defineComponent({
        name:'App',
      })
    </script>

    <script setup lang="ts">
      import useSum from './hooks/useSum'
      import useDog from './hooks/useDog'
    	
      let {sum,increment,decrement} = useSum()
      let {dogList,getDog} = useDog()
    </script>

拓展 – mixin

mixin是vue2的一种设计模式，用于实现组件间的代码复用
通常会定义一组可复用的组件配置，如数据，计算属性，方法，生命周期钩子等，将其封装到一个如myMixin.js的文件中

工作原理：将 mixin 对象中的选项与组件自身的选项进行合并。如果 mixin 和组件中存在相同的选项，如 methods、data、computed 等，Vue 会按照一定的规则进行合并处理。例如：

  • 对于 data，mixin 中的数据会被合并到组件的数据对象中，如果有同名属性，则组件自身的 data 优先级更高，会覆盖 mixin 中的同名属性。
  • 对于 methods、computed、watch 等，如果存在同名函数或属性，它们会被合并，不会覆盖，如果同名方法都存在，则两个方法都会执行（对于生命周期钩子，会将它们合并成数组，依次调用）。
  • 对于生命周期钩子，如果 mixin 和组件都定义了同一个钩子函数，则这些函数会被合成一个数组，当生命周期事件触发时，这些函数会按照它们被发现的顺序依次调用。
1
2
3
4
5
6
7
8
9
10
11
12
13
// 定义一个 mixin
var myMixin = {
  data: function() {
    return {
      message: 'Hello from mixin!'
    }
  },
  methods: {
    showMsg: function() {
      console.log(this.message);
    }
  }
}

然后在需要使用的vue组件中引入该文件：import myMixin from './myMixin.js';
并挂载到mixin选项上：mixins: [myMixin], // 引入mixin

1
2
3
4
5
6
7
8
9
10
11
// 在单文件组件（.vue文件）中使用 mixin
// 或者是，在一个独立的JavaScript模块文件（如myComponent.js）中：
import Vue from 'vue';
import myMixin from './myMixin.js';

export default Vue.extend({
  mixins: [myMixin],
  mounted() {
    this.showMsg(); // 使用来自mixin的方法
  }
});