vue3生命周期

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-on</title>
<!-- 会保持和 npm 发布的最新的版本一致 -->
<script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="root"></div> 
<script>
    const app = Vue.createApp({
      data(){
        return{
            counter:1,
          maxNum:10,
            minNum:0
        }
      },
      //页面加载完成会自动执行
     methods: {
      descCounter(){
        if(this.counter>0){
        this.counter--;    }
      },
      addCounter(){
       if(this.counter<10)
       {
        this.counter++;
    }      }
     },
     // 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>
        <button @click="descCounter()" >-</button>
        {{counter}}
        <button @click="addCounter()" >+</button>
      </div>
      `
    })
    app.mount("#root")    
  </script>
</body>
</html>

 

posted @ 2023-01-02 19:17  qiantom  阅读(46)  评论(0)    收藏  举报