Vue 数据响应式相关总结
在说数据响应式之前，我们要解决一个很重要的问题，那就是vue到底对data做了什么？先从getter和setter说起，我们用那个他们来对虚拟的属性进行读写。
getter和setter
有如下代码
此时我们log出来的结果是高圆圆，这个大家都能看懂，但是姓名后面的括号能删掉吗？不能，因为它是函数，那么我们怎么去掉括号呢？下面就有我们的需求二
此时我们使用getter ，不加括号也能得出值。那么我们要怎么改变这个名字呢？
有get就有set,setter就是这样用的。我们用 属性值 = xxx 触发 set 函数，姓名就可以被写啦。但是我们在需求三中打出 console.log(obj3) 会得到如下图所示:
如图为什么会显示 姓名:(...) 呢？ 这其实是一个get set，浏览器在显示这个姓名的时候就打印出 姓名:(...) ,这说明我们可以在需求三中对姓名进行读和写，但是并不存在一个叫做姓名的属性，而是有get和set来模拟对姓名进行的操作。
object.defineproperty
在如上例子中，我们在定义对象的时候就直接使用get和set，但是如果对象已经被声明完了，那我们怎么继续加上get呢？我们就要用到object.defineproperty，还是需求三，我们加入如下代码就可以在定义完之后再加get和set了：
接下来我们就可以解决一开始的问题了：vue到底对data做了什么？我们举几个例子看看：
先声明一个data0，需求一：用 object.defineproperty 定义 n：
需求二：n 不能小于 0：
可是如果对方直接使用data2._n呢？我们能不能做到不在对象上暴露任何能够被访问的东西呢？这时候我们就要使用代理：
可是如果不想用代理，要怎么做呢？
现在这样还是能更改mydata，所以我们又有一个需求：就算是用户擅自修改mydata，也要拦截：
就加了上面几句，这几句话会监听 data
当我们写vm = new vue({data:mydata})时，vue做了两件事情：
- 让vm成为mydata的代理(proxy)，可以通过this访问vm
- 会对mydata所有的属性进行监控，为了防止mydata的属性变了，vm却不知道，知道了属性变化之后就可以调用render(data)，ui就可以自动刷新
那么我们就可以回到标题了，什么是数据响应式呢？如果一个物体能够对外界的刺激做出反应，那么它就是响应式的。vue的data是响应式的，const vm = new vue({data:{n:0}})在这个代码中如果修改vm.n那么ui中的n就会做出相应的更新，vue通过object.defineproperty来实现数据响应式。
响应式网页又是什么呢？即如果改变窗口的大小，网页内容会做出相应的改变，那么这个网页就叫响应式网页。
以上就是vue 数据响应式相关总结的详细内容，更多关于vue 数据响应式的资料请关注其它相关文章！