缓慢解决Vue不能检查测量检验数组或对象变动的难点_vue.js_脚本之家

来看三个实例:

有些时候,不能不想加多、校订数组和对象的值,然而平昔抬高、修改后又失去了getter、setter。

做checkbox多选功力的时候遭逢了多少个坑,逻辑怎么看都对,不过正是有bug,最终发掘数组那里值变了页面勾选没有再一次渲染。

 vue   li:hover { cursor: pointer; }     {{item.name}} {{numbers[index]}}     var vm = new Vue({ el: ".wrap", data: { numbers: [], items: [ {name: 'jjj'}, {name: 'kkk'}, {name: 'lll'}, ] }, methods: { handle: function  { // WHY: 更新数据,view层未渲染,但通过console这个数组可以发现数据确实更新了 if (typeof === "undefined" ) { // 注:下面这么设置是可以的。例如 // var arr = []; // arr[3]=3; // console.log //[empty × 3, 3] this.numbers[index] = 1; // this.numbers.splice //用splice方法能同步显示,但得不到想要的效果 } else { this.numbers[index]++; // this.numbers.splice(index,1,this.numbers[index]++) } // console.log; 

鉴于 JavaScript 的节制, Vue 不可能检验以下改动的数组:

换了至关心珍视要词找搜索到了有关办法。

想落成的功力是点击 li 看 vm.nymbers[index]
是或不是存在,官样文章装置为1,存在的话加1。

  1. 澳门京葡网站 ,行使索引直接设置叁个项时,举个例子: vm.items[indexOfItem] = newValue

  2. 缓慢解决Vue不能检查测量检验数组或对象变动的难点_vue.js_脚本之家。修正数组的尺寸时,比方: vm.items.length = newLength

实际后面读文档教程的时候见到过这里,然而独有真正选用之后才会有最直白的感动。

点击之后数字并不以前在view层更新,而透过console打字与印刷开掘数目更新了,只是view层未有顿时的检查测验到。

为了幸免第一种情景,以下二种形式将直达像 vm.items[indexOfItem] =
newValue 的功效, 同期也将触及状态更新:

数组更新检查实验

再看贰个转移之后的:

// Vue.setVue.set(example1.items, indexOfItem, newValue)// Array.prototype.splice`example1.items.splice(indexOfItem, 1, newValue)

变异方法

 vue   li:hover { cursor: pointer; }     {{item.name}}      var vm = new Vue({ el: ".wrap", data: { // numbers: [], items: [ {name: 'jjj'}, {name: 'kkk'}, {name: 'lll'}, ] }, methods: { handle: function  { // 不是数组,这里更新数据就可以直接在view层渲染 this.items[index].name += " success"; // console.log; 

幸免第三种处境,使用 splice:

Vue
包蕴一组寓目数组的多变方法,所以它们也将会触发视图更新。这么些格局如下:

能够看出这里的view层能即时得到更新,但是到了数组哪里为啥就不能了吗?

example1.items.splice

pushunshiftreverse()

来看Vue2.0法定的文书档案表明:

Vue 不容许在早就创建的实例上动态增加新的根级响应式属性(root-level
reactive propertyState of Qatar。但是它能够运用Vue.set
方法将响应属性加多到嵌套的指标上:

你张开调整台,然后用前边例子的 items
数组调用多变方法:example1.items.push 。

由于 JavaScript 的范围,Vue 不能够检查实验以下校勘的数组:

Vue.set(vm.someObject, 'b', 2)

更动数组

当您接收索引直接设置叁个项时,比如:vm.items[indexOfItem] = newValue

您还足以行使 vm.$set 实例方法,那也是全局 Vue.set 方法的小名:

变异方法
,循名责实,会转移被那一个方法调用的原始数组。相比之下,也许有非变异
方法,举例:filter
。这一个不会变动原始数组,但老是回到四个新数组。当使用非变异方法时,能够用新数组替换旧数组:

当你改改数组的尺寸时,比如:vm.items.length = newLength

this.$set(this.someObject,'b',2)
example1.items = example1.items.filter {return item.message.match

发表评论

电子邮件地址不会被公开。 必填项已用*标注