vue2响应式的原理:
通过Object.defineProperty() 对属性的读取、修改进行拦截。
Object.defineProperty(obj,'name', {
get() {},
ser() {}
})
存在问题:
-
由于只有get()、set() 方式,所以只能捕获到属性读取和修改操作,当 新增、删除属性时,捕获不到,导致界面也不会更新。
-
直接通过下标修改数组,界面也不会自动更新。
解决办法
- 修改属性时,使用 this.$set()
- 删除属性时,使用 this.$delete()
<script>
export default {
data() {
return {
obj: {
name: '李华',
age: 16
}
}
},
methods: {
// 添加属性
addSex() {
// 当我们这样新增属性时,界面是不会有变化的
this.obj.sex = '男'
// 我们要这么去添加属性,页面才会有变化
this.$set(this.obj, 'sex', '男')
}
// 删除属性
deleteName() {
// 当我们这样删除属性时,界面是不会有变化的
delete this.obj.name
// 我们要这么去删除属性,页面才会有变化
this.$delete(this.obj, 'name')
}
}
}
</script>