vue data变量之间相互赋值或进行数据联动

news2024/11/22 16:15:43

在这里插入图片描述
摘要：

使用vue时开发会用到data中是数据是相互驱动，经常会想到watch,computed，总结一下！

直接赋值：
在 data 函数中定义的变量可以直接在方法中进行赋值。

export default {
  data() {
    return {
      a: 1,
      b: 2
    };
  },
  methods: {
    updateA() {
      this.b = this.a + 1; // 将 a 的值加 1 赋给 b
    }
  }
};

计算属性 (Computed Properties)：
计算属性可以根据其他 data 变量的值动态计算出新的值，并且会自动更新。

export default {
  data() {
    return {
      a: 1
    };
  },
  computed: {
    b() {
      return this.a + 1; // b 的值始终是 a 的值加 1
    }
  }
};

侦听器 (Watchers)：
侦听器可以监听某个 data 变量的变化，并在变化时执行特定的逻辑。

export default {
  data() {
    return {
      a: 1,
      b: 2
    };
  },
  watch: {
    a(newVal) {
      this.b = newVal + 1; // 当 a 发生变化时，更新 b 的值
    }
  }
};

生命周期钩子：
在某些生命周期钩子中也可以进行数据的赋值和联动

export default {
  data() {
    return {
      a: 1,
      b: 2
    };
  },
  created() {
    this.b = this.a + 1; // 在组件创建时进行赋值
  }
};

事件处理：
通过事件处理函数也可以实现数据的联动。

export default {
  data() {
    return {
      a: 1,
      b: 2
    };
  },
  methods: {
    handleEvent() {
      this.a += 1;
      this.b = this.a + 1; // 在事件处理中更新 a 和 b
    }
  }
};

使用 Vuex 管理状态：
对于复杂的状态管理，可以使用 Vuex 来集中管理应用的状态。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    a: 1,
    b: 2
  },
  mutations: {
    updateA(state, value) {
      state.a = value;
      state.b = state.a + 1; // 更新 b 的值
    }
  },
  actions: {
    updateA({ commit }, value) {
      commit('updateA', value);
    }
  },
  getters: {
    b(state) {
      return state.b;
    }
  }
});

// 组件中使用
<template>
  <div>
    <p>a: {{ a }}</p>
    <p>b: {{ b }}</p>
    <button @click="updateA">Update A</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['a', 'b'])
  },
  methods: {
    ...mapActions(['updateA'])
  }
};
</script>

组件中使用：（typescript）

<template>
  <div>
    <p>a: {{ a }}</p>
    <p>b: {{ b }}</p>
    <button @click="updateA">Update A</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['a', 'b'])
  },
  methods: {
    ...mapActions(['updateA'])
  }
};
</script>

使用 Ref 和 Reactive (Vue 3)：
在 Vue 3 中，可以使用 ref 和 reactive 来管理响应式数据。

<template>
  <div>
    <p>a: {{ a }}</p>
    <p>b: {{ b }}</p>
    <button @click="updateA">Update A</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const a = ref(1);
    const b = computed(() => a.value + 1);

    const updateA = () => {
      a.value += 1;
    };

    return {
      a,
      b,
      updateA
    };
  }
};
</script>

使用 reactive：

<template>
  <div>
    <p>a: {{ state.a }}</p>
    <p>b: {{ state.b }}</p>
    <button @click="updateA">Update A</button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      a: 1,
      b: 2
    });

    const updateA = () => {
      state.a += 1;
      state.b = state.a + 1;
    };

    return {
      state,
      updateA
    };
  }
};
</script>