对vue里函数的调用顺序介绍

接下来我会详细讲解“对vue里函数的调用顺序介绍”的完整攻略。

1. Vue函数的调用顺序

Vue中的函数调用顺序有如下几种情况：

1. beforeCreate（创建前）： 这个阶段会在Vue实例初始化之后，数据观测之前被调用。在此阶段，我们无法访问到 data、computed、methods、watch中的任何属性。

2. created（创建后）： 该阶段在实例创建完成后被立即调用。此时我们已经可以访问到 data、computed、methods、watch 中的任何属性，也可以对它们进行修改。

3. beforeMount（挂载前）： 这个阶段将在挂载开始之前被调用。在此阶段中，Vue 将编译模板，并将其转换为虚拟 DOM 渲染函数。

4. mounted（挂载后）： 在挂载阶段完成后被调用，此时实例已经完成了数据绑定，可以访问到模板中的元素。

5. beforeUpdate（更新前）： 当数据更新之后，导致 DOM 重新渲染和 patch 重新执行之前，会调用 beforeUpdate 钩子函数。

6. updated（更新后）： 当数据更新完成后会调用 updated 钩子函数，此时已经完成了 DOM 的重新渲染。

7. beforeDestroy（销毁前）： Vue 实例在销毁前会调用 beforeDestroy 钩子函数，在这里我们还能访问到实例中的数据。

8. destroyed（销毁后）： 当实例被销毁时会调用 destroyed 钩子函数，这个时候我们已经无法访问到实例的数据，方法以及 DOM 。

2. 示例说明

示例1: 父子组件的数据传递

在父组件挂载结束之后，子组件中定义的 mounted 钩子函数才会依次执行。

<template>
  <div>
    <h1>父组件</h1>
    <p>父组件数据: {{message}}</p>
    <Child v-bind:childMessage="message"></Child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: '我是父组件的数据'
    }
  },
  mounted() {
    console.log('父组件 mounted');
  }
}
</script>

<template>
  <div>
    <h2>子组件</h2>
    <p>子组件数据: {{childMessage}}</p>
  </div>
</template>

<script>
export default {
  props: {
    childMessage: String
  },
  mounted() {
    console.log('子组件 mounted');
  }
}
</script>

以上代码中，我们在父组件中定义一个数据 message，然后将它作为父组件向子组件传递的 props 属性 childMessage 的值。在子组件中，我们通过 props 属性来接收父组件传递的数据，并在界面中渲染出来。

执行结果：

父组件 mounted
子组件 mounted

示例2: 本地存储数据的使用

假设我们有这样一个需求：当用户在某个组件中填写了一些表单数据后，需要把数据存储到本地，以方便用户下次访问该页面时使用这些数据。我们可以在组件的 beforeDestroy 钩子函数中实现这个功能。

<template>
  <div>
    <form>
      <label>姓名:</label>
      <input type="text" v-model="name">
      <br>
      <label>电话:</label>
      <input type="text" v-model="phone">
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      phone: ''
    }
  },
  mounted() {
    console.log('组件 mounted');
    let data = JSON.parse(localStorage.getItem('formData'));
    if (data) {
      this.name = data.name;
      this.phone = data.phone;
    }
  },
  beforeDestroy() {
    console.log('组件被销毁前存储数据');
    let formData = {
      name: this.name,
      phone: this.phone
    };
    localStorage.setItem('formData', JSON.stringify(formData));
  }
}
</script>

在上述代码中，我们定义了一个含有两个表单项的组件，通过 v-model 实现了表单数据的双向绑定。在组件挂载完成后，我们调用了 localStorage 的 getItem 方法，从本地存储中读取数据，并将数据绑定到表单中展示。在组件 beforeDestroy 钩子函数中，我们将表单数据封装为 formData 对象，并将其以字符串的形式存储到本地存储中。

执行结果：

组件 mounted
组件被销毁前存储数据

以上就是对 vue 函数调用顺序介绍的详细攻略。希望对你有所帮助。