vue3 基础-生命周期函数

2022-08-25 23:30:56 阅读：163 来源： 互联网

标签：生命 console log root 周期函数 vue3 执行 data 页面

在 vue 中, 生命周期函数可理解为 "在某个时刻, 会自动执行的函数". 先直观感受一下图示.

一共就八个:

<!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>vue 生命周期函数</title>
  <script src="./js/vue@3.2.23.js"></script>
</head>

<body>
  <div id="root"></div>
</body>
<script>
  // 生命周期函数: 在某一个时刻会自动执行的函数
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    methods: {
      handleItemClick() {
        alert('click');
      }
    },
    // 1. 在实例生成之前
    beforeCreate() {
      console.log('beforCreate');
    },
    // 2. 在实例生成之后
    created() {
      console.log('created');
    },
    // 3. 在组件内容被渲染到页面之前
    beforeMount() {
      console.log(document.getElementById('root').innerHTML, 'beforMount');
    },
    // 4. 在组件内容被渲染到页面之后
    mounted() {
      console.log(document.getElementById('root').innerHTML, 'mounted');;
    },
    // 5. 当 data 中的数据发生变化时, 会立即自动执行
    beforeUpdate() {
      console.log(document.getElementById('root').innerHTML, 'beforeUpdate');;

    },
    // 6. 当 data 中的数据发生变化, 页面重新渲染后后执行
    updated() {
      console.log(document.getElementById('root').innerHTML, 'updated');
    },
    // 7. 当 Vue 应用失效时, 自动执行的函数
    beforeUnmount() {
      console.log('beforUnmount');
    },
    // 8. 当 Vue 应用失效时, 且dom完全销毁的时候
    unmounted() {
      console.log('unmounted');
    },
    template: `<div v-on:click=handleItemClick>{{message}}</div>`
  })

  const vm = app.mount('#root');
</script>

</html>

再来重复一遍吧, 这个也是重在理解和能基本使用即可, 没有什么技巧的.

beforCreate ( ) : 在实例生成前执行
created ( ) : 在实例生成后执行
beforeMount ( ) : 在组件内容被渲染到页面之前执行
mounted ( ) : 在组件内容被渲染到页面之后执行
beforUpdate ( ): 当 data 中的数据发生变化时, 会立即自动执行
updated ( ) : 当 data 中的数据发生变化后, 页面重新渲染后执行
beforUnmount ( ) : 当 vue 应用失效时, 会自动执行
unmounted ( ) : 当 vue 应用失效后, 且 dom 元素完全被销毁之后执行

标签：生命,console,log,root,周期函数,vue3,执行,data,页面
来源： https://www.cnblogs.com/chenjieyouge/p/16626166.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 基础-生命周期函数