vue 生命周期 笔记

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

 

一、组件从建立到销毁的过程

一、建立前 建立后

二、挂载前 挂载后

三、更新前 更新后

四、销毁前 销毁后

beforeCreate:

当前生命周期函数主要用来作初始化工做,在这个生命周期函数中咱们能够建立一个loading

 

created:(*****)

建立后:

一、在当前生命周期函数中咱们能够访问到vm身上全部的属性和方法

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

三、当前生命周期函数会将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中的数据发生了改变的时候就会执行

一、能够访问到真实的DOM结构

二、能够对数据作最后的修改

三、当前生命周期函数中的数据和模板尚未更新完毕

 

updated:

更新后：

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

二、在当前生命周期函数中须要特别的注意，由于当前函数是一个频繁触发的函数。

所以若是在当前生命周期函数中作一些事件绑定或者实例化的时候须要作一个提早判断

 

beforeDestroy:*

销毁前

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

二、通常咱们都会在这个生命周期函数中作一些事件解绑/移除的操做

 

destroyted:

销毁后：

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

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

 

 

 

 

 

以上生命周期函数中

屡次执行的生命周期函数

一、beforeUpdate

二、updated*

 

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

beforeCreate

created*

beforeMount

mounted*

 

innerText innerHTML outerText outerHTML

vm实例身上的方法

 

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

 

$destroy(); 销毁

 

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

 

$on() 事件绑定

 

$emit() 事件触发

 

$off() 事件解绑

 

$once() 只绑定一次