Vue 生命周期
2025-03-13 08:52:29 5 举报详解 Vue 生命周期
作者其他创作
大纲/内容
否
刚刚初始化一个空的Vue实例对象，此时，在这个对象上，只有一些默认的生命周期函数和默认的事件，其他的均未创建
是
updated
当执行 destroyed 函数时，组件已经被完全销毁，此时组件中所有 data、methods、以及过滤器，指令等，都已经不可用了
当调用vm.$destroy()函数时
虚拟 DOM 重新渲染并应用更新
new Vue()
created
将编译好的 HTML 替换掉 el 属性所指向的 dom 对象或替换对应 HTML 标签里面的内容
beforeDestroy
Vue 实例销毁之前执行的钩子函数
编译模板：
挂载完毕
beforeCreate
初始化 data 和 methods
mounted
创建 vm.$el并用其替换 \"el\"
实例创建完成之后的钩子函数
把 data 对象里面的数据和Vue语法写的模板编译成 HTML
beforeMount
beforeUpdate
注入 & 效验
实时监控data 里面的数据变化，以便随时更新
destroy
updated 执行时，页面和 data 数据已经保持同步，都是最新的
创建 Vue 实例
将 template 编译到 render 函数中
事件 & 生命周期
销毁完毕
初始化
是否指定\"template\" 选项？
是否指定\"el\" 选项？
解除绑定销毁子组件以及事件监听器
当 data 被修改时
beforeMount：开始挂载编译生成的 HTML 到对应位置时触发的钩子函数。但：此时还未将编译出的 HTML 渲染到页面上
当调用vm.$mount(el)函数时
当执行 beforeDestroy 钩子函数时，Vue 实例就已经从运行阶段进入销毁阶段，此时，组件中所有 data、methods、以及过滤器，指令等，都处于可用状态，此时还未真正执行销毁过程
将 el 外部的 HTML作为 templdate 编译
mounted：将编译好的 HTML 挂载到页面完成后执行的钩子函数，此时可以发送 ajax 请求获取数据的操作进行数据初始化。但，mounted 在整个实例声明内只执行一次
Vue 实例销毁执行的钩子函数
创建 Vue 实例前的钩子函数
0 条评论
下一页
