vue 存储对象 不要监听_Vue数据响应式

一、setter和getter

var o = {
  property: function ([parameters]) {},
  get property() {},
  set property(value) {},
};

let obj3 = {
  姓: "高",
  名: "圆圆",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx){
    this.姓 = xxx[0]
    this.名 = xxx.slice(1)
  },
  age: 18
};

obj3.姓名 = '高媛媛'

console.log(`需求三：姓 ${obj3.姓}，名 ${obj3.名}`)

// 总结：setter 就是这样用的。用 = xxx 触发 set 函数

二、Object.defineProperty()方法

var o = {}; // 创建一个新对象

// 在对象中添加一个属性与数据描述符的示例
Object.defineProperty(o, "a", {
  value : 37,
});
// 对象 o 拥有了属性 a，值为 37

思考new Vue 对数据做了什么

let data0 = {
  n: 0
}

// 需求一：用 Object.defineProperty 定义 n
let data1 = {}

Object.defineProperty(data1, 'n', {
  value: 0
})

console.log(`需求一：${data1.n}`)

// 总结：这煞笔语法把事情搞复杂了？非也，继续看。

// 需求二：n 不能小于 0
// 即 data2.n = -1 应该无效，但 data2.n = 1 有效

let data2 = {}

data2._n = 0 // _n 用来偷偷存储 n 的值

Object.defineProperty(data2, 'n', {
  get(){
    return this._n
  },
  set(value){
    if(value < 0) return
    this._n = value
  }
})

console.log(`需求二：${data2.n}`)
data2.n = -1
console.log(`需求二：${data2.n} 设置为 -1 失败`)
data2.n = 1
console.log(`需求二：${data2.n} 设置为 1 成功`)

// 抬杠：那如果对方直接使用 data2._n 呢？
// 算你狠

// 需求三：使用代理

let data3 = proxy({ data:{n:0} }) // 括号里是匿名对象，无法访问

function proxy({data}/* 解构赋值，别TM老问 */){
  const obj = {}
  // 这里的 'n' 写死了，理论上应该遍历 data 的所有 key，这里做了简化
  // 因为我怕你们看不懂
  Object.defineProperty(obj, 'n', { 
    get(){
      return data.n
    },
    set(value){
      if(value<0)return
      data.n = value
    }
  })
  return obj // obj 就是代理
}

// data3 就是 obj
console.log(`需求三：${data3.n}`)
data3.n = -1
console.log(`需求三：${data3.n}，设置为 -1 失败`)
data3.n = 1
console.log(`需求三：${data3.n}，设置为 1 成功`)

// 杠精你还有话说吗？
// 杠精说有！你看下面代码
// 需求四

let myData = {n:0}
let data4 = proxy({ data:myData }) // 括号里是匿名对象，无法访问

// data3 就是 obj
console.log(`杠精：${data4.n}`)
myData.n = -1
console.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(newValue<0)return
      value = newValue
    }
  })
  // 就加了上面几句，这几句话会监听 data

  const obj = {}
  Object.defineProperty(obj, 'n', {
    get(){
      return data.n
    },
    set(value){
      if(value<0)return//这句话多余了
      data.n = value
    }
  })
  
  return obj // obj 就是代理
}

// data3 就是 obj
console.log(`需求五：${data5.n}`)
myData5.n = -1
console.log(`需求五：${data5.n}，设置为 -1 失败了`)
myData5.n = 1
console.log(`需求五：${data5.n}，设置为 1 成功了`)


// 这代码看着眼熟吗？
// let data5 = proxy2({ data:myData5 }) 
// let vm = new Vue({data: myData})

// 现在我们可以说说 new Vue 做了什么了

下面是对上面代码的总结（重点）

Object.defineProperty的作用：

• 可以给对象添加属性value
• 可以给对象添加getter/setter, getter/setter用来对属性的读写进行监控

代理模式

代理的设计模式，意思为vm实例负责对myData对象属性的读写。

即vm就是myData的代理,类似于房屋中介，住户通过中介和房东交流。

例如通常vm.n来操作myData.n,而不是直接操作myData.n

原理

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

• 核心目的：对于data的任何变动，都得知情，从而重新进行渲染
• 会让vm成为myData的代理，即proxy
• 同时会对myData的所有属性进行监控
• 监控的原因是，为了防止myData属性改变的时候，vm不知情。如果通知vm了，就可以进行操作，然后调用render(data)方法，渲染视图，即UI=render(data)
• 全程对data进行修改，并没有复制和生成新的data，只有覆盖修改
• 如果data有多个属性,n,m,k,那么就会有get n/get m /get k等

三、数据响应式

数据响应式是指当数据改变时，UI或者视图能够做出相应的反应。比如我用力打你一拳，你会喊痛这就是响应式。

1、vue的data属于响应式

在const vm = new Vue({data:{n:0}})中，如果我修改vm.n,那么UI中的n就会响应我

2、Vue的数据响应式

Vue响应式系统即对数据进行修改时，视图会进行更新；当把JS对象传入Vue实例作为 data 选项，Vue将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，getter/setter 对用户不可见，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。

3、响应式网页

响应式网页是指当用户改变窗口大小，网页内容会做出响应

四、Object.defineProperty有问题或者说Object.defineProperty()实现数据响应的缺点

Object.defineProperty在添加属性时必须要属性名，才能监听&代理

Object.defineProperty(obj,'n',{...})

必须要有个‘n’才能监听&代理obj.n

如果队友没给你n怎么办

import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

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; //请问，页面中会显示 1 吗？
    }
  }
}).$mount("#app");

//请问，页面中会显示 1 吗？
//答案是不会，因为vue没法监听一开始就不存在的obj.b
//它只会检查obj在不在，所以obj.b不存在，他也不会报错
下条代码出解决办法

总结：

• 检测不到对象属性的添加和删除：当你在对象上新加了一个属性newProperty，当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的)。
• vue.$set是能让vue知道你添加了属性, 它会给你做处理，$set内部也是通过调用Object.defineProperty()去处理的 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。
• 当data中数据比较多且层级很深的时候，会有性能问题，因为要遍历data中所有的数据并给其设置成响应式的。

解决办法

1、把key都声明好，后面不在加属性（弱智的写法）

2、使用vue.set和this.$set

vue.set和this.$set的作用

1、新增key

2、自动创建代理和监听（在没有的情况下）

3、触发UI更新（不会立刻更新）

methods:{
    add({
        vue.set(this.obj, 'b', 1)
        // 或者
        this.$set(this.obj, 'b', 1)
    }
}

五、数组新增加key（也用set方法）

由于数组的长度可以一直增加，没有办法提前把数组的key都声明出来，Vue也不能直接检测新增的下标。可以使用set来新增key, 但不会自动添加监听和代理， 但是尤雨溪纂改了数组的7个API来对数组进行操作，这7个API会自动处理监听和代理，并更新UI。

推荐使用这7个API来新增数组key:（自行官网查看）

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

篡改原理

class VueArray extends Array {
  push(...args) {
    const oldLength = this.length; // this
    super.push(...args);
    console.log(" push ");
    for (let i = oldLength; i < this.length; i++) {
      Vue.set(this, i, this[i]);
      // key Vue
    }
  }
}

六、vue3中的Proxy

什么是代理呢，可以理解为在对象之前设置一个“拦截”，当该对象被访问的时候，都必须经过这层拦截。意味着你可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理，返回你想返回的数据结构。

ES6 原生提供 Proxy 构造函数，MDN上的解释为：Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

const p = new Proxy(target, handler);

• target： 所要拦截的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
• handler：一个对象{}，定义要拦截的行为，不可以写null

const p = new Proxy({}, {
    get(target, propKey) {
        return '哈哈，你被我拦截了';
    }
});

console.log(p.name);
// 哈哈，你被我拦截了

注意Proxy是用来操作对象的。代理的目的是为了拓展对象的能力。

再看一个例子 我们可以实现一个功能：不允许外部修改对象的name属性。

const p = new Proxy({}, {
    set(target, propKey, value) {
        if (propKey === 'name') {
            throw new TypeError('name属性不允许修改');
        }
        // 不是 name 属性，直接保存
        target[propKey] = value;
    }
});
p.name = 'proxy';
// TypeError: name属性不允许修改
p.a = 111;
console.log(p.a); // 111

总结：

• Proxy是用来操作对象的，Object.defineProperty() 是用来操作对象的属性的。
• vue2.x使用 Object.defineProperty()实现数据的响应式，但是由于 Object.defineProperty()是对对象属性的操作，所以需要对对象进行深度遍历去对属性进行操作。
• vue3.0 用 Proxy 是对对象进行拦截操作，无论是对对象做什么样的操作都会走到 Proxy 的处理逻辑中