解决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 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 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
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
canvas绘制多边形
2017/02/24 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
js实现图片实时时钟
2020/01/15 Javascript
深入Python解释器理解Python中的字节码
2015/04/01 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
python支持多继承吗
2020/06/19 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
赢在执行观后感
2015/06/16 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
Python中的嵌套循环详情
2022/03/23 Python
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏