vue-mounted中处理data数据

`mounted` 方法是对 Vue 组件进行数据初始化的一种方法。当 Vue 组件被挂载到 DOM 中时，会触发 `mounted` 方法，通常用于获取数据、设置初始状态等操作。

如果你在 `mounted` 方法中修改 `data` 值，确实有可能不生效。这是因为 `data` 值在 `mounted` 方法执行时，组件的模板已经渲染完毕，而 `data` 值是作为响应式数据存储在 Vue 实例中的。当 `mounted` 方法执行时，模板中的数据已经绑定完毕，所以修改 `data` 值并不会触发视图更新。

如果你希望在 `mounted` 方法中修改 `data` 值并触发视图更新，可以尝试使用以下方法：

1. 使用 `Vue.set` 方法设置 `data` 值，它会确保修改的值触发视图更新：

? ?

 mounted() {
? ? Vue.set(this.data, 'key', 'newValue');
? }

2. Vue 3，可以使用 `set` 方法来设置 `data` 值：

? ?

? mounted() {
? ? this.$data.key = 'newValue';
? }

3.? Vue 2，可以尝试使用 `this.$forceUpdate()` 方法强制更新视图：

?

mounted() {
? ? this.$forceUpdate();
? }

但是请注意，这种方法可能会导致性能问题，因为它会强制更新整个组件的视图。

4. ?Vue 3，可以尝试使用 `reactive` 方法创建响应式对象，然后在 `mounted` 方法中修改对象中的值：? ?

? import { reactive } from 'vue';

? export default {
? ? setup() {
? ? ? const state = reactive({
? ? ? ? key: 'value',
? ? ? });

? ? ? mounted() {
? ? ? ? state.key = 'newValue';
? ? ? }

? ? ? return {
? ? ? ? state,
? ? ? };
? ? },
? };

终极处理方法：this.$nextTick

`this.$nextTick` 是 Vue 实例中的一个方法，它用于确保在下次 DOM 更新之后执行回调函数。

在 Vue 组件中，当你对数据进行修改并希望更新视图时，通常会使用 `this.$forceUpdate()` 方法。但是，在某些情况下，这可能会导致错误，例如在计算属性中使用 `this.$nextTick` 方法时。

当 Vue 组件渲染时，它会将模板编译为 DOM，并将数据绑定到视图。但是，在某些情况下，例如在计算属性中，数据可能尚未绑定到视图。在这种情况下，如果你在计算属性中尝试直接修改数据，视图将不会更新。

为了解决这个问题，Vue 提供了 `this.$nextTick` 方法。当你在计算属性中使用 `this.$nextTick` 方法时，它会确保在下次 DOM 更新之后执行回调函数。这样，数据将被绑定到视图，从而实现预期的效果。

下面是一个使用 `this.$nextTick` 的示例：?

<template>
?<div>
? ?<p>{{ message }}</p>
? ?<button @click="changeMessage">Change message</button>
?</div>
</template>

<script>
export default {
?data() {
? ?return {
? ? ?message: 'Hello Vue!',
? ?};
?},
?methods: {
? ?changeMessage() {
? ? ?this.message = 'Hello this.$nextTick!';
? ? ?this.$nextTick(() => {
? ? ? ?console.log('Message has been updated');
? ? ?});
? ?},
?},
};
</script>

?
?