什么是数据驱动
数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率
数据改变时，视图改变；视图改变，数据也随之变化
我们可以使用 v-model 在表单上闯将双向数据绑定
开发过程中，只需要关注数据本身，不需要关心数据如何渲染收到视图；
数据响应的核心原理
Vue2.x
Object.defineProperty es5 新增方法，无法兼容 ie8 一下版本
极简模拟：
// 模拟 Vue 中的 data 选项 let data = { msg: 'damo' }
// 模拟 Vue 的实例 let vm = {}
// 数据劫持，当访问或者设置 vm 中的成员的时候，做一些干预操作 Object.defineProperty(vm, 'msg', { // 可枚举（可遍历） enumerable: true, // 可配置（可以通过delete 删除，可以通过defineProperty 重新定义） configurable: true, // 当获取值的时候执行 get() { return data.msg }, // 当设置值的时候执行 set(newValue) { if (newValue === data.msg) { return } data.msg = newValue // 数据更改，更新 DOM 的值 // ...... } })
data.msg = 'damo-1'
复制代码
注：如果有一个对象多个属性需要转换 getter/setter，就需要循环处理;
Vue3.x
Proxy: 直接监听对象，而非属性；ES6 新增，IE 不支持，性能由浏览器优化；
极简模拟
// 模拟 Vue 中的 data 选项 let data = { msg: 'damo', sum: 2 }
// 模拟 Vue 的实例 let vm = new Proxy(data, { // 执行代理行为的函数 // 当访问 vm 的成员执行 get(target, key) { return target[key] }, // 当设置 vm 的成员会执行 set(target, key, newValue) { if (target[key] === newValue) return target[key] = newValue // 数据更改，更新 DOM 的值 // ...... } })
vm.msg = 'damo-1'
复制代码
评论