Vue生命周期和MVVM框架
生命周期
组件从开始到结束的全过程
- 创建阶段：beforeCreate、created
- 挂载阶段：beforeMount、mounted
-
更新阶段：beforeUpdate、updated
- 销毁阶段：beforeDestroy、destroyed
与动态组件有关的两个特殊的钩子：
activated(激活)、deactivated(休眠)
与组件异常捕获有关的一个钩子：
errorCaptured
生命周期有哪些
- beforeCreate：声明methods方法，声明生命周期钩子
- created：注入provide数据，响应式劫持、把data上数据遍历后放在this上
- beforeMount：通过el/$mount/template找视图模板，把template视图模板编译成render() (render方法是用于创建虚拟DOM的)
- mounted：创建$el挂载节点，调用render()方法第一次生成虚拟DOM（Vnode是对真实视图结构的一种数据描述），Vue开始编译工作，循环递归，指令和声明式变量进行touch，依赖收集、通知Watcher第一次完成DOM渲染
- beforeUpdate：网页呈现在你的面前上，当各种事件交互触发data变化时
- updated：再次调用render()方法生成新的虚拟DOM（现在就有了两个虚拟DOM，执行patch运算（diff运算）找出两个虚拟DOM之间的最小差异（脏节点集合），通过一个队列进行异步更新。
- beforeDestroy：当调用$destroy()或路由切换时，即将进入销毁阶段
- destroyed：移除当前组件的Watcher（DOM将无法再更新了），拆卸掉所有的子组件，移除事件监听器（wacth等等）
const app = new Vue({
data () { return {
num: 1 }
},
watch: {
num () {
console.log( ' --- num changed ' )
}
}, // 声明methods方法 // 声明生命周期钩子 beforeCreate () {
console.log( ' ---beforeCreate ' ) }, // 注入provide数据 // 响应式劫持、把data上数据遍历后放在this上 created () {
console.log( ' ---created ' ) // 调接口 }, // 通过el/$mount/template找视图模板 // 把template视图模板编译成render() (render方法是用于创建虚拟DOM的) beforeMount () {
console.log( ' ---beforeMount ' ) }, // 创建$el挂载节点 // 调用render()方法第一次生成虚拟DOM（Vnode是对真实视图结构的一种数据描述） // Vue开始编译工作，循环递归，指令和声明式变量进行touch，依赖收集、通知Watcher第一次完成DOM渲染 mounted () {
console.log( ' ---mounted ' ) // 调接口、开定时器、建立websocket长连接、echarts图表实例化、DOM/BOM操作。。。 }, // 网页呈现你的面前上，当各种事件交互触发data变化时 beforeUpdate () {
console.log( ' ---beforeUpdate ' ) }, // 再次调用render()方法生成新的虚拟DOM（现在就有了两个虚拟DOM） // 执行patch运算（diff运算）找出两个虚拟DOM之间的最小差异（脏节点集合），通过一个队列进行异步更新。 updated () {
console.log( ' ---updated ' ) // updated在某些场景下，可以模拟出watch/$nextTick()的功能。 }, // 当调用$destroy()或路由切换时，即将进入销毁阶段 beforeDestroy () {
console.log( ' ---beforeDestroy ' ) // 清除定时器、清除缓存 }, // 移除当前组件的Watcher（DOM将无法再更新了） // 拆卸掉所有的子组件 // 移除事件监听器（wacth等等） destroyed () {
console.log( ' ---destroyed ' ) },
methods: {
add () {
console.log( ' ---add ' ) this .num++ }
}
})
app.$mount( ' #app ' )
app.$mount('#app')和el:'#app'都是挂载到真实DOM中。
什么是虚拟DOM
是一个很大的JSON数据，用于描述视图模板的，保存在内存中。
虚拟DOM存在的价值点
更新，把DOM更新粒度降到最低，规避人为DOM滥操作。
什么是diff运算
在更新阶段，patch对新旧虚拟DOM进行对比，找出脏节点，提交更新。
什么是MVVM框架
MVVM流程 : M数据层 -> VM虚拟DOM层 -> V视图层
网页本质 = M数据层 + V视图结构