解析Vue数据/数组对象改变视图不更新
先来解决问题 :当我们数据发生变化,视图却没有变化时,三种方法1. 使用$set此时我们需要知道Vue.set()需要哪些参数,官方API:Vue.set()调用方法:Vue.set( target, key, value )target:要更改的数据源(可以是对象或者数组)key:要更改的具体数据value :重新赋的值this.$set(this.arr[k...
先来解决问题 : 当我们数据发生变化,视图却没有变化时,三种方法
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 来处理兼容性
告辞~
更多推荐
所有评论(0)