Gavin小黑屋——Vue 学习笔记 ：生命周期特点（先渲染HTML标签再渲染数据）_页面渲染过程 和vue生命周期 对应

Vue基础   生命周期特点（先渲染HTML标签再渲染数据）

目录

Vue基础   生命周期特点（先渲染HTML标签再渲染数据）

一、Vue生命周期

Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1、父子组件的加载顺序为

2、父组件更新顺序为

3、子组件更新顺序为

4、父子组件销毁顺序为

二、全局变量和全局方法

三、项目结构

四、vue指令

vue提供的修饰方法

v-bind 动态绑定类

函数和计算属性的区别

 页面路由配置（在router下的index.js文件做配置）

脚手架安装其他库

创建VUE项目及运行

---

---

一、Vue生命周期

Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1. 页面元素创建前.beforeCreate()            表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。
2. 页面元素创建时.created()                     数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。
3. 页面数据加载前.beforeMount()             vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。
4. 页面数据加载时.mounted()                   vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。
5. 页面数据更新前beforeUpdate()            当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
6. 页面数据更新后updated()                     当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
7. 页面销毁前.beforeDestroy()                 组件销毁之前调用 ，在这一步，实例仍然完全可用。    
8. 页面销毁后.destroyed()                        组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。  

1、父子组件的加载顺序为

父beforeCreated ->父created ->父beforeMounted ->子beforeCreated ->子created ->子beforeMounted ->子mounted -> 父mounted

2、父组件更新顺序为

父beforeUpdate->父updated

3、子组件更新顺序为

父beforeUpdate->子beforeUpdate->子updated->父updated

4、父子组件销毁顺序为

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

 

二、全局变量和全局方法

1. 通过thi