Vue生命周期
2021-11-22 17:39:08 0 举报
Vue生命周期
作者其他创作
大纲/内容
Virtual DOM re-renderand patch
NO
实例销毁之前执行的钩子
YES
Has\"template\"option?
更新之前的钩子
初始化事件和生命周期
有没有el选项
mounted
beforeCreate
InitEvents&Lifecycle
Compile templateintorender function
实时监控数据变化并随之更新DOM
实例销毁
初始化注入
实例化Vue对象
beforeUpdate
created
beforeDestroy
beforeMount
whenvm.$mount(el) is called
Create vm.$eland relpace\"el\" with it
编译模板把data对象里的数据和vue语法声明的模板编译成浏览器可读的HTML
编译好的HTML挂载到页面完成后执行的事件钩子,此钩子函数中一般会做一些Ajax请求获取数据进行数据初始化注意:mounted在整个实例中只执行一次
Destroyed
Compile el's outerHTMLas template
实例创建之后执行的钩子事件
when datachanges
Initinjections&reactivity
whenvm.$destroy()is called
实例销毁完成执行的钩子
更新之后的钩子
Teardownwatchers,childcomponents andevent listener
updated
将编译完成的HTML挂载到对应虚拟dom时触发的钩子
拆除数据监听,子组件和事件监听
没有则使用vm.$mount()去挂载模板
创建实例之前执行的钩子事件
destroyed
此时页面并没有内容
new Vue()
Has\"el\" option?
Mounted
将编译好的HTML替换掉el属性所指向的dom
0 条评论
下一页
为你推荐
查看更多