13 组合式API（四）

摘要：每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。在本文中，我们会仔细谈论生命周期钩子在组合式API中是如何使用的。

声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码。

作者：来自ArimaMisaki创作

13.1 注册周期钩子

说明：在组合式写法中，我们并不是直接声明onMounted这样的生命周期钩子，而是需要从vue中解构中onMounted()，该函数中传入一个匿名函数。

<script lang="ts" setup>
import { reactive, computed,onMounted } from 'vue'onMounted(()=>{console.log(`the component is now mounted.`);
})
</script><template><div></div>
</template>

13.2 生命周期流程图

13.3 自定义hook

说明：hook本质上是一个函数，其把setup函数中使用的CompositionAPI进行了封装，达到一个复用代码，使结构清晰的效果；自定义hook的作用类似于vue2中的mixin技术。

import {reactive,onMounted,onBeforeMount} from 'vue'
export default function() {let point = reactive({x:0,y:0})function savePoint(event:any) {point.x = event.pageXpoint.y = event.pageYconsole.log(event.pageX,event.pageY);}onMounted(()=>{window.addEventListener('click',savePoint)})onBeforeMount(() => {window.removeEventListener('click',savePoint)})return point
}

<script lang="ts">
import { defineComponent } from 'vue'
import usePoint from '../hooks/usePoints.js'
export default defineComponent({setup() {const point = usePoint();return {point}   }
})
</script><template><div><h2>测试组件</h2><h2>当前点击时鼠标的坐标为：x{{point.x}},y{{point.y}}</h2></div>
</template>

13.4 toRef

引入：一个由reactive创建的对象的确是响应式的，但是如果我们在setup函数中并非返回的是响应式对象，而是响应式对象的属性时，此时若在模板中使用该属性，该属性会丢失响应式。

说明：toRef用于将一个普通数据转为一个ref对象，ref对象仍和原数据是同一份数据；toRefs用于将一个普通对象数据中的属性全部转为ref对象，这些ref对象和原数据仍是同一份数据。

提示：有人或许会疑问直接使用ref貌似也能做到相同的效果，但实际的情况是，ref函数会生成一个新的ref对象，该对象和原数据无关系。

<script lang="ts">
import { defineComponent, reactive,toRef } from 'vue'
import usePoint from '../hooks/usePoints.js'
export default defineComponent({name:'MyHome',setup() {let person = reactive({name:'自来也',age:18,job:{j1:{salary:20}}})// 1.如果直接取出对象中的属性，则丢失响应式// 本质上相当于person.name的值给了name1，修改name1当然不会对person.name造成影响const name1 = person.name console.log(name1);// 2.通过toRef取得的数据仍为响应式对象中的属性// 也就是说，即使修改了name2，person中的name也会发生改变const name2 = toRef(person,'name')console.log(name2);return {name:toRef(person,'name'),age:toRef(person,'age'),salary:toRef(person.job.j1,'salary')}}
})
</script><template><div><h2>{{name}}</h2><h2>{{age}}</h2><h2>{{salary}}</h2></div>
</template>