今天开发过程发现一个问题,如标题描述的,我在更改data(){return{}}里的数据后, 也就是对 elcheckboxvmodel 绑定一个 data() 里面数据,与之对应视图没有发生变化

        我之所以 断定 我data() 里的数据发生了变化,而视图没有发生变化,是因为 在chrome插件  vue devtools 中 确认了 data() 数据是发生了改变, 也就证明elcheckboxvmodel绑定boolean 值发生了改变,此时视图应该 按照 v-model=”false”  ==> v-model=”true”  从 未勾选状态==>勾选状态  但是 页面一直没有更新

        在确认自己不是因为低级错误而导致的 视图更新后,  对该问题进行了 不同的处理

1: 百度使用 $set() 、使用froceUpdate()     这两者都不起作用

既然 已经明确了 数据是发生了变化,依赖数据的视图没有发生改变, 那么 可以通过 较为偏激的方法 用v-if=”true” / v-if=”false” 的方法组件销毁再重新挂载, (此种方法过于 偏激,而且相对另类 不推荐使用

既然有通过 v-if 的方法 强行让 元素重新渲染,那么 是否可以利用 vue 的一些特性进行类似的操作呢?

以下为我个人 观点,学艺不精,如果有说错的 欢迎评论指正!

vue 响应式 可以通过 数据驱动页面的更新  加上 diff算法可以试着给 elcheckbox 组件 一个 无关紧要的属性 例如 :dataxxx=“响应式数据”  通过更改 该响应式数据  让vue 在进行diff算法中,发现虚拟Dom el-checkbox 的其中一个 dataxxx 属性发生变化,从而 让其触发该组件的 渲染,以达到 v-model 绑定的值改变 所对应视图发生变化。

例子

<el-checkbox v-model=”list[index].obj[value].checked”  :dataa=”checked“>

代码

function changeValue(){

// 将 list[index].obj[value].checkedfalse 改为 true

this.list[index].obj[value].checked = true    // 此时视图没有因为 数据的变化 而 从 未勾选变成勾选状态

// 更改一个 无关紧要的 数值

this.checked = !this.checked  // 此处 无论checked什么 都不影响   目的是让vue 去重新渲染 el-checkbox 这个组件

}        

总结:(个人 感觉)

         其实在一般的vue 开发中,如果 响应式数据 不是那种 非常复杂数据类型一般不会出现响应式数据变化而视图不更行的情况,但 上述例子list一个数组数组里面多个属性,其中一个属性为一个对象,而我们需要改变的值就是这个对象的其中一个属性,    可能 在vue双向绑定中,由于 list 是一个相对复杂数据类型,当深层次里的属性发生了 改变, vue没法做到  数据驱动 视图更新,当我们非常确认数据已经更新了, 仅仅是视图没有发生变化,此时 要做的就是 能让 视图发生改变的操作 通过改变一个无关紧要的 响应式数据 从而 让 组件进行 重新渲染操作 无疑是一个 不错的 解决方案

原文地址:https://blog.csdn.net/weixin_45143856/article/details/126375611

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_21296.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注