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


Posted in Javascript onFebruary 24, 2018

来看一个实例:

<!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不能检测数组或对象变动的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 #Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
vue cli webpack中使用sass的方法
Feb 24 #Javascript
vue-cli常用设置总结
Feb 24 #Javascript
JS处理一些简单计算题
Feb 24 #Javascript
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
You might like
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
window.location的重写及判断location是否被重写
2014/09/04 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python中while循环语句用法简单实例
2015/05/07 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
基于python的列表list和集合set操作
2019/11/24 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
保荐人的岗位职责
2013/11/19 职场文书
syb养殖创业计划书
2014/01/09 职场文书
优秀员工表扬信
2014/01/17 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
公司催款律师函
2015/05/27 职场文书
浅谈python数据类型及其操作
2021/05/25 Python