vue的数据响应式

什么是响应式？

响应式就是我打你一拳，你有反应会喊疼，那么你就是响应式的

什么是响应式页面？

如果我改变窗口的大小，网页内容会做出响应，这就是响应式页面

vue的数据响应式？

const vm=new Vue({data:{n:0}}) 如果修改了vm.n，那么ui中的n就会改变，这就是vue的数据响应式

vue数据响应式的实现？

vue通过Object.defineProperty的方法里面的getter和setter方法的观察者模式来实现数据响应式

const vm=new Vue({data:myData})

会让vm成为myData的代理

会对myData的所有属性进行监控

监控的目的是为了防止myData的属性变了，vm不知道

当myData的属性变了就可以调用render(data)对页面进行渲染

getter\setter用法

getter、setter用于对属性的读写进行监控

let obj1={
    姓:'王',
    名:'xiao',
    姓名(){
        return this.姓+this.名
    }
}
console.log(obj1.姓名())；

想要删掉 obj1.姓名() 后面的括号，就用到了getter,如下代码

let obj1={
    姓:'王',
    名:'xiao',
    get 姓名(){
        return this.姓+this.名
    }
}
console.log(obj1.姓名)；

let obj1={
    姓:'王',
    名:'xiao',
    get 姓名(){
        return this.姓+this.名
    },
    set 姓名(value){
        this.姓=value
    }
}
obj1.姓名='大大'
console.log(obj1.姓名)//大大xiao

总结：setter就是用=value触发set函数

其中这个名字是一个虚拟属性，所以我们看控制台会看到显示成这样--名字(...)

Object.defineProperty的用法

在定义一个对象之后，这个对象已经有get跟set了，但想在他身上添加新的get跟set的时候，就需要用到Object.defineProperty

Object.defineProperty(对象名,'新加的方法名',{
	get(){
  	return xxx
  },
  set(value){
  	xxx=value
  }
})

作用： 可以给对象添加属性value 可以给对象添加getter、setter