数据驱动
- 数据响应式、双向绑定、数据驱动
- 数据响应式
- 数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率
- 双向绑定
- 数据改变，视图改变；视图改变，数据也随之改变
- 我们可以使用v-model 在表单元素上创建双向数据绑定
所以 双向绑定针对的是和用户有交互的表单元素
- 数据驱动是Vue 最独特的特性之一
- 开发过程中仅需关注数据本身（业务本身），不需要关心数据是如何渲染到视图
总结
数据驱动就是一种开发过程，在这个开发过程中，程序员不需要关注如何把数据渲染到DOM上，因为现在主流的MVVM框架内部已经帮我们实现了数据响应式以及双向绑定。
数据响应式核心原理
- 官方解释
Object.defineProperty是ES5中一个无法shim的特性
shin特性意思是无法降级处理的
重点：浏览器兼容IE8以上（不兼容IE8及以下）
数据响应式核心原理
当给data中msg属性重新赋值的时候，把新的值渲染到div中来，整个DOM操作不希望在外部赋值的时候去做，所以这里做了一个数据劫持
数据劫持如何去实现
通过definProperty实现数据劫持
Object.definProperty方法参数- 第1个参数：vm是Vue实例对象
- 第2个参数：给vm对象增加的一个属性
- 第3个参数：属性描述符，可以给
msg属性设置get、set方法等
当访问msg的时候会执行get方法，当给msg重新赋值的时候回执行set方法
Vue 2.x中响应式原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>defineProperty</title>
</head>
<body>
<div id="app">
hello
</div>
<script>
// 模拟 Vue 中的 data 选项
let data = {
msg: 'hello',
count: 10
}
// 模拟 Vue的实例
let vm = {};
proxyData(data);
function proxyData(data) {
// 遍历 data 对象的所有属性
Object.keys(data).forEach(key => {
// 把data中的属性，转换成 vm 的 getter/setter
// 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作
Object.defineProperty(vm, key, {
// 描述 key 属性是否 可枚举（可遍历）
enumerable: true,
// 描述 key 属性是否 可配置（可以使用 delete 删除，可以通过 defineroperty 重新定义）
configurable: true,
// 当获取值的时候执行
get() {
console.log('get: ', data[key])
return data[key]
},
// 当设置值的时候执行
set(newValue) {
console.log('set: ', newValue)
if (newValue === data[key]) {
return
}
data[key] = newValue;
// 数据更改，更新 DOM 的值
document.querySelector('#app').textContent = data[key];
}
})
})
}
// 测试
vm.msg = 'Hello World';
console.log(vm.msg);
</script>
</body>
</html>
