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: `
{
{obj.b}}
`,
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 的处理逻辑中