vue3解构赋值失去响应式引发的思考!

更新日期: 2022-08-02阅读: 46标签: 解构

前言

vue3发布以来经历两年风头正盛,现在大有和react 平分天下的势头,我们知道他是基于proxy 实现响应式的能力, 解决了vue2所遗留下来的一些问题,同时也正由于proxy的特性,也提高了运行时的性能

凡事有利有弊, proxy虽然无敌,但是他也有本身的局限,从而产生一些我认为的弊端(其实就是不符合js语言的自然书写方式,有的人觉得就是个特殊写法,他不属于弊端)

  • 1、 原始值的响应式系统的实现 导致必须将他包装为一个对象, 通过 .value 的方式访问
  • 2、 ES6 解构,不能随意使用。会破坏他的响应式特性

好奇心驱使,研究琢磨了一下,为什么他会造成这两个弊端

原始值的响应式系统的实现

在理解原始值的响应式系统的实现,我们先来温习一下proxy 的能力!

const obj = {
  name: 'win'
}

const handler = {
  get: function(target, key){
    console.log('get--', key)
    return Reflect.get(...arguments)  
  },
  set: function(target, key, value){
    console.log('set--', key, '=', value)
    return Reflect.set(...arguments)
  }
}

const data = new Proxy(obj, handler)
data.name = 'ten'
console.log(data.name,'data.name22')

上述代码中,我们发现,proxy 的使用本身就是对于 对象的拦截, 通过new Proxy 的返回值,拦截了obj 对象

如此一来,当你 访问对象中的值的时候,他会触发 get 方法, 当你修改对象中的值的时候 他会触发 set方法

但是到了原始值的时候,他没有对象啊,咋办呢,new proxy 排不上用场了。

无奈之下,我们只能包装一下了,所以就有了使用.value访问了

我们来看看具体实现

import { reactive } from "./reactive";
import { trackEffects,triggerEffects} from './effect'

export const isObject = (value) => {
return typeof value === 'object' && value !== null
}

// 将对象转化为响应式的
function toReactive(value) {
return isObject(value) ? reactive(value) : value
}

class RefImpl {
public _value;
public dep = new Set; // 依赖收集
public __v_isRef = true; // 是ref的标识
// rawValue 传递进来的值
constructor(public rawValue, public _shallow) {
// 1、判断如果是对象 使用reactive将对象转为响应式的
// 浅ref不需要再次代理
this._value = _shallow ? rawValue : toReactive(rawValue);
}
get value() {
// 取值的时候依赖收集
trackEffects(this.dep)
return this._value;
}
set value(newVal) {
if (newVal !== this.rawValue) {
// 2、set的值不等于初始值 判断新值是否是对象 进行赋值
this._value = this._shallow ? newVal : toReactive(newVal);
// 赋值完 将初始值变为本次的
this.rawValue = newVal
triggerEffects(this.dep)
}
}
}


上述代码,就是对于原始值,的包装,他被包装为一个对象,通过get value 和set value 方法来进行原始值的访问,从而导致必须有.value 的操作 ,这其实也是个无奈的选择

相当于两瓶毒药,你得选一瓶 鱼与熊掌不可兼得

为什么ES6 解构,不能随意使用会破坏他的响应式特性

第一个问题终于整明白了,那么我们来看看最重要的第二个问题,为什么结构赋值,会破坏响应式特性

proxy背景

在开始之前,我们先来讨论一下为什么要更改响应式方案

vue2 基于Object.defineProperty ,但是他有很多缺陷,比如 无法监听数组基于下标的修改,不支持 Map、Set、WeakMap 和 WeakSet等缺陷

其实这些也也不耽误我们开发, vue2到现在还是主流,

我的理解就是与时俱进, 新一代的版本,一定要紧跟语言的特性,一定要符合新时代的书写风格,虽然proxy相对于Object.defineProperty 有很多进步, 但是也不是一点缺点都没有,你比如说 不兼容IE

天底下的事情,哪有完美的呢?

尤大的魄力就在于,舍弃一点现在,博一个未来!

实现原理

在理解了背景之后,我们再来假模假式的温习一下proxy 原理,虽然这个都被讲烂了。

但是,写水文,讲究什么:俩字-连贯

const obj = {
    count: 1
};
const proxy = new Proxy(obj, {
    get(target, key, receiver) {
        console.log("这里是get");
        return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
        console.log("这里是set");
        return Reflect.set(target, key, value, receiver);
    }
});

console.log(proxy)
console.log(proxy.count)

以上代码就是Proxy的具体使用方式,通过和Reflect 的配合, 就能实现对于对象的拦截


如此依赖,就能实现响应式了,大家可以发现,这个obj的整个对象就被拦截了,但是你发现对象在嵌套深一层

比如:

const obj = {
count: 1,
b: {
c: 2
}
};

console.log(proxy.b)
console.log(proxy.b.c)

他就无法拦截了,我们必须要来个包装

const obj = {
a: {
count: 1
}
};

function reactive(obj) {
return new Proxy(obj, {
get(target, key, receiver) {
console.log("这里是get");
// 判断如果是个对象在包装一次,实现深层嵌套的响应式
if (typeof target[key] === "object") {
return reactive(target[key]);
};
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log("这里是set");
return Reflect.set(target, key, value, receiver);
}
});
};
const proxy = reactive(obj);

好了,原理搞完了,我们来正式研究一下

现在列举一下我知道的响应式失去的几个情况:

  • 1、解构 props 对象,因为它会失去响应式
  • 2、 直接赋值reactive响应式对象
  • 3、 vuex中组合api赋值

解构 props 对象,因为它会失去响应式

const obj = {
    a: {
       count: 1
    },
    b: 1
};
    
//reactive 是上文中的reactive
const proxy = reactive(obj);
const {
    a,
    b
} = proxy;
console.log(a)
console.log(b)
console.log(a.count)


上述代码中,我们发现, 解构赋值,b 不会触发响应式,a如果你访问的时候,会触发响应式

这是为什么呢?

别急我们一个个解释?

先来讨论为什么解构赋值,会丢失响应式呢?

我们知道解构赋值,区分原始类型的赋值,和引用类型的赋值,

原始类型的赋值相当于按值传递, 引用类型的值就相当于按引用传递

就相当于

// 假设a是个响应式对象
const a={ b:1}
// c 此时就是一个值跟当前的a 已经不沾边了
const c=a.b

// 你直接访问c就相当于直接访问这个值 也就绕过了 a 对象的get ,也就像原文中说的失去响应式

那为啥a 具备响应式呢?

因为a 是引用类型,我们还记得上述代码中的一个判断吗。如果他是个object 那么就重新包装为响应式

正式由于当前特性,导致,如果是引用类型, 你再去访问其中的内容的时候并不会失去响应式

  // 假设a是个响应式对象
 const a={ b:{c:3}}
 // 当你访问a.b的时候就已经重新初始化响应式了,此时的c就已经是个代理的对象
 const c=a.b

// 你直接访问c就相当于访问一个响应式对象,所以并不会失去响应式

以上就大致解释了为什么解构赋值,可能会失去响应式,我猜的文档中懒得解释其中缘由,索性就定了个规矩,您啊!

就别用了,省的以为是vue的bug,提前改变用户的使用习惯!不惯着

直接赋值reactive响应式对象

我们最初使用vue3的时候,指定会写出以下代码

 const vue = reactive({ a: 1 })
 vue = { b: 2 }

然后就发出疑问reactive不是响应式的吗? 为啥我赋值了以后,他的响应式就没了 ,接着破口大骂,垃圾vue

其实啊,这就是您对于js 原生的概念不清除,其实尤大 已经做了最大的努力,来防止你进行错误操作了

比如,由于解构赋值的问题, 他直接禁止了reactive的解构赋值


当你用解构赋值操作的时候,他直接禁用了

那有人又问了, 为啥props 不给禁用了呢?

因为你的props 的数据可能不是响应式的啊,不是响应式的,我得能啊,尤大他也不能干涉用户使用新语法

所以还是那句话:框架现在的呈现,其实充满了取舍,有时候真是两瓶毒药,挑一瓶!

回归正题,我们再来说说 原生js 语法

首先需要确认的是,原生js 的引用类型的赋值,其实是 按照引用地址赋值!

 // 当reactive 之后返回一个代理对象的地址被vue 存起来,
 // 用一个不恰当的比喻来说,就是这个地址具备响应式的能力
 const vue = reactive({ a: 1 })
 
 //  而当你对于vue重新赋值的时候不是将新的对象赋值给那个地址,而是将vue 换了个新地址
 // 而此时新地址不具备响应式,可不就失去响应式了吗
 vue = { b: 2 }

以上就是reactive失去响应式的解释,所以这个也是很多用户骂骂咧咧的原因。不符合他的使用习惯了,这都是被vue2 培养起来的一代

在这里我要替,尤大说句公道话,人家又没收你钱,还因为他,你有口饭吃,

您自己不能与时俱进,拥抱新事物,那是您没能耐,

这是典型的端起碗吃肉,放下筷子骂娘

vuex中组合API赋值

在vuex 用赋值也可能会失去响应式

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
    return {
      // 在 computed 函数中访问 state
      count: computed(() => store.state.count),

      // 在 computed 函数中访问 getter
      double: computed(() => store.getters.double)
    }
  }
}

以上代码中我们发现store.getters.double 必须用computed 包裹起来,其实道理是一样的,也是变量赋值的原因,在这里我们就不再赘述!

最后

本文为,在使用vue3过程中,采坑后的一些心得,以及探究,希望对各位大佬有帮助,能让各位大佬在工作中升职加薪!

最后,最后,推广下我的vue源码解析,分析的可能不太好,但是都是一行行看的,可能您看了哪天能想起个一句半句, 有所帮助!

源码解析地址

作者:老骥farmer
链接:https://juejin.cn/post/7114596904926740493

链接: https://www.fly63.com/article/detial/11970

ES6解构 - 解构函数参数

解构可以用在函数传递参数的过程中。我先先来看一下没有用到解构参数的例子,之后我们把它改造成解构参数。在这个例子里面我们使用解构参数改写了函数声明

5个JS解构有趣的用途

交换变量:通常交换两个变量的方法需要一个额外的临时变量,来看看例子;访问数组中元素有种场景,咱们可能有一个为空的项数组。并且希望访问数组的第一个、第二个或第n个项

ES6+ 中对象解构小技巧

解构的同时赋予初始值(使用 =),2.使用的变量名与解构目标的key不一致或要使用多个变量(使用 : ),解构中的 rest(变量由多变少) 与spread(变量由少变多)

Js变量的解构赋值

解构:从数组和对象中提取值,对变量进行赋值。数组的解构赋值1.数组的元素是按次序排列的,变量的取值由它的位置决定;对象的解构赋值1.对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

ES6 解构 destructuring

解构的作用:简化书写长度,提升开发效率。在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上。可能这个数据返回的对象或数组。

ES6 中变量的解构赋值

解构: ES6 中允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构(Destructuring).本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予相应的值。

ES6变量的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。它在语法上比ES5所提供的更加简洁、紧凑、清晰。它不仅能减少你的代码量,还能从根本上改变你的编码方式。

5个实用JS解构用法

temp是一个临时变量,它先保存a的值。然后把b的值赋值给a,接着将temp值赋给 b。如果使用解构的方式会更简单,不需要什么鬼的 temp 变量。

ES6变量的解构赋值、字符串的新增方法

解构可以用于数组,还可以用于对象。对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。

聊聊es6中的解构

es6新增了一种从数组或者对象中获取指定元素的方式,这种方式就是我们今天要说的解构。在有解构之前呢,我们获取数组中的指定元素通常是根据索引去做的:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!