Vue生命周期

最新推荐文章于 2024-08-23 13:45:37 发布

仙女不下凡

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量73

点赞数 1

分类专栏： Vue知识点集合文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_55181759/article/details/119951884

版权

Vue知识点集合专栏收录该内容

7 篇文章 0 订阅

订阅专栏

🌵 作者主页：仙女不下凡－前端萌新

🌵 前言介绍：以下👇 内容都是我个人对于前端知识的总结，会定期更新欢迎持续关注！

🌵 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

💜第一章单组件生命周期💜

💛一、生命周期💛

1.什么是生命周期

🌼生命周期：是一个Vue实例¹从创建到销毁的整个过程，Vue实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom => 渲染、更新 => 渲染、卸载等⼀系列过程，Vue组件²也可以看成一个Vue实例。
㊙️链接：Vue组件与Vue实例的区别需要充分了解。

2.生命周期函数(钩子)－Vue2.0

🌼在生命周期中，特定的时间点会被自动执行的函数。
Vue生命周期
🌼beforeCreate创建前 ：数据观测和初始化事件还未开始，此时data的响应式追踪、event/watcher都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。
🌼created创建后：实例创建完成，实例上配置的options包括data、computed、watch、methods等都配置完成，但是此时渲染得节点还未挂载到DOM，所以不能访问到$el属性。
🌼beforeMount挂载前：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
🌼mounted挂载后：在el被新创建的vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
🌼beforeUpdate更新前：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实DOM还没有被渲染。
🌼updated更新后 ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时DOM已经根据响应式数据的变化更新了。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
🌼beforeDestroy销毁前：例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例。
🌼destroyed销毁后：实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。
🌼另外还有keep-alive独有的生命周期，分别为activated和deactivated。用keep-alive包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行deactivated钩子函数，命中缓存渲染后会执行activated钩子函数。
Vue数据渲染的过程
🌼该Vue实例代码没有采用脚手架结构，通过执行该段代码可以更加清晰了解，生命周期在实际开发中的应用、对数据结构、对页面的影响。

/示例代码 .html页面－此处为Vue实例/
<body>
  <div id="root">
    <h2>欢迎学习Vue</h2> 
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;
  var myVue=new Vue({
    el:"#root",
    data:{
      data:"你好",
      info:"vue"
    },
    beforeCreate:function(){
      console.log("创建前========")
      console.log(this.data)
      console.log(this.$el)
    },
    created:function(){
      console.log("已创建========常用, 实例出现在内存中时调用")
      console.log(this.info)
      console.log(this.$el)
    },
    beforeMount:function(){
      console.log("挂载前========")
      console.log(this.info)
      console.log(this.$el)
    },
    mounted:function(){
      console.log("挂载完成========常用, 实例出现在页面中时调用")
      console.log(this.info)
      console.log(this.$el)
    },
    beforeUpdate:function(){console.log("更新前========");},
    updated:function(){console.log("更新完成========常用, 实例更新时调用");},
    beforeDestroy:function(){
      console.log("销毁前========")
      console.log(this.info)
      console.log(this.$el)
    },
    destroyed:function(){
      console.log("已销毁========常用, 实例消亡时调用")
      console.log(this.info)
      console.log(this.$el)
    }
  })
</script>