2019-10-12 Vue-vue框架全生命周期理解

vue生命周期分为八个部分，分别是beforeCreate(初始化界面前)、created(初始化界面后)、beforeMount(渲染dom前)、mounted(渲染dom后)、beforeUpdate(更新数据前)、updated(更新数据后)、beforeDestroy(销毁组件前)、destroyed(销毁组件后)。

第一阶段：beforeCreate-初始化界面前

深入响应式原理

1. 如何跟踪变化
   在new Vue()后，vue会初始化生命周期、事件、props、methods、data、computed与watch等。
   当把一个普通的JavaScript对象传入Vue实例作为data选项，Vue将遍历此对象的所有属性，并使用Object.defineProperty将这些属性全部转为getter/setter。
   每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染
2. 检测变化的注意事项
   由于vue无法检测到对象属性的添加或删除，所以属性必须在data对象上存在才能让Vue将它转换为响应式的。
   对于已经创建的实例，Vue不允许动态添加根级别的响应式属性。但是，可以使用this.$set(object, propertyName, value)，有时候可能需要为已有对象赋值多个属性，可以使用Object.assign({}, object, others})

beforeCreate

在实例初始化之后，数据观测暴露了一些有用的实例属性与方法
实例初始化——new Vue()
数据观测——在vue的响应式系统中加入data对象中所有的数据
暴露属性和方法——就是vue实例自带的一些属性和方法，带$的属性和方法就是vue实例自带的，可以和用户自定义的区分开来
用法：在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用，注意是之前，此时data、watcher、methods统统没有，这个时候的vue实例还什么都没有，但是$route对象是存在的，可以根据路由信息进行重定向之类的操作

第二阶段：created(初始化界面后)

created

在实例已经创建完成后调用
在这一步，实例已完成一下配置：数据观测、属性和方法的运算
能拿到数据、修改数据，但是不会触发updated和beforeUpdate钩子函数
可以在这个钩子函数里发请求，访问后端接口拿数据

第三阶段：beforeMount(渲染dom前)

beforeMount

在挂载渲染dom开始之前被调用，相关的render函数首次被调用
真实的dom节点挂载到页面之前
编译模板已结束，也可以更改数据，但是不会触发updated和beforeUpdate钩子函数，此时打印$el属性为undefined
页面渲染的数据，尽量在这之前完成赋值

第四阶段：mounted(渲染dom后)

mounted

在挂载之后被调用，在这一步创建vm.$el属性并替换el，挂载到实例上
此时页面渲染已完成，依赖于dom的代码放此处
真实的dom节点挂载到页面以后
可以访问和更改数据
而且修改数据会触发updated和beforeUpdate钩子函数

第五、六阶段：beforeUpdate(更改数据前)和updated(更改数据后)

beforeUpdate

修改数据之后，重新渲染之前调用

updated

修改数据重新渲染之后调用
都可以监听data里的所有数据变化，最好使用updated钩子函数

第七、八阶段：beforeDestroy(销毁组件前)和destroyed(销毁组件后)

所有的事件监听都已被移除。所有的子实例也已被销毁