何为钩子函数？先看官方文档的说法：
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
简单点来说，钩子函数就是你创建的Vue在初始化、更新数据、销毁时会被自动调用的函数。
八大钩子数分别是：
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestory,destoryed
接下来咱们慢慢来说
附官网声明周期图
先执行一段代码：注意这里的钩子名固定，与data和methods属于平级关系，如果执行相应的方法，会输出一句话
运行结果如下：
一、beforeCreate,created
beforeCreate可以简单的理解为在数据初始化的之前被调用，这时候data和methods尚未没有数据。
created可以理解为在数据初始化之后被调用，这时候data和methods已经被填充了相应的数据。
实验测试：（篇幅所限，只贴出来body中代码,head中代码没变化)
运行结果如下：
结果显示在beforeCreate方法与create方法之间完成了资源的注入。
二、beforeMount,mounted
上面实验已经证明Vue中数据已经注入完毕，beforeMount,mounted则是与页面渲染有关
beforeMount在页面尚未被渲染时使用，也就是Vue的数据没有传到页面。
mounted在页面渲染完成之后使用，也就是此时页面已完全取出Vue中的数据。
实验测试：
结果如下：
此时，Vue对象中资源已注入完毕，页面也已经渲染完毕，上述四个方法在页面被加载时自动被执行
三、beforeUpdate,updated
beforeUpdate在页面更新渲染完成后，DOM树发生改变前被调用
updated在页面DOM树改变后被调用
需要注意的是如果只是改变了dom中的数据（data），未对页面造成任何影响，就不会触发beforeUpdate,updated方法。
实验证明：
结果显示：
四、beforeDestory,destoryed
beforeDestory是在Vue组件销毁之前被调用
destoryed在Vue组件销毁之后被调用
这里为了搭建环境，引入了组件的概念（注意由于解析时自上而下，所以组件写在Vue对象前
实验证明：
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/36629.html