Vue 生命周期和数据共享详解

Vue 生命钩子函数：
- created：在实例创建后调用；
- mounted：挂载后调用；
- updated：数据更新时调用；
- destroyed：实例销毁后调用。

数据共享指的是在 Vue 实例中通过 props 和 events 实现父子组件之间的数据传递，具体如下：

• 通过 props 把子组件需要的数据从父组件传到子组件；
• 通过事件机制将子组件产生的数据传回到父组件。

下面是一个完整的 Vue 生命周期和数据共享攻略：

Vue 生命周期与数据共享详解

生命周期

Vue 生命周期是 Vue 实例在创建、更新、销毁等过程中所经历的一系列环节，这些环节组成了 Vue 的生命周期。生命周期图示如下：

          |  create  |        |        |        |        |
          |  setup   |        |        |        |        |
          |  beforeMount  |        |        |        |        |
          |       mounted    |        |        |        |        |
          |       beforeUpdate |  updated  |        |        |
          |       deactivated    |      activated     |    |
          |       beforeUnmount |        |      unmounted  |

created 生命周期

在实例创建后调用，此时实例已经完成了数据初始化，但尚未挂载到 DOM 树上。

示例：

<div id="app"></div>

let vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello world!'
  },
  created: function () {
    console.log('vm created', this.message);
  }
});

mounted 生命周期

在模板挂载到 DOM 节点上后调用，此时组件已经完成渲染并初始化其他设定。

示例：

<div id="app">
  <button v-on:click="clickHandler">Click me</button>
</div>

let vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello world!'
  },
  methods: {
    clickHandler: function() {
      console.log('Button clicked');
    }
  },
  mounted: function () {
    console.log('vm mounted', this.$el);
  }
});

updated 生命周期

在组件更新数据并且重新渲染 DOM 后调用，此时组件已经完成了更新操作。

示例：

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="changeMessage">Change message</button>
</div>

let vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello world!'
  },
  methods: {
    changeMessage: function() {
      this.message = 'Hello Vue!';
    }
  },
  updated: function () {
    console.log('vm updated', this.$el);
  }
});

destroyed 生命周期

在组件被销毁时调用，此时组件已经从 DOM 树中移除，并且在此之前还会执行 beforeDestroy 生命周期钩子函数。

示例：

<div id="app">
  <p v-if="show">Show me when button clicked.</p>
  <button v-on:click="toggleShow">Toggle show</button>
</div>

let vm = new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    toggleShow: function() {
      this.show = !this.show;
    }
  },
  beforeDestroy: function () {
    console.log('vm beforeDestroy', this.$el);
  },
  destroyed: function () {
    console.log('vm destroyed', this.$el);
  }
});

数据共享

父组件向子组件传递数据

父组件可以通过 props 选项向子组件传递数据，示例如下：

父组件：

<div id="app">
  <child-component message="Hello world!"></child-component>
</div>

Vue.component('child-component', {
  props: ['message'],
  template: '<p>{{ message }}</p>'
});

子组件：

<p>Hello world!</p>

子组件向父组件传递数据

子组件可以通过 $emit 方法向父组件传递数据，示例如下：

父组件：

<div id="app">
  <child-component v-on:change="changeHandler"></child-component>
  <p>{{ message }}</p>
</div>

let vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello world!'
  },
  methods: {
    changeHandler: function(newMessage) {
      this.message = newMessage;
    }
  }
});

Vue.component('child-component', {
  template: '<button v-on:click="clickHandler">Change message</button>',
  methods: {
    clickHandler: function() {
      this.$emit('change', 'Hello Vue!');
    }
  }
});

子组件：

<button>Change message</button>

在以上攻略中，我们先讲解了 Vue 生命周期，通过示例代码详细讲解了各个生命周期函数的执行时机和相关操作；接着，我们讲解了数据共享，也通过示例代码讲解了 props 和 $emit 等相关用法，以便读者更好理解和掌握这些内容。