<!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 id="app">
<button @click="setName">修改obj的name</button>
<button @click="addSex">添加obj的sex</button>
<button @click="delAge">删除obj的age</button>
<h1>{{obj}}</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
obj:{
name:"张三",
age:20
}
}
},
methods: {
setName(){
/* 修改了data中的数据 视图也会发生改变
双向数据绑定 */
this.obj.name = '李四'
},
addSex(){
/* vue2里面有个缺陷 就是添加属性的时候视图不会更新
不能实现双向数据绑定 */
/* this.obj.sex = '男' */
/* 底层使用的 Object.defineProperty 可以实现修改和查看
但是监听不到属性的添加和删除*/
/* vue3 就不使用Object.defineProperty了，使用了proxy方法
，使用了这个方法就可以直接的使用原生的添加 和 删除方法了，
还可以实现双向数据绑定 */
console.log(this.obj);
/* 要解决添加属性显示在视图中，必须要使用vue
中的$set方法去实现双向数据绑定 */
/* this.$set(this.obj,'sex','男') */
/* this.$forceUpdate(this.obj) */
},
delAge(){
/* vue2里面不能直接使用对象删除的方法，
实际上数据已经被删除，但是视图没有更新，
不能实现双向数据绑定 */
/* delete this.obj.age */
/* vue为了解决删除数据后视图不更新的问题，提供了
$delete方法来实现双向数据绑定 */
/* 底层使用的 Object.defineProperty 可以实现修改和查看
但是监听不到数据的添加和删除*/
/* vue3 就不使用Object.defineProperty了，使用了proxy方法
，使用了这个方法就可以直接的使用原生的添加 和 删除方法了，
还可以实现双向数据绑定 */
this.$delete(this.obj,'age')
console.log(this.obj);
}
},
})
</script>
</body>
