解决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 相关文章推荐
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
简单实现PHP留言板功能
2016/12/21 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中cPickle用法例子分享
2014/01/03 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python的几种主动结束程序方式
2019/11/22 Python
python实现文法左递归的消除方法
2020/05/22 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
python 如何调用 dubbo 接口
2020/09/24 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
群众路线个人整改方案
2014/10/25 职场文书
工程部经理岗位职责
2015/02/02 职场文书
北京英语导游词
2015/02/12 职场文书
病假条格式范文
2015/08/17 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
Ajax异步刷新功能及简单案例
2021/11/20 Javascript