vue 数组动态刷新失败

前言

vue 数组动态刷新失败，包括视使用pop、push、splice，shift等数组函数和this.$forceUpdate()强制刷新等方式也是失败的

原因

其实原因不在于所谓的，vue不监听数组的问题，
事实上，只是由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时：

例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，

例如：vm.items.length = newLength

但是我是直接赋值的
vm.items. = new item；
这种方式，vue依旧是可以监听到的，所以我尝试了上面的几种方式，都未成功

最后，我突然看到一个词** “就地复用” **，在官网上，有这么的一句话

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。

所以，我就尝试加一个唯一id作为key值，最终成功了

所得

直接使用对象的属性进行修改，页面是不能冬天刷新的
视同v-for的时候，尽量加上唯一值作为key，避免vue使用“就地复用” 策略，导致显示出现问题

vue 数组动态刷新失败相关推荐

vue数组转Excel表格导出
vue数组转Excel表格导出安装依赖 npm i xlsx vue组件 <template><div><el-button type="success&qu ...
vue数组中数据变化但是视图没有更新解决方案
vue数组中数据变化但是视图没有更新解决方案参考文章: (1)vue数组中数据变化但是视图没有更新解决方案 (2)https://www.cnblogs.com/sufubo/p/6906261.h ...
vue -V 执行失败檔案名稱、目錄名稱或磁碟區標籤語法錯誤。
vue -V 执行失败提示 :檔案名稱.目錄名稱或磁碟區標籤語法錯誤. 安装 @Vue/cli 流程 yarn global add @vue/cli yarn global v1.22.10 [1 ...
JavaScript中字符串数组赋值失败，不是每个字符串，却是字符。
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
vue数组转换成对象
vue数组转换成对象 const data = [{ key: "alan", value: 12 },{ key: "mike", value: 18 } ] ...
vue数组循环遍历中途跳出整个循环
vue数组循环遍历中途跳出整个循环,使用some进行循环,return true时,跳出整个循环 judgePoint(arr) {if (this.haveError) {this.haveErro ...
2021-10-27 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在
这里写自定义目录标题 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 1 ...
vue数组的删除和追加操作
vue数组的删除和追加操作 1.Vue.js 数组追加合并与对象追加合并[Object.assign()] 2.Vue.js中splice()方法实现对数组进行增删改的操作
Vue 数组更新与排序过滤
前面的话 Vue 的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测到数据变化,所以用v-for 渲染的视图也会立即更新.Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示 ...

vue 数组动态刷新失败

前言

原因

所得

vue 数组动态刷新失败相关推荐

最新文章

热门文章