vue data变量相互赋值后被实时同步的解决步骤

如果在Vue组件中，给data对象中的一个属性赋值为另一个属性，那么这两个属性会相互关联，改变其中一个属性的值，另一个属性的值也会同步改变。这种情况下视图不会更新。因此，我们需要掌握一些技巧，才能有效解决这个问题。

以下是解决步骤：

1. 使用Vue.set()方法

当触发同一个组件中的两个数据属性互相修改时，可以使用Vue.set()方法来解决。Vue.set()方法接收三个参数：对象，属性名，属性值。例如：

Vue.set(this.$data, 'prop1', this.prop2)

这个方法的作用是将prop2的值赋给prop1属性，并保证视图将及时更新。

示例代码：

<template>
  <div>
    <p>{{ prop1 }}</p>
    <button @click="changeProp">Change Prop</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prop1: 1,
      prop2: 2
    }
  },
  methods: {
    changeProp() {
      Vue.set(this.$data, 'prop1', this.prop2);
    }
  }
}
</script>

在上述示例代码中，我们创建了两个属性prop1和prop2，默认值分别为1和2。当点击按钮时，调用changeProp()方法，该方法调用Vue.set()方法，将prop2的值赋给prop1属性，也就是将1替换成了2。此时，视图将及时更新，渲染出2这个值。

2. 使用组件的watcher

我们还可以使用组件的watcher来解决这个问题，它可以监听属性的变化并立即执行相应的操作。可以通过在组件中定义一个watcher，监听属性的变化，并更新需要显示的数据。例如：

watch: {
  prop2: function(newValue) {
    this.prop1 = newValue;
  }
}

这个watcher监控prop2属性的变化，并将新的值赋值给prop1属性。当在组件中修改prop2属性时，prop1也会相应地更改，并且视图也会即时更新。

示例代码：

<template>
  <div>
    <p>{{ prop1 }}</p>
    <button @click="changeProp">Change Prop</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prop1: 1,
      prop2: 2
    }
  },
  methods: {
    changeProp() {
      this.prop2 = 3;
    }
  },
  watch: {
    prop2: function(newValue) {
      this.prop1 = newValue;
    }
  }
}
</script>

在上述示例代码中，我们创建了两个属性prop1和prop2，默认值分别为1和2。当点击按钮时，将prop2的值更改为3。此时，prop1和prop2都被watch监听，watcher立即作出更改，并且视图将及时更新，渲染出3这个值。