13 组合式API（四）

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

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

作者：来自ArimaMisaki创作

文章目录

13 组合式API（四）
- 13.1 注册周期钩子
- 13.2 生命周期流程图
- 13.3 自定义hook
- 13.4 toRef

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>

一幅长文细学Vue（十三）——组合式中的生命周期相关推荐

一幅长文细学Vue（十）——初探组合式
10 组合式API(一) 摘要:在进行前面的学习后,我们为了方便和Ts搭配使用Vue,需要放弃原有的选项式API写法,转向更为复杂的组合式API的学习:当然,这个学习过程无需担心学习成本过大,因为当你 ...
一幅长文细学Vue（一）——Webpack打包工具
1 项目开发工具摘要在本文中,我们会详细讨论webpack是如何打包发布项目,不过对于Vue来说,Vite可以做到和webpack一样的功能. 声明:如果想要看懂此文章,需具备node.js中 ...
一幅长文细学HTML5
HTML5 摘要在本文的学习中,我们会讲述HTML5新增的特性.HTML5并不是一种新的语言,而是HTML语言的第五次重大修改版本.现如今很多主流浏览器都支持H5如chrome.firefox. ...
一幅长文细学React（一）——入门
1 入门摘要:React是前端两大热门框架之一,为此,学好React对于前端开发工程师来说是必不可少的.在本文中,我们会快速入门React. 声明:为了文章的清爽性,在文章内部的代码演示中只会附上部 ...
一幅长文细学CSS3
摘要:CSS实际上指的是层叠样式表(Cascading style sheets),其作用是给页面中的HTML标签设置样式.在本文中我们会详细记录CSS3是如何给HTML美化样式的. 声明:在使用本文 ...
一幅长文细学JavaScript（五）——ES6-ES11新特性
5 ES版本摘要 ES5的先天不足致使ES后续版本的发展,这也是前端人员绕不开的一个点.如果我们想要在工作和面试中轻松解决问题,那么了解ES6-ES11是必不可少的. 在本文中,我将采用一种更加通俗 ...
一幅长文细学GaussDB（一）——数据库介绍
文章目录 1 数据库介绍 1.1 数据库技术 1.2 数据库技术发展史数据库技术产生和发展数据库三个阶段比较数据库系统优势层次模型网状模型关系模型关系数据库产品历史结构化查询语言SQL ...
一幅长文细学GaussDB（二）——数据库基础知识
文章目录 2 数据库基础知识 2.1 数据库管理简介数据库管理数据库管理工作范围对象管理制定数据库对象命名规范备份和恢复灾难恢复备份方式数据库安装数据库卸载数据库迁移数据库扩容 ...
一幅长文细学华为MRS大数据开发（四）——HBase
4 HBase 摘要:HBase是一种非关系型数据库,它是基于谷歌BigTable的开源实现,和BigTable一样,支持大规模海量数据的存储,对于分布式并发数据处理的效率极高,易于扩展且支持动态伸缩 ...

一幅长文细学Vue（十三）——组合式中的生命周期