vue3全网最全教程-----(2)

目录

3.9.【watch】

* 情况一

* 情况二

 情况三

* 情况四

 情况五

3.10. 【watchEffect】

3.11. 【标签的 ref 属性】

3.12. 【props】

3.13. 【生命周期】

3.14. 【自定义hook】

---

 

3.9.【watch】

• 作用：监视数据的变化（和Vue2中的watch作用一致）
• 特点：Vue3中的watch只能监视以下四种数据：

1. ref定义的数据。
2. reactive定义的数据。
3. 函数返回一个值（getter函数）。
4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到

* 情况一

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

以下几种情况：

* 情况二

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

注意：

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

• 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

 情况三

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

* 情况四

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

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

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

 情况五

监视上述的多个数据

3.10. 【watchEffect】

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

• watch对比watchEffect

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

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

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

  3.11. 【标签的 ref 属性】

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

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

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

  用在普通DOM标签上：

用在组件标签上：

3.12. 【props】

// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {
 id:string,
 name:string,
    age:number
   }
   
// 定义一个自定义类型Persons
export type Persons = Array

App.vue中代码： 

Person.vue中代码：

3.13. 【生命周期】

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

• 规律：

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

• Vue2的生命周期

创建阶段：beforeCreate、created

挂载阶段：beforeMount、mounted

更新阶段：beforeUpdate、updated

销毁阶段：beforeDestroy、destroyed

• Vue3的生命周期

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

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

• 示例代码：

3.14. 【自定义hook】

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

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

示例代码：

• useSum.ts中内容如下：

import {ref,onMounted} from 'vue'

export default function(){
  let sum = ref(0)

  const increment = ()=>{
    sum.value += 1
  }
  const decrement = ()=>{
    sum.value -= 1
  }
  onMounted(()=>{
    increment()
  })

  //向外部暴露数据
  return {sum,increment,decrement}
}		

• useDog.ts中内容如下：

import {reactive,onMounted} from 'vue'
import axios,{AxiosError} from 'axios'

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

  // 方法
  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 = error
      console.log(err.message)
    }
  }

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

组件中具体使用：