本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、响应式原理
1、理解什么是代理对象。
代理对象会修改源对象的数据。
示例：
// 1、定义源对象
let obj1 = {
name: '李易峰',
age: 34
}
//2、定义代理对象
let obj2 = obj1
console.log("obj2", obj2)
obj2.name = "李贺"
obj2.age = 35
// 此处obj1的name和age的数据和obj2一样
console.log("obj1", obj1);
2、如何使用代理对象
2.1将源对象传递给vue的data选项，它背后做了两件事
2.2、设置vue实例的_data属性，作为当前源对象的代理对象。（响应式核心）
2.3、将_data里面代理的所有数据，再添加到当前vue实例身上。（为了vue实例方便调用数据）
示例：
// 1、定义一份数据。定义源对象
let myData = {
name: '李易峰',
age: 34
}
let vm = new Vue({
data: myData
})
vm._data.name = "李贺"
myData.age = 18
console.log(myData);
3、给对象添加属性的方式
通过object对象的defineProperty方法，给指定的对象添加指定的属性。使用此方式给对象添加的属性，默认不可枚举，不能被删除。
3.1 Object.defineProperty（对象名，''属性名''）{属性值：'默认值'}
3.2 enumerable: true 允许被枚举（默认不允许）
3.23 configurable: true 允许被删除（默认不能删除）
示例：
let obj3 = {}
// 给对象添加属性的第一种方法
obj3.name = "李易峰"
// 给对象添加属性第二种方法
obj3["age"] = 34
// 给对象添加属性第三种方法，
// 使用这种方法，给对象添加的属性，对属性的保护措施更加严格
Object.defineProperty(obj3, "sex", {
value: '男',
enumerable: true,
configurable: true
})
console.log(obj3);
// 枚举出对象的所有属性（其实就是遍历出对象的所有属性名)
for (let key in obj3) {
console.log(obj3);
}
// 通过delete关键字，可以删除对象身上的指定属性
// delete obj3.name
// delete obj3.age
console.log(obj3);
4、响应式原理
4.1、定义一个源对象
4.2、定义一个代理对象（使用_data去代理data)
4.3、使用Object.defineProperty给对象添加属性或方法
示例：
// 01 定义一个源对象
let data = {
name: '李易峰',
age: 34
}
// 在页面中，显示姓名和年龄
document.querySelector("#name").innerHTML = data.name
document.querySelector("#age").innerHTML = data.age
// 02 定义一个代理对象（使用_data去代理data)
let _data = {}
// 03.使用Object.defineProperty
Object.defineProperty(_data, "name", {
// get()方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
get() {
console.log("get方法执行了");
return data.name
},
// set()方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
set(val) {
console.log("set方法执行了");
data.name = val
document.querySelector("#name").innerHTML = data.name
}
})
console.log(_data.name);
// _data.name="李贺"
Object.defineProperty(_data, "age", {
get() {
return data.age
},
set(val) {
data.age = val
// 当代理对象，监听到数据发生变化了，就会重新渲染页面
document.querySelector("#age").innerHTML = data.age
}
})
二、Vue的常用指令
1、v-bind：指令，用于绑定属性。通过此方法绑定的属性，属性值内可以写表达式。 ：简写
2、v-on：指令，用于绑定事件。通过此方法绑定过的事件可 以指定vue实例定义的方法。 @简写。
3、如果事件方法的代码不是很多的话，可以写在行内。在行内书写的时候要注意两点
3.1、不能写this。
3.2、$event是事件对象就相当于this。
4、v-model指令，可以实现对数据的双向绑定。v-model指令是v-bind:value和v-on:input的简写
示例：
<div id="app">
<div>
<span>姓名：</span>
<input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
</div>
<div>
<span>年龄：</span>
<input type="text" v-bind:value="age" @input="age =$event.target.value" >{{age}}
</div>
<div>
<span>工作：</span>
<input type="text" v-model="job">{{job}}
</div>
</div>
<script src="../js/vue.js"></script>
<script>
// 关闭生产提示
Vue.config.productionTip = false
let vm = new Vue({
// 指定当前vue对象操作的DOM容器
el: "#app",
data: {
name: "李易峰",
age: 34,
job: '演员'
},
// 定义当前vue对象管理的方法
methods: {
updateName(e) {
// 获取文本框内的内容，更新数据
this.name = e.target.value
},
updateAge(e) {
this.age = e.target.value
}
},
})
</script>
