VUE生命周期各个函数

VUE生命周期各个钩子函数的作用

• [1]一个组件或者一个实例的生命周期都是从new创建开始（new Vue）
  
• [2]init Events & Lifecircle:实例化之后内部会进行初始化的事件和生命周期的相关配置
  
• [3]beforeCreate()钩子函数：内部获取不到数据，dom元素也不能渲染出来也获取不到
• [4]created:此钩子函数，数据已经挂载，dom元素没有渲染
  这个钩子函数，如果同步 修改数据，不会影响运行中钩子函数
  作用：用来发送ajax请求  也可以做一些初始化时间的操作
• [5]组件或者实例去查找各自的模板，然后编译成虚拟dom放入到render函数中。
• [6]beforeMount:dom马上要渲染出来，但还没有渲染
  此钩子函数和created相似，可进行ajax数据请求
• [7]render：生成好虚拟dom，去替换对应的el元素，渲染成真实的dom
  一般自己不会操作这个函数，会覆盖vue本身带的render，影响页面的渲染
• [8]mounted:生命周期初始化的最后一个函数，数据已经拿到，dom节点也已经渲染出来
• [9] beforeUpdate：当数据发生改变的时候，立即执行
  数据改变，只会获得更新前的值
  钩子内部千万不要进行数据更改，会造成死循环
• [10]updated：钩子函数获取到的是dom更新后的内容
  内部操作:生成新的虚拟dom，跟上一次的dom结构进行对比，对比出来差异后进行渲染更新
• [11]beforeDestroy:销毁前，可以在这个钩子函数中做一些善后操作，比如：清除一些事件（初始化阶段的定时器）
• [12]destroyed:销毁组件，意味着组件的双向数据绑定没了、事件监听器watch也都
  但是组件的dom结构还是存在的

• 点赞 1
• 收藏
• 分享
• 文章举报