vue 生命周期 笔记

生命周期：一个组件从创建到销毁的这个过程叫做生命周期 生命周期钩子函数

 

1、组件从创建到销毁的过程

1、创建前 创建后

2、挂载前 挂载后

3、更新前 更新后

4、销毁前 销毁后

beforeCreate:

当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loading

 

created:(*****)

创建后:

1、在当前生命周期函数中我们可以访问到vm身上所有的属性和方法

2、当前生命周期函数会将data和methods身上所有的属性和方法都挂载在vm的实例身上

3、当前生命周期函数会将data身上所有的属性添加一个getter/setter方法，因此如果需要进行

前后端数据交互的时候必须在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行了绑定

那么这个属性身上就不会有getter/setter方法，因此数据也不会动态的进行改变

 

beforeMount：

挂载前：

数据和模板还没有进行相结合，在这个生命周期函数中我们可以进行数据最后的修改

 

在当前生命周期函数中是访问不到真实的DOM结构

 

mounted:(*****)

挂载后：

数据和模板已经结合，在这个生命周期函数中我们可以通过this.$refs访问到真实DOM结构

 

$refs

ref="值必须是整个VDom中唯一";

 

访问的时候通过this.$refs.值

 

 

ref与document的区别？

document是从整个页面去查找DOM结构，这个DOM结构肯定是已经插入到页面的DOM结构

ref是从当前vm的虚拟DOM中找到的当前元素,ref是从内存当中找到的DOM结构

 

 

beforeUpdate:

更新前：

当data中的数据发生了改变的时候就会执行

1、可以访问到真实的DOM结构

2、可以对数据做最后的修改

3、当前生命周期函数中的数据和模板还没有更新完毕

 

updated:

更新后：

1、数据更新后最新的DOM结构

2、在当前生命周期函数中需要特别的注意，因为当前函数是一个频繁触发的函数。

因此如果在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前判断

 

beforeDestroy:*

销毁前

1、在这个生命周期函数中，还是可以继续访问到真实的DOM结构以及data中的数据

2、一般我们都会在这个生命周期函数中做一些事件解绑/移除的操作

 

destroyted:

销毁后：

1、将DOM与数据之间的关联进行断开

2、在当前生命周期函数中是访问不到真实的DOM结构

 

 

 

 

 

以上生命周期函数中

多次执行的生命周期函数

1、beforeUpdate

2、updated*

 

组件第一个创建的时候会执行哪些生命周期函数

beforeCreate

created*

beforeMount

mounted*

 

innerText innerHTML outerText outerHTML

vm实例身上的方法

 

$mount() 手动设置挂载点 例子：vm.$mount("#app");

 

$destroy(); 销毁

 

$forceUpdate 强制更新 (强制调用了render方法);

 

$on() 事件绑定

 

$emit() 事件触发

 

$off() 事件解绑

 

$once() 只绑定一次