目录
- 一、生命周期
- 二、自定义hook函数
- 三、toRef
- 四、参考链接
一、生命周期
Vue3中可以继续使用Vue2中的生命周期钩子，但有两个被更名：
- beforeDestroy改名为beforeUnmount
- destroy改名为unmounted
Vue3也提供了组合式API形式的生命周期钩子，与Vue2中钩子对应关系如下：
- beforeCreate ===> setup()
- created ===> setup()
- beforeMount ===> onBeforeMount
- mounted ===> onMounted
- beforeUpdate ===> onBeforeUpdate
- updated ===> onUpdated
- beforeUnmount ===> onBeforeUnmount
- unmounted ===> onUnmounted
import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'setup(){let sum = ref(20)// 通过组合式API的形式去使用生命周期钩子onBeforeMount(()=>{console.log('---onBeforeMount---')})onMounted(()=>{console.log('---onMounted---')})onBeforeUpdate(()=>{console.log('---onBeforeUpdate---')})………… }
二、自定义hook函数
- 什么是hook? —— 本质是一个函数，把setup函数中使用的Composition API进行了封装。
- 类似于vue2.x中mixin。
- 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。
创建一个js文件，比如usePoint.js ,内容：
import {reactive, onMounted, onBeforeUnmount} from 'vue'export default function(){let point = reactive({x:0,y:0})// 获取鼠标点击坐标function savePoint(event){point.x = event.pageXpoint.y = event.pageY}onMounted(()=>{window.addEventListener('click', savePoint) }) onBeforeUnmount(()=>{window.removeEventListener('click', savePoint)}) return point}
在vue文件中引入userPoint.js
<p>鼠标点击坐标 x:{{point.x}} y:{{point.y}}<p>import usePoint from '/hook/usePoint.js' setup(){let point = usePoint()return { point }}
三、toRef
- 作用：创建一个ref对象，其value值指向另一个对象中的某个属性。
- 语法：const name = toRef(person, ‘name’)
return {name: toRef(person,'name')salary: toRef(person.job.j1, 'salary')}
- 应用：要将响应式对象中的某个属性单独提供给外部使用时。
- 扩展：toRefs 与 toRef 功能一致，但可以批量创建多个ref对象，语法：toRefs(person)
// person中的salary属性用法<p> {{ job.j1.salary }} </p>return {// 把person属性都拆开...toRefs(person)}
四、参考链接
[01] Vue3学习笔记(尚硅谷)
)
