vue设置变量的几种方法

Vue.js 中有多种方式来设置变量，包括：

1. **数据绑定（属性）**: 使用双大括号 `{{}}` 或者 `v-bind`指令来直接绑定数据到HTML元素上。例如，在组件的`data()`选项中定义的数据会被自动响应式地更新[^4]。

<template>
  <div>{{ message }}</div> <!-- {{ }} 是 Vue 自动更新的表达式 -->
</template>

<script>
export default {
  data() {
    return { message: "Hello, Vue!" };
  }
}
</script>

2. **计算属性** (Computed Properties): 当依赖的数据发生变化时，计算属性会重新计算。它们通过 `computed` 对象声明[^5]。

data() {
  return {
    firstName: "John",
    lastName: "Doe"
  };
},
computed: {
  fullName() {
    return this.firstName + " " + this.lastName;
  }
}

3. **响应式属性** (Reactivity): 如果一个对象或数组的内部结构发生变化，Vue同样能够感知并更新视图[^4]。如改变数组的索引或长度。

4. **Vue.set()**: 对于动态添加的深层次响应式属性或非对象/数组类型的值，可以使用 `Vue.set()` 方法手动触发响应式更新[^6]。

this.$set(this.user, 'address.street', 'New Street');

5. **Vuex**: 在大型应用中，可以使用状态管理库 Vuex 来集中存储和管理共享状态[^7]。