【JavaScript源代码】vue 中this.$set 动态绑定数据的案例讲解.docx

vue 中this.$set 动态绑定数据的案例讲解 　　感觉网上对this.$set的讲解乱糟糟的，我来总结一下对它单个数据、对象、数组、json数据的绑定.　　话不多说直接上代码：　　<template>　　  <div>　　    <!-- 单个数据 -->　　    <button @click="text0a">text0</button>　　    <p>text0: {{text0}}</p>　　    <!-- 对象 -->　　    <button @click="textObja">textObj</button>　　    <p>textObj.text1: {{text Vue.js 是一款流行的前端框架，它的核心特性之一是数据绑定。在 Vue 中，我们通常使用 `data` 选项来声明初始数据。然而，在某些场景下，我们可能需要在运行时动态地添加或修改数据属性，这时就需要用到 `this.$set` 方法。`this.$set` 是 Vue 提供的一个全局方法，用于向响应式对象中添加新属性并确保该属性能触发视图更新。 案例中的代码展示了如何使用 `this.$set` 绑定不同类型的动态数据： 1. **单个数据绑定**： 在 `<template>` 中，有一个按钮点击事件 `text0a`。当按钮被点击时，`text0a` 方法会被调用，通过 `vm.$set` 设置 `text0` 属性的值为 `'efghjk'`。这样，即使 `text0` 原来未在 `data` 中声明，Vue 也能检测到其变化并更新视图。 ```javascript vm.$set(vm, 'text0', text100); ``` 2. **对象属性绑定**： 对象属性的绑定示例是 `textObja` 方法。这里，我们创建了一个新的对象 `textObj100`，然后使用 `vm.$set` 将其 `text1` 属性的值赋给 `vm.textObj.text1`。实际上，这等同于直接将整个 `textObj100` 对象设置为 `vm.textObj`。 ```javascript vm.$set(vm.textObj, 'text1', textObj100.text1); ``` 3. **数组元素绑定**： 数组的动态绑定在 `textArra` 方法中体现。这里，我们创建了一个新的数组 `textArr200`，然后使用 `vm.$set` 将整个数组设置为 `vm.textArr`，以替换原有的数组。 ```javascript vm.$set(vm, 'textArr', textArr200); ``` 4. **JSON 数据绑定**： `textJsona` 方法展示了如何绑定 JSON 数据。我们创建了一个 JSON 结构的数组 `textJson300`，然后通过 `vm.$set` 修改 `vm.textJson[1]` 的 `t5` 属性。尽管这个例子中看起来是直接赋值，但其实它与直接设置整个 `textJson` 一样，会触发视图更新。 ```javascript vm.$set(vm.textJson[1], 't5', textJson300[1].t5); ``` 值得注意的是，当直接通过索引或者点号操作符给数组或对象添加属性时，Vue 无法检测到这些变化，因此视图不会自动更新。使用 `this.$set` 可以确保 Vue 能够追踪这些新增的属性，并在属性改变时正确地更新视图。 补充一点，Vue 中的 `this.$set` 实际上是 `Vue.set` 的别名。在处理动态添加的属性时，比如在表单中根据后台数据动态生成的模型绑定，`this.$set` 是必不可少的。例如，如果有一个动态生成的表单，模型绑定的对象在初始化时为空，那么可以通过 `this.$set` 添加新的键值对，确保表单输入的变化能够反映到数据模型并更新视图。 ```javascript this.$set(this.formObject, dynamicKey, dynamicValue); ``` `this.$set` 是 Vue 中处理动态数据绑定的关键工具，它使得开发者能够在运行时安全地向响应式对象添加属性，并确保视图能够正确地响应这些变化。在处理不可预知的数据结构或需要动态添加属性的情况下，`this.$set` 是不可或缺的。