双向数据绑定原理
数据监听 数据劫持
v-model特指表单元素，v-bind实现数据从模型层m[data]到视图层view显示数据单向流，v-on事件的触发将视图[用户操作]修改了的数据存储到模型层。从而实现双向流数据。
数据响应式如何实现?数据劫持如何实现？
mvvm m model模型 v 视图 vm viewmodel 视图模型 沟通模型和视图
Vue2.x：代理
当把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，使用Object.defineProperty把这些属性全部转为getter（获取）/setter（设置）。
// es5中提供的方法 Object.defineProperty(obj, prop, descriptor) // 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。 // 应当直接在Object构造器对象上调用此方法，而不是在任意一个Object类型的实例上调用。
obj
要定义属性的对象。
prop
要定义或修改的属性的名称 。
descriptor
要定义选项，“{ }”。在这里面设置getter和setter（计算属性）。
案例：
<!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>Document</title> </head> <body> <div> <div><input type="text" id="ipt" value="" oninput="change(this)" /></div> <div>字符串： <div id="cnt"></div> </div> </div> <script> // 初始的data数据 var data = { msg: "人生无常，大肠包小肠" } // es5里的方法来代理操作 var obj = {} Object.defineProperty(obj, "msg", { // 当获取obj.msg的值的时候被执行 get() { return data.msg }, // 当给obj.msg赋值的时候会被执行 set(val) { data.msg = val // 通知页面更新 document.getElementById("cnt").innerText = val } }) document.getElementById("ipt").value = obj.msg document.getElementById("cnt").innerText = obj.msg function change(o){ obj.msg = o.value } </script> </body> </html>
