响应式数据 ref

• 前端的資料顯示，是由後端的資料增減，來控制，這是 ref 的精髓

---

响应式数据对象 constructorData，它是通过 ref 函数创建的，用来存储一个复杂的数据结构。

使用 ref 包裹基本类型或对象，使其变为响应式，这意味着当你修改 constructorData 中的值时，视图会自动更新。

constructorData 不是 JSON 字符串，而是一个 JavaScript 对象， 虽然构很像 JSON，但你可以直接在代码中对它进行修改和操作，并且 Vue 会自动跟踪它的变化。

可以将其转换为 JSON 字符串（通过 JSON.stringify()），然后在需要的时候解析回 JavaScript 对象（通过 JSON.parse()）

• 範例

let constructorData = ref({
  basic: {
    title: '',
    content: '',
    skipstate: false,
    skipUrl: '',
    callbackstate: false,
    callbackFn: '2',
  },
  receivedata: {
    area: [],
    school: [],
    personage: [],
    batchPersonage: []
  },
  receiveType: 'hita5',
  source: '',
  systemType: '',
  timeType: 'immediately',
  time: 0,
});

---

Vue 的响应式系统

Vue 的响应式系统是其核心特性之一，它使得数据变化能够自动反映在视图上。以下是 Vue 响应式系统如何工作的详细说明：

1. 数据劫持

当 Vue 实例被创建时，它会遍历 data 中的所有属性，并使用 Object.defineProperty 方法将这些属性转换为 getter 和 setter。这种方式称为“数据劫持”。

• getter：当读取某个属性的值时，会触发 getter，从而记录这个属性的依赖（即哪些组件或计算属性依赖于这个数据）。

• setter：当修改某个属性的值时，会触发 setter，这时 Vue 会通知所有依赖于这个数据的组件或计算属性进行更新。

2. 依赖收集

在 getter 中，Vue 会将当前使用这个属性的所有依赖（如组件、计算属性）记录下来。这称为“依赖收集”。这样，当属性的值发生变化时，Vue 可以通知所有相关的依赖进行更新。

3. 更新视图

当 setter 被触发（即数据被修改）时，Vue 会：

重新计算依赖这个数据的所有计算属性。 更新相关的组件，并重新渲染它们。

4. 示例流程

结合你的示例，以下是 Vue 响应式系统如何处理 count 的变化的具体步骤：

• 初始渲染：当组件被创建时，计算属性 count 被访问，触发 getter，记录依赖（即视图）。

• 用户交互：当用户点击按钮，调用 increment 方法，这会触发 this.$store.commit('increment')，调用 Vuex 的 mutation。

• 数据变更：在 mutation 中，state.count++ 被执行，触发 count 的 setter，Vue 发现 count 的值已经改变。

• 通知更新：Vue 通知所有依赖于 count 的计算属性（如组件的计算属性）重新计算它们的值。

• 更新视图：由于 count 的值改变，组件会被重新渲染，视图更新为最新的点击次数。

总结

通过这种数据劫持和依赖收集的机制，Vue 的响应式系统能够高效地管理数据和视图之间的关系，实现自动更新。这使得开发者可以专注于业务逻辑，而无需手动更新 DOM。