vue更新状态时updated钩子函数触发条件解析

发布时间:2025-02-23 15:49:33 发布人:远客网络

vue什么情况下回进入updated()

Vue在以下三种情况下会进入updated()：1、组件数据变化时；2、父组件重新渲染时；3、组件依赖的响应式属性变化时。 当Vue实例的DOM被更新并且数据已经变化时，updated()钩子函数会被调用。这个钩子函数允许你在视图更新之后执行一些操作，比如DOM操作或数据处理。

一、组件数据变化时

当组件内的数据发生变化时，Vue会重新渲染该组件，并在DOM更新后调用updated()钩子函数。

数据变化示例：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  updated() {
    console.log('DOM has been updated!');
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, Vue!';
    }
  }
};
</script>

在上面的示例中，当changeMessage方法被调用时，message的数据发生变化，导致DOM更新并触发updated()钩子函数。

二、父组件重新渲染时

当父组件重新渲染时，子组件也会被重新渲染，进而触发updated()钩子函数。

父组件重新渲染示例：

<template>
  <div>
    <button @click="updateParentData">Update Parent Data</button>
    <child-component :propData="parentData"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Initial Data'
    };
  },
  methods: {
    updateParentData() {
      this.parentData = 'Updated Data';
    }
  }
};
</script>

在上述示例中，当父组件的数据parentData发生变化时，子组件ChildComponent会重新渲染，并且其updated()钩子函数会被调用。

三、组件依赖的响应式属性变化时

当组件依赖的响应式属性发生变化时，Vue会重新渲染组件，并调用updated()钩子函数。

响应式属性变化示例：

<template>
  <div>
    <p>{{ computedMessage }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  computed: {
    computedMessage() {
      return this.message + ', Vue!';
    }
  },
  updated() {
    console.log('DOM has been updated with new computedMessage!');
  },
  methods: {
    changeMessage() {
      this.message = 'Hi';
    }
  }
};
</script>