vue2.0 中数据响应式原理:
1: 对象类型: 通过Object.defineProperty() 对对属性的读取, 修改进行拦截(vue2.0 中数据响应式原理就是进行数据拦截)
2: 数组类型: 通过重写更新数组的一系列方法来实现拦截, 对数组的变更进行包装。
Object.defineProperty(data, 'count', {
get() {
},
set() {
} // 两个方法
})
vue2.0 中存在问题:
1: 新增属性, 删除属性, 界面不会更新。
2: 直接通过下标修改数组, 界面不会自动更新。
对象类型: 做到数据响应化, 解决方法:
import vue form 'vue';
export default({
data() {
return {
persons:{
name: "李明",
age: 20
}
}
},
methods: {
addSex() {
this.$set(this.person, 'sex', '女'); // 第一种方法
Vue.set(this.person, 'sex', '女'); // 第二种写法
},
// 删除对象身上某个属性
deleteName() { // 具有响应式删除
this.$delete(this.person, 'name', '女');
// 第二种方法
vue.delete(this.person, 'name', '女'); // 在对象中删除某个属性(并且具有响应式的)
},
// 修改数组的数据具有响应式变化:
updateHobby() {
更新数组中的数据并且具有响应式:
this.$set(this.person.hobby, 0, '逛街');
vue.set(this.person.hobby, 0, '逛街');
另外还可以调用数组身上的splice() 方法
this.person.splice(0, 1. '逛街');
}
}
})
vue 2.0 数据绑定原理
于 2022-03-08 18:07:49 首次发布