Vue_实例、Vue实例的生命周期钩子

阳光穿透心脏的1/2处 2022-05-22 13:19 377阅读 0赞

**一.Vue实例：**

var vm= new Vue({});

如何看生成的Vue实例呢？  
在控制台直接输：vm 敲回车。就会显示出vm的实例对象  
`vm.$data` 敲回车 ，就可以看到实例中data中的信息。  
`vm.$el` 敲回车 就可以将实例负责接管的DOM元素输出来  
`vm.$destroy` 敲回车 Vue实例就会被销毁，怎么看Vue实例被销毁了呢？给Vue实例的数据修改，例如：`vm.$data.message = "byebye"` 然后页面上不会有同步响应，因为Vue实例已经被销毁了，但是销毁之前绑定的属性和方法不会被销毁。  
以`vm.$`为首的就是Vue实例的属性和方法  
  
**二.Vue实例的生命周期钩子**  
     在Vue官网我们可以看到Vue实例的生命周期图示，通过它可以很快学会Vue实例的生命周期函数  
![这里写图片描述][70]  
生命周期函数就是Vue实例在某个时间点会执行的函数  
这些生命周期函数，并没有定义在methods中，而是直接定义在Vue实例中，值的注意。

常用的8个生命周期钩子：

① beforeCreate：在Vue实例创建之前执行的函数

② created：在Vue实例创建之后执行的函数

③ beforeMount： 在Vue实例创建之后，数据未渲染负责接管DOM之前执行的函数

④mounted ：Vue实例将数据渲染到接管DOM元素之后执行的函数

⑤ beforeDestory：Vue实例在为销毁之前执行的函数

⑥ destroyed：Vue实例在执行vm.destroyed()命令之后，销毁之后执行的函数

⑦ beforeUpdata: 在Vue实例数据更新之前执行的函数

⑧ updated:在Vue实例数据更新之后执行的函数。

还有三个不常见的函数：activated、deactivated、errorCaptured  
eg:  
`export default { beforeCreate:function(){ console.log('beforeCreated') }, created:function(){ console.log('created') }, beforeMount:function(){ console.log('beforeMount') }, mounted:function(){ console.log('mounted') }, beforeUpdata:function(){ console.log('beforeUpdata') }, updated:function(){ console.log('updated') }, beforeDestroy:function(){ console.log('beforeDestroy') }, destroyed:function(){ console.log('destroyed') } }`  
执行顺序:  
![这里写图片描述][70 1]

[70]: /images/20220522/98c4707e4b9147cdbf4dd2cbadd51bd4.png
[70 1]: /images/20220522/6811fbbfcdc84a67b925344683406219.png