vue3.0

生命周期

1. 写法一 和vue2.x 一致 区别在于（beforeUnmount、unmount）名称不一样
2. 写法二 在setup 中使用， 需要引用
   如： import { onBeforeMount } from ‘vue’
   Setup(){ onBeforeMount( () =>{} ) }

Hook

Hook：是一个函数、把setup函数中的组合api进行了封装，类似于vue2中的mixin，
Src目录下新建hooks文件夹 里面写各种逻辑的hook

toRef 和 torefs

在使用 reactive 创建对象后， 在模板中使用对象中的属性， 会多次书写 对象的名称。可以使用这两个api 来把要使用的 单独定义出来

const hero = reactive({
  name: 'zhangsan',
  age: 23,
  family: {
    mather: 'dd'
  }
})
const name = toRef(hero, 'name')
const namgChange = () => {
  hero.name = 'lisi'
}

{{hero.name}}
{{name}}

  变化

上面列子中对hero.name 修改和对 name修改时同等效果的
上面toRef 一次只能处理一个属性

toRefs 一次能处理多个属性

import { toRefs } from "vue";
 setup() {
return {
     ...toRefs(Hero)
    }
}

toRaw

操作场景 用于读取响应式数据，后续操作不会引起页面数据变化
将一个由reactive生成的响应式对象转为普通对象（ref生成的不行）

markRaw

标记一个对象永远不作为响应式对象
用法 markRaw(需要标记的对象)

customRef

创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制，customRef里面需要写一个函数，函数接收两个参数，并且应该返回一个带有 get 和 set 的对象
track () 在get中通知vue追踪return出去的数据变化
tigger() 在set中改完数据后 通知vue重新解析模板

provide 和 inject

父组件用provide提供数据 后代组件用inject使用数据
父组件

子组件

Computed计算属性

有简写和完整写法之分，完整写法考虑读写

   // 计算属性 简写 -- 单纯的读取
    person.fullName = computed(() => {
      return person.firstName + person.lastName
    })

    // 计算属性完整写法 --- 考虑修改
    person.fullName = computed({
      get() {
        return person.firstName + person.lastName
      },
      set(value) {
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })

watchEffect

不用指明监听那个属性的变化，回调函数中用到哪个属性，就监听那个属性变化

watch监听

监听ref所定义的一个响应式数据

1. 监听谁
2. 回调函数
3. 配置对象

监听ref 所定义的多个响应式数据

当监听多个响应式数据时，将多个数据放在一个数组里面，这样监听的newValue和oldValue都也都是也数组的形式呈现

监听reactive 所定义的响应式数据的全部属性

无法正确获取oldValue，并且强制开启了深度监听。

监听reactive 所定义的某个属性

第一个参数要以回调函数返回写法

监听reactive 所定义的数据的多个属性

如果监听的属性嵌套层次比较深 则需要开启深度监听

watch(
      [()=>Hero.username, ()=>Hero.age, () =>Hero.job], // 以回调形式拿到监听的属性
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      {
        immediate: true, // 立即监听
        deep: true, // 深度监听
    })