(VUE3) 三、Vue3高阶（Hook函数 & 生命周期 & toRef和toRefs & 其他的组合式API）

1.Hook函数

hooks是一种开发思想，我们可以利用hooks把相关代码剥离出去。hook有个编码习惯是用use开头。

在src下新建hooks文件夹，下新建useCar.js。useCar.js里是个函数，且直接export default给它导出去，且直接return返回定义的这些东东西西。

// 导入ref,computed
import {ref,computed} from 'vue'

let carName = ref("奔驰");
    let carPrice = ref(5000);
    // 修改汽车名称的方法
    let updateCarName = (name) => {
      carName.value = name;
    };
    // 修改汽车价格的方法
    let updateCarPrice = (price) => {
      carPrice.value = price;
    };
    // 汽车的美国价格
    let usaCarPrice = computed(() => {
      return '$'+(carPrice.value / (Math.random() + 6)).toFixed(2);
    });

    return {
      carName,
      carPrice,
      updateCarName,
      updateCarPrice,
      usaCarPrice
    }

同理，再搞一份飞机的hook函数，hooks文件下usePlane.js

// 导入ref,computed
import {ref,computed} from 'vue'
export default function(){
    let planeName = ref('波音747')
    let planePrice = ref(20000)
    let updatePlaneName = (name) => {
      planeName.value = name;
    };
    let updatePlanePrice = (price) => {
      planePrice.value = price;
    };
    // 飞机的美国价格
    let usaPlanePrice = computed(() => {
      return  '$'+ (planePrice.value / (Math.random() + 6)).toFixed(2);
    });
    return {
        planeName,
        planePrice,
        updatePlaneName,
        updatePlanePrice,
        usaPlanePrice
    }
}

components下Child.vue组件：
在组件里导入所需的hook函数useCar，
import useCar from'../hooks/useCar'，然后在setup（）{ } 里 return{ } 里 ...useCar()（三个点是展开运算符）

  

    

      
汽车名称：{{ carName }}修改汽车名称
      
汽车价格：{{ '￥'+carPrice }}修改汽车价格
      
美国价格：{{usaCarPrice}}
    
    

    

      
汽车名称：{{ planeName }}修改飞机名称
      
汽车价格：{{ '￥'+planePrice }}修改飞机价格
      
美国价格：{{usaPlanePrice}}
    
  

页面效果：

hooks下每个xx.js文件就是一个业务，这里面的业务可以在多个xx.vue组件中使用。分别在组件中导入所需的hook函数useCar，然后在setup（）{ } 里 return{ } 里 ...useCar()，就可以惹。

---

2.生命周期

vue3是上来就挂载。vue2是先走一半再挂载。

App.vue组件：

后台打印效果：

点击count++之前：

点击count++之后：

beforeUpdate和updated会在什么场景下使用？
顾sensei答，这会是一个补救措施，或是修改后的跟踪措施；或有点像监视器，能够监测到页面是否在更新，watch是针对某一个变量去监视，但它是监测到整个页面。

在vue3中，beforeDestroy和destroyed这两个生命周期函数，进行了重命名，替换成了 beforeUnmount 和 unmounted 。
在vue3中，除了beforeCreate和created这两个生命周期函数没有组合式api，其他的生命周期函数都有对应的组合式api，命名方式只是在原有方法名的前面加上on。
setup()函数在这里充当了beforeCreate和created这两个生命周期函数的功能。

注意：setup是在beforeCreate和created之前运行的。所以，在setup里面，无法调用data和methods里面的数据。

Child3.vue组件：

App.vue组件：

---

3.toRef 和 toRefs

toRef() 方法，用于将一个响应式对象里面的指定属性以ref形式的对象返回，这样写的好处是，可以简化模板里面的语法。

toRefs() 方法，用于将一个reactive对象返回一个新对象，该对象里面的所有属性都是一个ref对象。

---

4.其他的组合式API

readonly() 方法，用于返回一份只读数据。注意：该方法，不能将一个普通值类型数据转为只读数据。
markRaw() 方法，返回出来的对象，再也不能成为响应式对象。应该用的也不多奥。
unref() 方法，用于判断对象如果是ref，就返回ref的value值；如果不是ref，直接返回值。
shallowReactive() / shallowRef() 方法，用于定义浅响应式对象。只对第一层属性设置响应式。
shallowReadonly() 是浅只读，只有第一层属性是只读的。
toRaw() 方法，用于将一个响应式对象转为普通对象。