标签：set Object 视图 Vue Proxy key defineProperty 解析

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

标签：set,Object,视图,Vue,Proxy,key,defineProperty,解析
来源： https://www.cnblogs.com/huchong-bk/p/12738313.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。