vue中各选项及钩子函数执行顺序详解

下面就讲解一下“vue中各选项及钩子函数执行顺序详解”的完整攻略。

1. 选项的执行顺序

在Vue中，选项的执行顺序是从外到内，也就是说，先执行全局的选项，再执行局部的选项。具体的执行顺序如下：

先执行mixin选项，以混入组件中的选项为主。
接着执行components选项，注册全局组件
之后执行directives选项，注册全局指令
然后执行filters选项，注册全局过滤器
紧接着执行extends选项，以扩展组件为主。
最后执行props、data、methods、computed、watch选项，以组件本身的选项为主。

需要注意的是，执行顺序是不可逆的，也就是说无法改变选项的执行顺序。

2. 钩子函数的执行顺序

在Vue组件生命周期中，一共有十个钩子函数，它们的执行顺序如下：

beforeCreate：在实例初始化之后，数据观测(data observer)和事件配置之前被调用。在这个阶段，实例的属性和方法是不可用的。
created：在实例创建完成后被立即调用。在这一步，实例已经完成了数据的观测，也可以进行初始化数据，注意不要在这里做耗时的操作。这里也可以访问到computed,watch,props和methods数据。
beforeMount：在挂载开始之前被调用，即将开始渲染并将虚拟DOM挂载到页面上前调用此函数，在此步骤中，即将创建真实DOM,但是还没有渲染到页面上。
mounted：实例挂载后调用。在这一步，组件已经完全被渲染出来，可以在这里执行依赖于DOM的操作，可以访问到真实的DOM元素。
beforeUpdate：数据更新时调用，但是这里不能进行数据的更改操作。
updated：由于数据更改导致的虚拟DOM重新渲染时调用这个函数，因为真实的DOM已经是最新的了，所以在此操作最近DOM会非常快，平常生产中建议不要在这里做过多的操作。
activated：keep-alive组件激活时调用该函数。可以拿到该组件本身的props和data，执行完activated函数之后组件便是可用状态了。
deactivated：keep-alive组件停用时调用该函数。可以拿到该组件本身的props和data。
beforeDestroy：在实例销毁之前调用，实例仍然有能力访问所有的实例方法和数据，此时组件还没有被完全销毁。
destroyed：在实例销毁之后调用,组件已经完全被销毁，执行完destroyed函数之后组件便不能被访问了。

下面提供两条具体的示例，来展示选项和钩子函数的执行顺序。

示例1：选项执行顺序

<!-- index.html -->
<body>
  <div id="app">
    <my-component></my-component>
  </div>
</body>

<!-- main.js -->
import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

Vue.mixin({
  created() {
    console.log('mixin created');
  }
});

Vue.component('my-component', MyComponent);

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  created() {
    console.log('instance created');
  }
});

// 输出结果
// mixin created
// instance created

在这个例子中，我们通过Vue.mixin方法来注册一个全局的混合对象，并给它添加了一个created方法。然后我们通过Vue.component方法来注册一个全局组件，然后我们在Vue实例中定义了一个data属性，并且注册了一个实例中的created方法。这里需要注意的是，由于在全局组件之后定义了实例，所以实例中的created方法最后执行。

示例2：钩子函数执行顺序

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    },
    beforeCreate() {
      console.log('beforeCreate');
    },
    created() {
      console.log('created');
    },
    beforeMount() {
      console.log('beforeMount');
    },
    mounted() {
      console.log('mounted');
    },
    beforeUpdate() {
      console.log('beforeUpdate');
    },
    updated() {
      console.log('updated');
    },
    activated() {
      console.log('activated');
    },
    deactivated() {
      console.log('deactivated');
    },
    beforeDestroy() {
      console.log('beforeDestroy');
    },
    destroyed() {
      console.log('destroyed');
    }
  }
</script>

在这个例子中，我们定义了一个MyComponent组件，并且添加了所有的生命周期钩子函数。当组件被实例化后，它们的执行顺序是：beforeCreate -> created -> beforeMount -> mounted。当组件需要更新时，它们的执行顺序是：beforeUpdate -> updated。如果组件被添加到keep-alive中并被激活，则会执行activated。如果组件被解除激活，则会执行deactivated。当组件被销毁时，执行顺序是：beforeDestroy -> destroyed。

以上就是关于“vue中各选项及钩子函数执行顺序详解”的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue中各选项及钩子函数执行顺序详解 - Python技术站

vue中各选项及钩子函数执行顺序详解

1. 选项的执行顺序

2. 钩子函数的执行顺序

示例1：选项执行顺序

示例2：钩子函数执行顺序

相关文章