解析Vue数据/数组对象改变视图不更新

来源：https://blog.csdn.net/my_atlassian_yhl/article/details/87364896

先来解决问题 : 当我们数据发生变化，视图却没有变化时，三种方法

1. 使用$set
此时我们需要知道Vue.set()需要哪些参数，官方API：Vue.set()

调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

this.$set(this.arr[key], 'title', '1')
这种方法就可以进行视图刷新

2.使用$forceUpdate()
数据层次太多，render函数没有自动更新，需手动强制刷新

this.$forceUpdate() 就是强制刷新视图 很粗暴

 

3. 通过改变data来触发新的渲染
<div style="display:none;"> {{is_show}}</div>
 在你操作数据的方法下加以下这段就可以达到目的

this.$nextTick(() => {
this.is_show = !this.is_show
})
解析:
Vue2.+ 现在是通过Object.defineProerty来进行数据的双向数据绑定

Object.defineProerty目前主要有三个问题

不能监听数组的变化
必须遍历对象的每个属性
必须深层遍历嵌套的对象
咱们的这种视图不能更新的问题是出在数组上比如this.arr[key].title = '1'

这种赋值就有可能会存在这种问题

就比如在我们进行watch的时候 , 需要加上deep为true才可以解析对象是否变化

watch: {
obj: {
handle: (n) {
// 新值
},
deep: true
}
}
 

在即将尤大大Vue3.0的时代里，Object.defineProerty即将被Proxy淘汰

没错就是ES6新增的Proxy

Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）

优势:Proxy 的第二个参数可以有 13 种拦截方法，比 Object.defineProperty() 要更加丰富,Proxy 作为新标准受到浏览器厂商的重点关注和性能优化，相比之下 Object.defineProperty() 是一个已有的老方法。
劣势:Proxy 的兼容性不如 Object.defineProperty() (caniuse 的数据表明，QQ 浏览器和百度浏览器并不支持 Proxy，这对国内移动开发来说估计无法接受，但两者都支持 Object.defineProperty()),不能使用 polyfill 来处理兼容性