Vue 数据响应式相关总结

在说数据响应式之前，我们要解决一个很重要的问题，那就是Vue到底对data做了什么？先从getter和setter说起，我们用那个他们来对虚拟的属性进行读写。

getter和setter

有如下代码

let obj0 = {
 姓: "高", 名: "圆圆", age: 18}
    ;
// 需求一，得到姓名let obj1 = {
 姓: "高", 名: "圆圆", 姓名() {
      return this.姓 + this.名;
 }
, age: 18}
    ;
    console.LOG("需求一：" + obj1.姓名());
    //高圆圆

此时我们log出来的结果是高圆圆，这个大家都能看懂，但是姓名后面的括号能删掉吗？不能，因为它是函数，那么我们怎么去掉括号呢？下面就有我们的需求二

// 需求二，姓名不要括号也能得出值let obj2 = {
 姓: "高", 名: "圆圆", get 姓名() {
      return this.姓 + this.名;
 }
, age: 18}
    ;
    console.log("需求二：" + obj2.姓名);
    //高圆圆

此时我们使用getter ，不加括号也能得出值。那么我们要怎么改变这个名字呢？

// 需求三：姓名可以被写let obj3 = {
 姓: "高", 名: "圆圆", get 姓名() {
      return this.姓 + this.名;
 }
, set 姓名(xxx){
  this.姓 = xxx[0]  this.名 = xxx.slice(1) }
, age: 18}
    ;
obj3.姓名 = '高媛媛'console.log(`需求三：姓 ${
obj3.姓}
，名 ${
obj3.名}
    `)//高媛媛

有get就有set,setter就是这样用的。我们用 属性值 = xxx 触发 set 函数，姓名就可以被写啦。但是我们在需求三中打出 console.log(obj3) 会得到如下图所示:

如图为什么会显示 姓名:(...) 呢？ 这其实是一个get set，浏览器在显示这个姓名的时候就打印出 姓名:(...) ,这说明我们可以在需求三中对姓名进行读和写，但是并不存在一个叫做姓名的属性，而是有get和set来模拟对姓名进行的操作。

Object.definePRoPErty

在如上例子中，我们在定义对象的时候就直接使用get和set，但是如果对象已经被声明完了，那我们怎么继续加上get呢？我们就要用到Object.defineProperty，还是需求三，我们加入如下代码就可以在定义完之后再加get和set了：

VAR _xxx = 0Object.defineProperty(obj3,'xxx',{
 get(){
  return _xxx }
, set(value){
  _xxx= value }
}
    )

接下来我们就可以解决一开始的问题了：Vue到底对data做了什么？我们举几个例子看看：

let data0 = {
 n: 0}
    

先声明一个data0，需求一：用 Object.defineProperty 定义 n：

let data1 = {
}
Object.defineProperty(data1, 'n', {
 value: 0}
)console.log(`需求一：${
data1.n}
    `)//需求一：0

需求二：n 不能小于 0：

let data2 = {
}
data2._n = 0 // _n 用来偷偷存储 n 的值,默认为0Object.defineProperty(data2, 'n', {
 get(){
  return this._n }
, set(value){
  if(value  0) return  this._n = value }
}
)console.log(`需求二：${
data2.n}
`)//0data2.n = -1console.log(`需求二：${
data2.n}
 设置为 -1 失败`)//0设置为 -1 失败data2.n = 1console.log(`需求二：${
data2.n}
     设置为 1 成功`)//0设置为 1 成功

可是如果对方直接使用data2._n呢？我们能不能做到不在对象上暴露任何能够被访问的东西呢？这时候我们就要使用代理：

let data3 = Proxy({
 data:{
n:0}
 }
) // 括号里是匿名对象，无法访问function proxy({
data}
){
 const obj = {
}
 // 这里的 'n' 写死了，理论上应该遍历 data 的所有 key，这里做了简化 // 因为我怕你们看不懂 Object.defineProperty(obj, 'n', {
   get(){
   return data.n  }
,  set(value){
   if(value0)return   data.n = value  }
 }
) return obj // obj 就是代理}
// data3 就是 objconsole.log(`需求三：${
data3.n}
`)data3.n = -1console.log(`需求三：${
data3.n}
，设置为 -1 失败`)data3.n = 1console.log(`需求三：${
data3.n}
    ，设置为 1 成功`)

可是如果不想用代理，要怎么做呢？

let myData = {
n:0}
let data4 = proxy({
 data:myData }
) // 括号里是匿名对象，无法访问// data3 就是 objconsole.log(`杠精：${
data4.n}
`)//0myData.n = -1console.log(`杠精：${
data4.n}
    ，设置为 -1 失败了吗！？`)

现在这样还是能更改myData，所以我们又有一个需求：就算是用户擅自修改myData，也要拦截：

let myData5 = {
n:0}
let data5 = proxy2({
 data:myData5 }
) // 括号里是匿名对象，无法访问function proxy2({
data}
){
 // 这里的 'n' 写死了，理论上应该遍历 data 的所有 key，这里做了简化 let value = data.n//保存开始的n Object.defineProperty(data, 'n', {
//声明一个新的n  get(){
   return value  }
,  set(newValue){
   if(newValue0)return   value = newValue  }
 }
    )

就加了上面几句，这几句话会监听 data

const obj = {
}
 Object.defineProperty(obj, 'n', {
  get(){
   return data.n  }
,  set(value){
   if(value0)return//这句话多余了   data.n = value  }
 }
)  return obj // obj 就是代理}
// data3 就是 objconsole.log(`需求五：${
data5.n}
`)//0myData5.n = -1console.log(`需求五：${
data5.n}
，设置为 -1 失败了`)//0myData5.n = 1console.log(`需求五：${
data5.n}
，设置为 1 成功了`)//1

当我们写vm = new Vue({ data:myData} )时，Vue做了两件事情：

1. 让vm成为myData的代理(proxy)，可以通过this访问vm
2. 会对myData所有的属性进行监控，为了防止myData的属性变了，vm却不知道，知道了属性变化之后就可以调用render(data)，UI就可以自动刷新

那么我们就可以回到标题了，什么是数据响应式呢？如果一个物体能够对外界的刺激做出反应，那么它就是响应式的。Vue的data是响应式的，const vm = new Vue({ data:{ n:0} } )在这个代码中如果修改vm.n那么UI中的n就会做出相应的更新，Vue通过Object.defineProperty来实现数据响应式。
响应式网页又是什么呢？即如果改变窗口的大小，网页内容会做出相应的改变，那么这个网页就叫响应式网页。

以上就是Vue 数据响应式相关总结的详细内容，更多关于Vue 数据响应式的资料请关注其它相关文章！

• 详解实现vue的数据响应式原理
• vue数据响应式原理知识点总结
• Vue data的数据响应式到底是如何实现的
• 稍微学一下Vue的数据响应式（Vue2及Vue3区别）
• Vue3.0数据响应式原理详解
• 浅谈Vue 数据响应式原理

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！