图画版本（建议看图说话）

前端-14.jpg

上面的图完美解决了问题“为什么我修改vm.n，界面中的UI也会改变，因为装了监听之后，所有的改变都会实时走图中的逻辑闭环。

关于图中的一些说明

Object.defineProperty的用法：

let data1 = {}  
Object.defineProperty(data1, 'n', {   value: 0 }) 
//用 Object.defineProperty 定义 n

为什么要叫代理？

代理是一种设计模式 放着myData.n不用，偏偏用vm.n来操作myData.n 那么vm就是myData的代理（您老歇着，这些活小的干就行）

监听那步为什么重要？(监听也就是数据劫持哦）

如果我能监听到数据的实时变化，那么我就可以让 UI实时reader 我的最新的data 也就是说 UI=reader(data)

getter和setter的用法：

const obj3 = {
  firstName: 'chen',
  lastName: 'shanqiong',
 get name() {
 return this.firstName + this.lastName
  },
 set name(name) {
 this.firstName = name[0],
 this.lastName = name.substring(1)
  },
  age: 18
}
obj3.name = '李四'; //相当于触发了setter函数
console.log("obj3的姓名：" + obj3.name) //obj3的姓名：李四
 //在方法名之前加一个get 这样不加括号也可以调用  
//getter就是在函数名前面加get

需要注意的点
get name()的写法，不要忘记括号（ES6新语法）

小展开

Vue中数组的变异方法

Vue、被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

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

变异原理的代码模仿实现

class VueArray extends Array{
      push(...args){
            const oldLength=this.length  
           super.push(...args)
           for(let i=oldLength;i<this.length;i++){
                Vue.set(this,i,this[i])   //将每一个新增的key都告诉Vue
          }
      }
}

文字版本（建议熟读并背诵）

请问你是如何理解Vue的数据响应式的？（注意思路：辩证法——优点+缺点+缺点改进的措施）

答：Vue是以数据响应式为核心的UI框架，核心思想就是把所有的数据放到一个对象里，然后去操作对象，对象就会改变数据，监听这个改变从而改变UI，当然Vue不能检测到对象属性的添加或删除，如果一开始没有在Data上声明属性，就算你对这个属性做出更改，也不会更新UI。解决的方法是手动调用Vue.set或者this.$set(注意：此处的this等于vm）

Vue的数据响应式？怎么理解？