解决Vue不能检测数组或对象变动的问题

2024-09-28 16:53:29

来看一个实例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   // WHY: 更新数据，view层未渲染，但通过console这个数组可以发现数据确实更新了
   if (typeof(this.numbers[index]) === "undefined" ) {
   // 注：下面这么设置是可以的。例如
   // var arr = [];
   // arr[3]=3;
   // console.log(arr) //[empty × 3, 3]
    this.numbers[index] = 1;
   // this.numbers.splice(index,0,1) //用splice方法能同步显示，但得不到想要的效果
   } else {
    this.numbers[index]++;
   // this.numbers.splice(index,1,this.numbers[index]++)
   }
  // console.log(this.numbers)
  }
  }
 });

 </script>
</body>
</html>

想实现的效果是点击 li 看 vm.nymbers[index] 是否存在，不存在设置为1，存在的话加1。

点击之后数字并没有在view层更新，而通过console打印发现数据更新了，只是view层没有及时的检测到。

再看一个改动之后的：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <!--<span>{{numbers[index]}}</span>-->
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  // numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   // 不是数组，这里更新数据就可以直接在view层渲染
   this.items[index].name += " success";
  // console.log(this.numbers)
  }
  }
 });
 </script>
</body>
</html>

可以看到这里的view层能及时得到更新，但是到了数组哪里为什么就不可以了呢？

来看Vue2.0官方的文档说明：

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

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

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

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

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名。

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
 data: {
 a: 1
 }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
 data: {
 userProfile: {
  name: 'Anika'
 }
 }
})

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(this.userProfile, {
 age: 27,
 favoriteColor: 'Vue Green'
})

应该这样做：

this.userProfile = Object.assign({}, this.userProfile, {
 age: 27,
 favoriteColor: 'Vue Green'
})

因此，上面例子应该改为：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   if (typeof(this.numbers[index]) === "undefined" ) {
    this.$set(this.numbers, index, 1);  //(arr,index,newvalue)
   } else {
    this.$set(this.numbers, index, ++this.numbers[index]);
   }
  }
  }
 });
 </script>
</body>
</html>

搞定！

1.17补充-------------------------------

如何理解“对于已经创建的实例，Vue 不能动态添加根级别的响应式属性”？

例如：

var vm=new Vue({
 el:'#test',
 data:{
  //data中已经存在info根属性
  info:{
   name:'小明'
  }
 }
});
//给info添加一个性别属性
Vue.set(vm.info,'sex','男');

上面是正确做法，下面的做法的话就会报错了：

Vue.set(vm.data,'sex','男')

实际上，不能直接在data上增加属性，但可以在data里的对象上增加属性。

实际上vm.data是undefined。

以上这篇解决Vue不能检测数组或对象变动的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

vue中遇到的坑之变化检测问题（数组相关）
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Vue.js中数组变动的检测详解
Vue响应式添加、修改数组和对象的值

vue 数组和对象不能直接赋值情况和解决方法(推荐)

Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers
Vue响应式添加、修改数组和对象的值

有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后又失去了getter.setter. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 2. 修改数组的长度时,例如: vm.items.length = newLength 为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状
Vue.js中数组变动的检测详解

前言最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {
vue中遇到的坑之变化检测问题（数组相关）

最近在项目中遇到了一个问题,不知道为什么,所以最后通过动手做demo实践.查文档的方式解决了,这里做一个总结. 例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.
解决Vue不能检测数组或对象变动的问题

来看一个实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script> <style> li:hover
解决vue.js提交数组时出现数组下标的问题

这是因为在vue.js 里面的ajax.js文件内对数据进行了深度解析了,我们只需要 let axios = Axios.create({ baseURL: 'http://127.0.0.1:8761/', headers: {'X-Requested-With': 'XMLHttpRequest'}, transformRequest: [function (data) { //在data当中存在数组的话需要加上{arrayFormat: 'brackets'} 否则提交时数组会显示下标 d
vue - props 声明数组和对象操作

我就废话不多说了,大家还是直接看代码吧~ props: { array: { type: Array, default () { return [] } }, object: { type: Object, default () { return {} } } } 补充知识:Vue项目中,要保证某个部分的高度,应该怎么设置看代码吧~ .icons overflow: hidden height: 0 padding-bottom: 50% background: green 以上这篇vue -
Vue不能watch数组和对象变化解决方案

目录 Vue 能监听数组的情况 Vue 无法监听数组变化举例无法监听数组变化的情况 Vue 无法监听数组变化的解决方案 Vue 监听对象 Vue 设置监听对象 Vue 能监听数组的情况 Vue 监听数组和对象的变化(vue2.x) vue 实际上可以监听数组变化,比如: 直接 = 赋值 data () { return { watchArr: [], }; }, watch: { watchArr (newVal) { console.log('监听:' + newVal); } }, cre
Vue中对数组和对象进行遍历和修改方式

目录对数组和对象进行遍历和修改 1.对数组进行循环 2. 修改数组的时候,不能直接通过下标去增加修改删除 3.对对象进行循环 4.增加对象的时候修改数组和对象的特殊情况以及修改方法修改数组的两个特殊情况修补方法对数组和对象进行遍历和修改 1.对数组进行循环 v-for进行循环,有两个参数(item,index) 注意:template可以成为占位符,在DOM里面不显示 2. 修改数组的时候,不能直接通过下标去增加修改删除 (1)可以用过push/pop/shift/unshift/sp
解决Vue 通过下表修改数组,页面不渲染的问题

需要注意的是,Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值: vm.todos[0] = { name: 'New name', description: 'New description' }; 会导致Vue无法更新View. 正确的方法是不要对数组元素赋值,而是更新: vm.todos[0].name =
浅谈Vue响应式(数组变异方法)

前言很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的
解决vue net :ERR_CONNECTION_REFUSED报错问题

我是因为频繁的更换网络,导致这样的. 然后我回忆了一下.之前每次改ip都会把Package.json 中的 --host 0.0.0.0改成我的固定ip,由于改来改去太麻烦了,我就设置为0.0.0.0 所以喜提上图的一排get请求 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", 解决办法把 --host 0.0.0.
解决vue.js 数据渲染成功仍报错的问题

最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

解决Vue不能检测数组或对象变动的问题

您可能感兴趣的文章:

相关推荐

随机推荐