VUE周期

最新推荐文章于 2024-08-12 20:19:45 发布

原创最新推荐文章于 2024-08-12 20:19:45 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文深入解析Vue.js的生命周期，包括创建、挂载、更新和销毁等关键阶段，通过具体代码示例展示各生命周期钩子的执行时机及应用场景，帮助开发者理解并优化Vue组件的性能。

官网

https://cn.vuejs.org/v2/guide/instance.html

概述

created 和 beforeCreate

- #### A 可以操作数据 B 数据没有初始化

mounted 和 beforeMount

- #### A 可以操作DOM B 还未生成DOM

updated 和 beforeUpdate

- #### A 可以获取最终数据 B 可以二次修改

destroyed 和 beforeDestroy

性能调优：频繁销毁创建的组件，比如页面中部分内容显示与隐藏，但是用的是v-if，使用内置组件**<keep-alive></keep-alive>包裹, 被其包裹的组件，在v-if=false的时候，不会销毁，而是停用, v-if="true" 不会创建,而是激活,避免频繁创建组件对象的性能损耗，组件的激活和停用，activated 和 deactivated

代码1


<!DOCTYPE html>

<html>

<head>

    <title>vue的生命周期</title>

</head>

<body>

    <div id="app">

      

    </div>



    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript"  >

       var Test={

           template:`

              <div>我是Test组件{{ msg }}

              </div>

           `,

           data(){

              return{

                  msg:'HELLO VUE'

              }

           }



       }     

       new Vue({

           el:'#app',

           components:{

              Test  

           },

           template:`

              <div>

                    <test ></test>

              </div>

           `,

           data(){

              return {

               

              }

           }

       })



    </script>

</body>

</html>

运行效果

代码2(组件创建前与组件创建后)

var Test={

           template:`

              <div>我是Test组件{{ msg }}

              <button @click="msg+='1'">msg+1</button>

              </div>

           `,

           data(){

              return{

                  msg:'HELLO VUE'

              }

           },

          //组件创建前

         beforeCreate(){

            console.log('组件创建前')

            console.log(this.msg)

            //undefine

         },

         //组件创建后

         created(){

            console.log('组件创建后')

            console.log(this.msg)

            //HELLO VUE

         },

            ……

       }

运行效果

代码3(Dom挂载前与Dom挂载后)

var Test={

           template:`

              <div>我是Test组件{{ msg }}

              </div>

           `,

           data(){

              return{

                  msg:'HELLO VUE'

              }

           },



           //Dom挂载前

           beforeMount(){

               console.log('Dom挂载前')

               console.log(document.body.innerHTML)

           },

            //Dom挂载后

           mounted(){

               console.log('Dom挂载后')

               console.log(document.body.innerHTML)

           }

       }

运行效果

代码4(数据更新前与数据更新后)

 var Test={

           template:`

              <div>我是Test组件{{ msg }}

              <button @click="msg+='1'">msg+1</button>

              </div>

           `,

           data(){

              return{

                  msg:'HELLO VUE'

              }

           },

           //点击button后

           //基于数据更新前

           beforeUpdate(){

                  console.log('数据更新前')

                  console.log(document.body.innerHTML)

           },



           //基于数据更新后

           updated(){

                  console.log('数据更新后')

                  console.log(document.body.innerHTML)

           }

       }

运行效果

代码5(销毁前和销毁后)

##test

       var Test={

           template:`

              <div>我是Test组件{{ msg }}

              <button @click="msg+='1'">msg+1</button>

              </div>

           `,

           data(){

              return{

                  msg:'HELLO VUE'

              }

           },

           //组件创建前

           beforeCreate(){

              console.log('组件创建前')

              console.log(this.msg)

               //undefine

           },

           //组件创建后

           created(){

              console.log('组件创建后')

              console.log(this.msg)

              //HELLO VUE

           },

           //销毁前

           beforeDestroy(){

              console.log('销毁前')

           },

           //销毁后

           destroyed(){

              console.log('销毁后')

           }

       }

##

       new Vue({

           el:'#app',

           components:{

              Test  

           },

           template:`

              <div>

                  <test v-if='testshow'></test></br>

                  <button @click='clickbut'>销毁组件</button>

              </div>

           `,

           data(){

              return {

               testshow:true

              }

           },

           methods:{

              clickbut(){

                  this.testshow=!this.testshow

              }

           }

       })

运行效果

代码6(激活与停用)

##

var Test={

           template:`

              <div>我是Test组件{{ msg }}

              <button @click="msg+='1'">msg+1</button>

              </div>

           `,

           data(){

              return{

                  msg:'HELLO VUE'

              }

           },

           //组件创建前

           beforeCreate(){

              console.log('组件创建前')

              console.log(this.msg)

              //undefine

           },

           //组件创建后

           created(){

              console.log('组件创建后')

              console.log(this.msg)

              //HELLO VUE

           },

           //销毁前

           beforeDestroy(){

              console.log('销毁前')

           },

           //销毁后

           destroyed(){

              console.log('销毁后')

           },

            //组件停用

           deactivated(){

              console.log('组件停用')

           },

           //组件激活

           activated (){

              console.log('组件激活')

           }

       }     

##

       new Vue({

           el:'#app',

           components:{

              Test  

           },

           template:`

              <div>

                  <keep-alive><test v-if='testshow'></test></keep-alive></br>

                  <button @click='clickbut'>销毁组件</button>

              </div>

           `,

           data(){

              return {

               testshow:true

              }

           },

           methods:{

              clickbut(){

                  this.testshow=!this.testshow

              }

           }

       })