浅析Vue数据响应式

1.getter和setter的用法

1）得到姓名

let obj1 = {
姓: "高",
名: "圆圆",
姓名() {
return this.姓 + this.名;
},
age: 18
};
 
console.log(obj1.姓名()); //高圆圆，姓名后面的括号不能删掉，因为它是函数

2）需求二，姓名不要括号也能得出值

let obj2 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log(obj2.姓名);  // 这时姓名就不是一个函数，而是变成了一个属性，所以就可以不用加括号。

3）需求三：姓名可以被改写

let obj3 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
set 姓名(xxx){
this.姓 = xxx[0]
this.名 = xxx.substring(1)
},
age: 18
};
obj3.姓名 = '高媛媛'
 
console.log(`姓 ${obj3.姓}，名 ${obj3.名}`)；// “姓 高，名 媛媛”。用= xxx 就可以触发 set 函数，setter必须
接收一个新的值

2.defineProperty

//1.在定义完一个对象之后，想要再添加额外的setter和getter
let _xxx = 0
Object.defineProperty(obj3,'xxx',{
get(){
  return _xxx
},
set(value){
_xxx = value
}
//给obj3添加了一个虚拟属性‘xxx’，
})

// 2.用 Object.defineProperty 定义 n:0
let data1 = {}
Object.defineProperty(data1, 'n', {
  value: 0
})//给data1添加一个n属性，n的值为0.
 
console.log(`需求一：${data1.n}`)

3.数据响应式

• 响应式的意思是一个物体能对外界的刺激做出反应，例如被打了一下身体会产生痛觉。
• Vue 数据响应式的意思是：Vue对data一直进行监听和代理，当data中的数据发生改变时，UI页面中的数据也会响应而发生改变。因为Vue对声明的数据（属性）进行了监听和代理，即当数据变化时，Vue会立刻监听到变化，并调用渲染操作。

4.Object.defineProperty(obj3,'n',{...})

defineProperty必须有一个'n'才能代理&监听obj.n，如果忘记写'n'会发生什么？

1）Vue会给出一个警告,且只检查第一层:

2）Vue只检查第一层:

new Vue({
data: {
obj: {
a: 0 // obj.a 会被 Vue 监听 & 代理
}
},
template: `
<div>
{{obj.b}}
<button @click="setB">set b</button>
</div>
`,
methods: {
setB() {
this.obj.b = 1; //页面中不会显示b=1，因为Vue只监听a，对b赋值不会有任何反应
}
}
}).$mount("#app");

解决办法：

1:提前把key声明好

data: {
obj: {
a: 0 // obj.a 会被 Vue 监听 & 代理
b:undefined
}
},

2:使用Vue.set或者this.$set

methods: {
    setB() {
      Vue.set(this.obj, "b", 1);
    }
  }

5.Vue.set和this.$set

6.如何解决data中数组新增key的问题？

//使用Vue中的7个API--push 
new Vue({
  data: {
    array: ["a", "b", "c"]
  },
  template: `
    <div>
      {{array}}
      <button @click="setD">set d</button>
    </div>
  `,
  methods: {
    setD() {
      this.array.push("d");
    }
  }
}).$mount("#app");

7.Vue 中，数组的变异方法有哪 7 个？

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()