解决vue修改数据绑定的视图不能动态更新的问题

雨点打透心脏的1/2处 2021-09-25 00:06 467阅读 0赞

在写项目的时候遇见一个问题，修改vue v-bind或v-model绑定的数据时，视图不能更新

这就感觉很无语了。。。。当时在写一个弹窗，弹窗的数据更新后不能更新视图，需要重新刷新才行。

这样的问题简直不能忍受。。。。 多方查找，才发现 vue文档里有这样一句话。

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 `data` 对象上存在才能让 Vue 将它转换为响应式的。

这句话的意思就是说，vue是基于响应式的，在vue中定义（绑定）的对象或数组，在新增或删除属性时，vue并不能检测到这些变化，但可以检测到属性的修改，（因为是基于getter/setter的）所以，只有data对象上存在的属性才可以是响应式的，就是可以被更新的！

幸运的是，vue提供了一些解决方法。

就是使用Vue.set(object, propertyName, value)（$set）方法设置新增的属性，使用this.$set()方法等价

例如：

data = {
        a: 1
    }
    
    // 为data对象新增一个b属性,值为2
    Vue.set(data, 'b', 2)

其实方法参数已经写的很清楚了，第一个参数就是要新增的对象，第二个参数是新增的属性名，第三个参数是新增的属性值

对于数组更麻烦些，vue文档上写出：

Vue 不能检测以下数组的变动：

1.  当你利用索引直接设置一个数组项时，例如：`vm.items[indexOfItem] = newValue`
2.  当你修改数组的长度时，例如：`vm.items.length = newLength`

也就是说在任何改动数组的值时，vue也不能检测到修改了！

为了解决第一类问题，以下两种方式都可以实现和 `vm.items[indexOfItem] = newValue` 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
    Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 `splice`：

vm.items.splice(newLength)

删除属性使用this.$delete(object, propertyName)

发表评论取消回复

表情：

评论列表（有 0 条评论，467人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE对象的动态绑定

VUE对象的动态绑定 * vue不检测对象的删除和添加 * 动态添加对象属性 * 动态添加对象属性的双向绑定的实现 vue不检测对象的删除和添加 ...

Dear 丶/ 2024年04月17日 17:35/ 0 赞/ 82 阅读

相关 Vue 动态绑定 class 的方法

> 本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考，具体如下： \1 字符串绑定 :class=" 'className' "

深藏阁楼爱情的钟/ 2023年06月23日 06:55/ 0 赞/ 43 阅读

相关 vue 动态绑定placeholder

前言：当placeholder的值不唯一时，就可以动态绑定placeholder ![在这里插入图片描述][20201130155335620.png] <div

一时失言乱红尘/ 2022年12月25日 04:50/ 0 赞/ 176 阅读

相关 vue 解决dom动态绑定data 刷新页面数据没有自动绑定问题

问题：今天发现了问题，刷新页面数据没有自动绑定，所有方法都试过了，刷新页面还是活跃标签没有变红 ![在这里插入图片描述][20201027213414445.png

喜欢ヅ旅行/ 2022年11月20日 08:24/ 0 赞/ 200 阅读

相关 Vue 更新机制及数据绑定

一、更新机制。参考帅气的别人家博主：[更新机制！][Link 1] 二、数据绑定原理： vue主要是借助对象的访问器属性（Object.definePropert

小灰灰/ 2022年04月18日 00:56/ 0 赞/ 312 阅读

相关 vue 动态绑定 id

<div class="layui-tab-item" :class="{ 'layui-show': key === 0}" v-for="(cur, key) in

太过爱你忘了你带给我的痛/ 2022年01月27日 00:07/ 0 赞/ 862 阅读

相关 VUE 实现 Table的动态绑定

模板代码 <template> <div id="app-4"> <el-table :data="t

你的名字/ 2021年09月27日 16:58/ 0 赞/ 1302 阅读

相关解决vue修改数据绑定的视图不能动态更新的问题

在写项目的时候遇见一个问题，修改vue v-bind或v-model绑定的数据时，视图不能更新这就感觉很无语了。。。。当时在写一个弹窗，弹窗的数据更新后不能更新视图，需要重

雨点打透心脏的1/2处/ 2021年09月25日 00:06/ 0 赞/ 468 阅读

相关 Vue 的数据绑定

> vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的实现步骤： 1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者 2.

不念不忘少年蓝@/ 2021年09月03日 04:10/ 0 赞/ 462 阅读

相关 vue动态绑定class

<li v-for="(item,index) in processOptions" class="process-list-item" :class="{ ' is-

╰+哭是因爲堅強的太久メ/ 2021年07月25日 20:53/ 0 赞/ 523 阅读