vue生命周期及使用（Vue生命周期和MVVM框架）
导读：生命周期...
生命周期
组件从开始到结束的全过程
创建阶段：beforeCreate 、created 挂载阶段：beforeMount 、mounted更新阶段：beforeUpdate 、updated
销毁阶段：beforeDestroy 、destroyed与动态组件有关的两个特殊的钩子：
与组件异常捕获有关的一个钩子：
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视图结构
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！