vue 学习笔记（一）

vue

实例生命周期钩子

beforeCreate--->created--->beforeMount--->mounted(beforeUpdate-->updated)--->beforeDestory--->destroyed

(1)在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，同时初始化事件

(2)

首先系统会判断对象中有没有el选项

有el选项，则继续编译过程

没有el选项，则停止编译，也意味着暂时停止了生命周期，直到vm.$mount(el)

(3)

1.如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数

2.如果没有template参数选项，则将外部的HTML作为模板编译（template），也就是说，template参数选项的优先级要比外部的HTML高

3.如果1,2条件都不具备，则报错

(4)正因为render函数和template选项的“优先级”比外部HTML要高，所以，最后一般会存在一个外部HTML模板被Vue实例本身配置的模板所“替代”的过程也就是上图所说的

“replace”

(5)

在Vue中，数据更改会导致虚拟 DOM 重新渲染，并先后调用beforeUpdate钩子函数和updated钩子函数

但要注意一点：重渲染（调用这两个钩子函数）的前提是被更改的数据已经被写入模板中！！（这点很重要）

(6)beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

【注意】就如同调用在Vue实例上调用$mounted会使暂停的生命周期继续一样，调用$destroy()会直接销毁实例