阶段一 创建期
beforeCreate 执行之前初始化事件以及生命周期
Vue实例在内存中刚被创建，数据对象（data）和方法（methods）未初始化；
- 在这个钩子函数中，不能获取data中的数据
- 这个函数不能操作DOM
created 进行数据监听
实例已经在内存中创建好，数据和方法已经初始化完成，但是模板还未编译，页面还是没有内容；（此时访问this.$el 和this.$refs.xxx 都是 undefined）
- 在created发送请求
- 可以获取到data中的数据
- 不能操作DOM
beforeMount 执行之前
找到对应的template模板，编译成render函数，转换成虚拟dom，此时模板已经编译完成，数据未挂载到页面 ，也就是说在这个阶段你可以看到标签间的双花括号，数据还未渲染到页面中；
补充：
render : h=>h(App)
在beforeMounte之后和mounted之前，还有渲染render函数，它的作用是把模板渲染成虚拟dom
mounted 挂载完毕
模板编译好了，虚拟dom渲染成真正的dom标签，数据渲染到页面，此时Vue实例已经创建完毕，如果没有其他操作的话，Vue实例也没有操作。一般会在mounted中来渲染从后端获取的数据！(页面初始化时，如果有操作dom的事件一般也会放在mounted钩子函数中，当然，你也 可以放在create中，前提需使用this.$nextTick(function(){})，在回调函数中操作dom。)
--debugger-- 挂载： 把VUE实例生成的虚拟的DOM转成真实的DOM，放在了页面中，这就是挂载； // 编译出的DOM把原有的DOM替换完毕； // 可以获取最终的DOM元素
阶段二 实例期
beforeUpdate 更新数据之前执行
当数据更新时，会调用beforeUpdate 和updated钩子函数；上面四个不再运行 更新数据之前执行
updated 更新数据之后执行
数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数
阶段三 销毁期
beforeDestroy 销毁之前
- 销毁之前
- 清除定时器
destroyed 销毁之后
- 销毁子组件，销毁观察者，事件监听者
- 元素的事件还在，但是更改数据不会再让视图进行更新了
| 钩子函数 | 触发的行为 | 在此阶段可以做的事 | beforeCreadte | vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 | 加loading事件 | created | vue实例的数据对象data有了，$el还没有 | 结束loading、请求数据为mounted渲染做准备 | beforeMount | vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。 | mounted | vue实例挂载完成，data.filter成功渲染 | 配合路由钩子使用 | beforeUpdate | data更新前触发 | updated | data更新时触发 | 数据更新时，做一些处理（此处也可以用watch进行观测） | beforeDestroy | 组件销毁时触发 | destroyed | 组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在 | 组件销毁时进行提示 |
|---|
大图警告！！！！ 大图警告！！！！ 大图警告！！！！
大图警告！！！！ 大图警告！！！！ 大图警告！！！！
大图警告！！！！ 大图警告！！！！ 大图警告！！！！
文章链接 官网链接
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！