vue生命周期

vue生命周期就是指组件被创建到被销毁的过程

生命周期钩子

生命周期钩子会在生命周期的不同阶段被调用。

1. beforeCreate被创建之前，此时data和methods还没有被初始化
2. created创建之后，此时可以访问到data和methods
3. beforeMount挂载之前，此时页面还没有被渲染，访问不到dom元素
4. mounted挂载完成，此时页面被渲染，可以访问到dom元素
5. beforeUpdate页面更新之前，此时data数据已经是最新的，但是页面上的数据还是旧的
6. updated页面更新后，此时data数据和页面上的数据都是最新的
7. beforeUnmount实例销毁前，此时还可以访问到dom元素，data和methods也还存在
8. unMounted实例销毁后，此时vue实例被销毁，所有东西不存在

在这上面的钩子中只有beforeUpdate和updated会执行多次，当data数据改变时就会触发这两个钩子函数。

代码演示

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

const app=createApp(App)
app.mount('#app')
// 3秒后销毁vue实例
setTimeout(()=>{
  app.unmount('#app')
},3000)

APP.vue

<template>
  <div id="d">
    dom
    <button @click="add">{{num}}</button>
  </div>
</template>

<script>
// vue2写法
export default {  
  data() {
    return {
      num: 0
    }
  },
  methods: {
    add: function(){
      this.num++;
    }
  },
  // vue生命周期就是指组件被创建到被销毁的过程
  // 在实例初始化之后，这时data和methods还没有初始化
  beforeCreate(){
    console.log('beforeCreate----创建前');
    const d=document.getElementById('d');
    console.log('dom:',d);
    console.log('num:',this.num);
  },
  // data和methods被初始化 但是dom还没有被渲染
  created(){
    console.log('created----创建之后');
    const d=document.getElementById('d');
    console.log('dom:',d);
    console.log('num:',this.num);
  },
  // 页面准备挂载时候被调用,此时相关的渲染函数首次被调用
  beforeMount(){
    console.log('beforeMount----挂载开始');
    const d=document.getElementById('d');
    console.log('dom:',d);
    console.log('num:',this.num);
  },
  // 挂在完成，也就是模板中的HTML渲染到HTML页面中，此时可以访问到dom元素，mounted只会执行一次。
  mounted(){
    console.log('mounted----挂载完成');
    const d=document.getElementById('d');
    console.log('dom:',d);
    console.log('num:',this.num);
  },
  //  这时数据更新了 但是页面中还没有显示最新的数据
  beforeUpdate(){
    console.log('beforeUpdate----更新之前被调用');
    const d=document.getElementById('d');
    console.log('dom:',d);
    console.log('num:',this.num);
  },
  // 这时最新数据被渲染到页面上
  updated(){
    console.log('updated----更新后');
    const d=document.getElementById('d');
    console.log('dom:',d);
    console.log('num:',this.num);
  },
  // 此时还可以访问到dom元素，data和methods也还存在
  beforeUnmount(){
    console.log('beforeDestroy----销毁前');
    const d=document.getElementById('d');
    console.log('dom:',d);
    console.log('num:',this.num);
  },
  // 此时vue实例被销毁，所有东西不存在
  unmounted(){
    console.log('destroyed----销毁后');
    const d=document.getElementById('d');
    console.log('dom:',d);
    console.log('num:',this.num);
  },
}
</script>
<style>

</style>

结果

nsole.log(‘num:’,this.num);
},
}

结果

[外链图片转存中...(img-7mj9WKK6-1680185921275)]

vue实例被创建后会立即执行前四个钩子，只有当数据发生改变时才执行beforeUpdate和updated，后面两个是只有实例被销毁才执行。