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

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

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 来处理兼容性 

告辞~