为什么 vue.js 执行在更新、更新和激活事件之前不会触发？答案

【问题标题】：Why does vue.js execution not fire beforeUpdate, updated, and activated events?为什么 vue.js 执行在更新、更新和激活事件之前不会触发？
【发布时间】：2017-08-31 13:48:25
【问题描述】：

这段 vue.js 代码执行了什么：

创建前
已创建
已安装

但不是：

更新前
更新
已激活

https://jsfiddle.net/edwardtanguay/3hkdbuke

var vm = new Vue({
    el: '#app',
  data: function() {
    return {
        message: 'This is a test.'
    }
  },
  methods: {
    changeText: function() {
        this.message = 'changed'; 
    }
  },
  beforeCreate: function() {
    this.$nextTick(() => {
        console.log('in beforeCreate'); // gets here
    });
  },
  created: function() {
    this.$nextTick(() => {
        console.log('in created'); // gets here
    });
  },
  mounted: function() {
    this.$nextTick(() => {
        console.log('in mounted'); // gets here
    });
  },
  beforeUpdate: function() {
    this.$nextTick(() => {
        console.log('in beforeUpdate'); //DOESN'T GET HERE
    });
  },
  updated: function() {
    this.$nextTick(() => {
        console.log('in updated'); //DOESN'T GET HERE
    });
  },
  activated: function() {
    this.$nextTick(() => {
        console.log('in activated'); //DOESN'T GET HERE
    });
  }
});

【问题讨论】：

标签： vue.js

【解决方案1】：

beforeUpdate 和 updated 事件将在组件更新后触发，但不会在初始化时触发。

如果组件嵌套在keep-alive tag 中，则将触发activated 事件。

See the lifecycle diagram.

这是一个例子：

Vue.component('child', {
  template: '<div>I am a child</div>',
  activated: function() {
    this.$nextTick(() => {
    	console.log('in activated');
    });
  }
})

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      message: 'This is a test.'
    }
  },
  methods: {
    changeText: function() {
      this.message = 'changed';
    }
  },
  beforeCreate: function() {
    this.$nextTick(() => {
      console.log('in beforeCreate');
    });
  },
  created: function() {
    this.$nextTick(() => {
      console.log('in created');
    });
  },
  mounted: function() {
    this.$nextTick(() => {
      console.log('in mounted');
    });
  },
  beforeUpdate: function() {
    this.$nextTick(() => {
      console.log('in beforeUpdate');
    });
  },
  updated: function() {
    this.$nextTick(() => {
      console.log('in updated');
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <keep-alive>
    <child></child>
  </keep-alive>
  
  <div>
    Message: <i>{{message}}</i>
  </div>    

  <button @click="message = 'updated'">
    Update
  </button>
</div>

【讨论】：

【解决方案2】：

生命周期事件updated() 和beforeUpdated() 只会在组件重新渲染时执行

我在您的示例中引入了一个新变量 counter

data: function() {
    return {
        message: 'This is a test.',
      counter : 0
    }
  }

引入了一个按钮来更新counter 变量。当单击按钮时，counter 变量会更新，这反过来会重新渲染组件，从而触发 beforeUpdate() 和 updated() 生命周期事件

<div id="app">
    <div>
        Message: <i>{{message}}</i>
    </div>
    <div>
        counter is {{counter}}
    </div>
    <div>
        <button @click="counter = counter+1">increase</button>
    </div>
</div>

我还没有遇到activated() 事件。可能有人可以帮忙

【讨论】：