vue生命周期函数

vue生命周期函数

提示：生命周期函数的图和代码

---

前言

一、生命周期函数是什么？

示例：生命周期函数：在某一时刻会自动执行的函数

二、生命周期的图示

vue对比react：对比就方便记忆了
vue

react

三.生命周期函数

代码如下（示例）：

<script>
  // 生命周期函数：在某一时刻会自动执行的函数
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    // 在实例生成之前会自动执行的函数
    beforeCreate() {
      console.log('beforeCreate')
    },
    // 在实例生成之后会自动执行的函数
    created() {
      console.log('created')
    },
    // 在组件内容被渲染到页面之前自动执行的函数
    beforeMount() {
      console.log(document.getElementById('root').innerHTML, 'beforeMount')
    },
    // 在组件内容被渲染到页面之后自动执行的函数
    mounted() {
      console.log(document.getElementById('root').innerHTML, 'mounted')
    },
    // 当数据发生变化时会立即自动执行的函数
    beforeUpdate() {
      console.log(document.getElementById('root').innerHTML, 'beforeUpdate');
    },
    // 当数据发生变化，页面重新渲染后，会自动执行的函数
    updated() {
      console.log(document.getElementById('root').innerHTML, 'updated');
    },
    // 当 Vue 应用失效是，自动执行的函数
    beforeUnmount() {
      console.log(document.getElementById('root').innerHTML, 'beforeUnmount');
    },
    // 当 Vue 应用失效时，且 dom 完全销毁之后，自动执行的函数
    unmounted() {
      console.log(document.getElementById('root').innerHTML, 'unmounted');
    },
  });
  const vm = app.mount('#root');
</script>

该处使用的url网络请求的数据。

---

总结

提示：vue的函数围绕 creat mount update 和unmount 展开。
react则是在update上多一层控制。之后的钩子函数还得再研究。