什么是Vue的钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

怎么调用

在实例生命周期的不同阶段被自动调用，不需要手动调用

Vue的生命周期图示

可以详细的看一下，对Vue的理解很有用

生命周期钩子

beforeCreate

在实例初始化之前调用

 beforeCreate() {
    console.log('实例初始化前',this.a);
 },

 

created      *

在实例初始化之后调用，经常用于操作数据，发起ajax请求

created() {
    console.log('实例初始化后',this.a);
},

 

beforeMount

在挂载开始之前被调用，如果是在服务器端渲染时不被调用

在这个函数里，无法获取元素

beforeMount() {
   console.log('vue挂载前',this.$refs['box']);
   //vue挂载前 undefined
},

 

mounted　＊

在挂载后被调用，也不能在服务器端渲染时被调用

这个函数里，是可以获取元素，并进行操作的

mounted() {
   console.log('vue挂载后',this.$refs['box']);
   //vue挂载后 <div id=​"box">​…​</div>​
},

 

beforeUpdate

视图层数据更新前调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM

  beforeUpdate() {
     console.log('视图更新前',this.$refs.span.innerHTML);
  },

 

updated

视图层数据更新后调用

updated() {
    console.log('视图更新后',this.$refs.span.innerHTML);
},

 

下面两个组件要用到的ＨＴＭＬ

<button @click='flag =! flag' ref="flag">点击销毁</button>
            
<cmpsize v-if='flag'></cmpsize>

beforeDestroy

实例销毁之前调用，在被销毁的组件中进行调用

有一些操作，会在实例已经销毁的时候还在运行，这时候为了性能考虑，就在这里结束哪些操作

 components:{
     cmpsize:{
        template:'<div>这是一个子组件</div>',
        // 当前实例被销毁前的时候调用
        beforeDestroy() {
            console.log('实例销毁前');
        },
    　}
　}

destroyed

实例销毁后调用。

components:{
     cmpsize:{
        template:'<div>这是一个子组件</div>',
        // 当前实例被销毁前的时候调用
        destroyed() {
            console.log('实例销毁后');
        },
    　}
　}

 

activated和deactivated配合keep-alive标签使用

<button @click='flag =! flag' ref="flag">点击销毁</button>
            
<keep-alive>
     <cmpsize v-if='flag'></cmpsize>
</keep-alive>

activated

和上面的beforeDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用beforeDestroy和destroyed的话，就太浪费性能了。

实例被激活时使用，用于重复激活一个实例的时候

 components:{
     cmpsize:{
        template:'<div>这是一个子组件</div>',
        activated(){  
            console.log('实例被激活时');
        },
    　}
　}

deactivated

实例没有被激活时，

components:{
     cmpsize:{
        template:'<div>这是一个子组件</div>',
        activated(){  
            console.log('实例没有被激活时');
        },
    　}
　}

 

希望这篇文章对大家有所帮助，可以的话帮忙点亮下旁边的小手，让更多人看到 ，

如果上述代码有错误和不足，请评论或私信，我好及时改正。