详解Vue中数组和对象更改后视图不刷新的问题


Posted in Javascript onSeptember 21, 2018

Vue数据响应原理

官方的解释很清晰:

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。 用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。 每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

详解Vue中数组和对象更改后视图不刷新的问题

关于getter和setter的局限性

官方文档解释那么多,说到底就是数据的改变必须能够触发set方法,否则无法响应数据变化。那么,我们就看看set方法在什么时候会被触发,什么时候又不会被触发。

var person = {
 defaultname: 'tom',
 get name() {
  return this.defaultname
 },
 set name(val) {
  this.defaultname = val
  console.log("触发了set")
 }
}

这里我们定义一个叫做person的对象,我们通过get/set来控制name,可以看到如果set被触发,就会打印出触发了set。

person.name
=>"tom"
person.name = 123
=>触发了set
person.name
=>123

可以看到我们直接修改name是可以触发set的。

person.name = {name: 'tom'}
=>触发了set
person.name
=>{name: "tom"}
person.name.name = 123123
=>没有打印出任何信息,说明修改name的属性值并没有触发set方法。
person.name.sex = 333
=>没有打印出任何信息,说明添加name的属性值并没有触发set方法。
delete person.name.name
=>没有打印出任何信息,说明删除name的属性值并没有触发set方法。
Object.defineProperty(person.name, 'name', {value: 4444})
=>没有打印出任何信息,说明Object.defineProperty也没有触发set方法。

当name是一个对象的时候,我们修改、添加、删除name的属性值都没有触发set方法。

person.name = [1,2,3]
=>触发了set
person.name.push(4)
=>没有打印出任何信息,说明push方法并没有触发set方法。

说明数组的push方法也无法触发set方法,同理pop、shift、unshift等原生数组方法也是无法触发set。

解决方案

受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。例如:

var vm = new Vue({
 data:{
 a:1
 }
})

// `vm.a` 是响应的

vm.b = 2
// `vm.b` 是非响应的

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:

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

您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

this.$set(this.someObject,'b',2)

有时你想向已有对象上添加一些属性,例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
AngularJS入门之动画
Jul 27 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
详解vue 数组和对象渲染问题
Sep 21 #Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 #Javascript
Puppeteer环境搭建的详细步骤
Sep 21 #Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 #jQuery
JavaScript 高性能数组去重的方法
Sep 20 #Javascript
vue2 设置router-view默认路径的实例
Sep 20 #Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 #Javascript
You might like
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
在python中画正态分布图像的实例
2019/07/08 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
大学班级计划书
2014/04/29 职场文书
小学校本培训方案
2014/06/06 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
首次购房证明
2015/06/19 职场文书
Python爬虫基础初探selenium
2021/05/31 Python