vue的生命周期

最新推荐文章于 2024-05-20 17:02:17 发布

桃汁11

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量665

点赞数 27

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_55269913/article/details/134806432

版权

Vue 生命周期钩子函数是指在 Vue 实例从创建到销毁的整个生命周期中，Vue 提供的一些方法接口。这些方法接口可以在适当的时机执行相关的操作，比如数据初始化、组件更新、DOM 渲染等。

Vue 生命周期钩子函数包括以下四个阶段：

创建阶段：beforeCreate、created
挂载阶段：beforeMount、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed

下面是一个简单的示例：

new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  beforeCreate: function() {  
    console.log('beforeCreate')  
  },  
  created: function() {  
    console.log('created')  
  },  
  beforeMount: function() {  
    console.log('beforeMount')  
  },  
  mounted: function() {  
    console.log('mounted')  
  },  
  beforeUpdate: function() {  
    console.log('beforeUpdate')  
  },  
  updated: function() {  
    console.log('updated')  
  },  
  beforeDestroy: function() {  
    console.log('beforeDestroy')  
  },  
  destroyed: function() {  
    console.log('destroyed')  
  }  
})

在上述示例中，我们在 Vue 实例中定义了所有的生命周期钩子函数，并在每个函数中输出了一条日志信息。当 Vue 实例创建、挂载、更新和销毁时，我们可以在控制台中查看相应的日志信息，从而了解 Vue 生命周期的执行过程。

Vue 生命周期的各个阶段：

创建阶段：在创建 Vue 实例时，会首先执行 beforeCreate 钩子函数，然后执行 created 钩子函数。这一阶段主要完成一些初始化工作，比如创建 Vue 实例、设置数据和事件等。
挂载阶段：在 Vue 实例创建完成后，开始将其挂载到 DOM 元素上，这时会执行 beforeMount 钩子函数，然后执行 mounted 钩子函数。这一阶段主要完成将 Vue 实例与 DOM 元素绑定在一起，以便后续的操作。
更新阶段：当数据发生变化时，Vue 会检测到这些变化并重新渲染 DOM 元素，这时会执行 beforeUpdate 钩子函数，然后执行 updated 钩子函数。这一阶段主要完成根据数据变化更新 DOM 元素的操作。
销毁阶段：当 Vue 实例不再需要时，会执行 beforeDestroy 钩子函数，然后执行 destroyed 钩子函数。这一阶段主要完成解除 Vue 实例与 DOM 元素的绑定关系，并清理资源。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.vue框架安装 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
</head>
<body>
  <!-- 视图 -->
  <div id="app">
    <!-- ref表示dom元素引用 可以通过引用访问dom元素 $refs.box -->
    <div ref="box">{{msg}}</div>
    <button ref="btn" v-on:click="subMsg='我被修改了'">{{subMsg}}</button>
  </div>
  <script>
   //创建Vue实例
    let vm = new Vue({
      // 绑定模板
      el:'#app',
      // 数据模型 存放vue变量
      data:{
        msg:'hello vue2',
        subMsg:'hello js'
      },
      // 提供template选项 将template模板使用render函数编译
      template:`
        <h1>{{msg}}</h1>
      `,
      // 函数和事件处理程序 
      methods:{
        async findAll(){
          let res = await axios.get('http://121.199.0.35:8888/index/carousel/findAll');
          console.log(res,'获取响应')
        }
      },
      // 实例创建阶段 beforeCreate created
      // 实例创建之前
      
      beforeCreate(){
        // alert('1')
        console.log('完成默认事件和默认生命周期注入,此时无法访问data数据和methods方法',this.msg)
      },
      // 实例创建完成 最早发起异步请求 
      created(){
        // alert('2')
        console.log('完成数据注入和数据绑定，此时可以访问data数据和methods中方法',this.msg)
        this.findAll();
      },
      // 实例挂载阶段 vue实例和模板进行绑定阶段
      /**
       * 实例挂载前 完成模板编译 查看有没有el选项，有 查看有没有template选项，没有template选项
         将el外部html元素作为模板进行编译 此时还未和模板进行绑定 此时无法获取dom元素 
       */
      beforeMount() {
        // alert('3')
        console.log(this.$refs.box,'此时无法访问dom元素')
      },
      // 使用render函数编译模板
      render(createElement){
        // alert('4')
        return createElement('p',{},this.subMsg);
      },
      // 实例挂载完成 创建$el代替el作为外部根dom元素 此时vue实例与模板绑定完成 可以访问dom元素
      mounted(){
        // alert('5')
        console.log(this.$refs['box'],'此时可以访问dom元素');
        // 最早图表渲染只能在mounted生命周期进行
      },
      /**
       * 实例更新阶段 只要实例数据发生改变
       * beforeUpdate 实例更新前
       * updated 实例更新完成
       * nextTick() 直接获取最新dom元素 ****************************
      */
      //实例更新前 数据发生改变 数据可以获取到最新 此时使用到数据dom还未更-->旧dom元素
      beforeUpdate(){
        console.log(this.subMsg,this.$refs.btn.innerHTML,'beforeUpdate');
      },
      // 实例更新完成 数据可以获取到最新 此时使用到数据dom更新 重新渲染数据改变所对应dom元素--->新dom元素
      updated(){
        console.log(this.subMsg,this.$refs.btn.innerHTML,'updated');
      },
      /**
       * 实例销毁阶段 
       * beforeDestroy 实例销毁前
       * destroyed 实例销毁完成
      */
      // 实例销毁前  此时实例还未销毁完成 依旧可以更修实例数据和实例方法
      beforeDestroy() {
        console.log('实例销毁前')
      },
      // 实例销毁完成 移除了事件监听和子组件和监听器 此时无法修改vue实例属性和方法 可以访问属性和方法
      destroyed() {
        console.log('实例销毁完成')
      }
    });
    // setTimeout(()=>{
    //   // 销毁实例
    //   vm.$destroy();
    // },8000)
    // 如果没有el属性 可以使用vue实例方法mount和模板绑定
    // vm.$mount('#app');
  </script>
</body>
</html>

桃汁11

关注

27
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的生命周期

在 Vue 实例中定义了所有的生命周期钩子函数，并在每个函数中输出了一条日志信息。当 Vue 实例创建、挂载、更新和销毁时，我们可以在控制台中查看相应的日志信息，从而了解 Vue 生命周期的执行过程。Vue 生命周期钩子函数是指在 Vue 实例从创建到销毁的整个生命周期中，Vue 提供的一些方法接口。这些方法接口可以在适当的时机执行相关的操作，比如数据初始化、组件更新、DOM 渲染等。
复制链接

扫一扫