Vue原理
defineproperty
介绍
Object.defineProperty是ES5中的方法，它可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。vue.js正式利用这种方法实现数据的双向绑定,以达到响应式的目的。
语法
Object.defineProperty(object, propertyname, descriptor) //参数（3个且必须）
参数详解
-
object：要在其上添加或修改属性的对象。
-propertyname：要定义或修改的属性的名称。（存在修改，不存在，自定义，设置属性和描述配置） -
descriptor:将被定义或修改的属性描述符。(可以包含以下属性，默认情况下， writable， enumerable，configurable值为false)
value:属性的值
writable:如果为false，属性的值就不能被重写,只能为只读了。
enumerable:是否能枚举，也就是否能在for...in循环中遍历出来或在Object.keys中列举出来。
configurable:如果为false，就不能再设置他的（value，writable，configurable）。
defineProperty访问器,可选键值
还有两个方法 ，双向数据绑定正是利用了这两个方法，即访问器 get()和 set()
<div id="app"></div>
<button onclick="setValue()">add</button>
<script>
let xx; // 操作的数据
const setAppText = () => {
document.querySelector("#app").innerHTML = obj.x;
}
const setValue = () => {
xx++;
// 给obj赋值为增加之后的值
obj.x = xx;
}
var obj = {};
Object.defineProperty(obj, 'x', {
// 每一次obj取x属性的时候都会调用get
get () {
// console.log(xx)
return xx;
},
// 每一次在设置obj的x属性的时候都会调用一次
set (newValue) {
// console.log(newValue);
xx = newValue;
console.log(xx);
// 每一次数据更新都要重新设置DOM
setAppText();
}
})
obj.x = 20;
// setAppText();
</script>
流程 ： 断点测试，真实的流程、 对于get set进入环境的理解
- 解析html，初始均无值,div.innerHTML = undefined
- 进入脚本(script),声明let、const、 const (均为指向，不解析)、var
-
Object.defineProperty() 对象的方法、不解析、定义或修改对象属性、描述符（可枚举enumerable、可重写、configurable(删改目标属性)）、get/set方法 -
obj.x = 20 设置obj.x属性进入definedProperty.set=> xx = 20 =>setAppText() - setAppText() =>
document.querySelector("#app").innerHTML = obj.x;取值操作，先进入definedProperty.get=>return xx =>返回函数体继续执行 - 点击之前的一次解析流程 ，=>点击后触发++函数
原生实现函数处理数据，数据显示在DOM，改变后的数据在js中操作。即简易的双向绑定
proxy (ES6)
代理
暂不了解
v-model
指令：在表单控件或者组件上创建双向绑定。(input, textarea,select)
更新数据，本质，语法糖，负责监听用户的输入事件以更新数据（，并对极端情况处理。）
- v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
Point：由于v-model只是语法糖，下面三个作用相同
- v-model ————
<input v-model="message">
下面两种解释双向绑定： v-bind可以把data数据绑定给value, @input把用户输入的值在去赋给data,这样实现了双向绑定
需要在Vue实例中操作数据
<input v-bind:value="message" v-on:input="message = $event.target.value" />- 简写————
<input :value="message" @input="message = $event.target.value" />
