Vue3中reactive和ref的区别有哪些

这篇文章主要讲解了“Vue3中reactive和ref的区别有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3中reactive和ref的区别有哪些”吧！

成都网络公司-成都网站建设公司创新互联公司十余年经验成就非凡，专业从事成都网站制作、网站设计，成都网页设计，成都网页制作，软文发布平台，一元广告等。十余年来已成功提供全面的成都网站建设方案，打造行业特色的成都网站建设案例，建站热线：13518219792，我们期待您的来电！

vue2的响应式是通过Object.defineProperty方法，劫持对象的getter和setter，在getter中收集依赖，在setter中触发依赖，但是这种方式存在一些缺点：

由于是遍历递归监听属性，当属性过多或嵌套层级过深时会影响性能
无法监听对象新增的属性和删除属性，只能监听对象本身存在的属性，所以设计了$set和$delete
如果监听数组的话，无法监听数组元素的增减，只能监听通过下标可以访问到的数组中已有的属性，由于使用Object.defineProperty遍历监听数组原有元素过于消耗性能，vue放弃使用Object.defineProperty监听数组，而采用了重写数组原型方法的方式来监听对数组数据的操作，并用$set和splice 方法来更新数组，$set和splice会调用重写后的数组方法。

vue3响应式的实现

Proxy对象

针对Object.defineProperty的弊病，在 ES6 中引入了一个新的对象——Proxy（对象代理）

Proxy 对象：

用于创建一个对象的代理，主要用于改变对象的某些默认行为，Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。基本语法如下：

/*
 * target: 目标对象
 * handler: 配置对象，用来定义拦截的行为
 * proxy: Proxy构造器的实例
 */
 var proxy = new Proxy(target,handler)

拦截get，取值操作

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

可以拦截的操作有：

函数	操作
get	读取一个值
set	写入一个值
has	in操作符
deleteProperty	Object.getPrototypeOf()
getPrototypeOf	Object.getPrototypeOf()
setPrototypeOf	Object.setPrototypeOf()
isExtensible	Object.isExtensible()
preventExtensions	Object.preventExtensions()
getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor()
defineProperty	Object.defineProperty
ownKeys	Object.keys() Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()
apply	调用一个函数
construct	new一个函数

那么使用Proxy可以解决Vue2中的哪些问题，总结一下：

Proxy是对整个对象的代理，而Object.defineProperty只能代理某个属性。
对象上新增属性，Proxy可以监听到，Object.defineProperty不能。
数组新增修改，Proxy可以监听到，Object.defineProperty不能。
若对象内部属性要全部递归代理，Proxy可以只在调用的时候递归，而Object.definePropery需要一次完成所有递归，Proxy相对更灵活，提高性能。

递归代理

var target = {
  a:1,
  b:{
    c:2,
    d:{e:3}
  }
}
var handler = {
  get:function(target, prop, receiver){
    console.log('触发get:',prop)
    return Reflect.get(target,prop)
  },
  set:function(target,key,value,receiver){
    console.log('触发set:',key,value)
    return Reflect.set(target,key,value,receiver)
  }
}
var proxy = new Proxy(target,handler)
 
proxy.b.d.e = 4 
// 输出  触发get:b , 由此可见Proxy仅代理了对象外层属性。

以上写法只代理了对象的外层属性，所以要想深层代理整个对象的所有属性，需要进行递归处理：

var target = {
  a:1,
  b:{
    c:2,
    d:{e:3}
  },
  f: {z: 3}
}
var handler = {
  get:function(target, prop, receiver){
    var val = Reflect.get(target,prop)
    console.log('触发get:',prop)
    if(val !== null && typeof val==='object') {
        return new Proxy(val,handler) // 代理内层属性
    }
    return Reflect.get(target,prop)
  },
  set:function(target,key,value,receiver){
    console.log('触发set:',key,value)
    return Reflect.set(target,key,value,receiver)
  }
}
var proxy = new Proxy(target,handler)
 
proxy.b.d.e = 4 
// 输出  触发get b,get d, get e

从递归代理可以看出，如果要代理对象的内部属性，Proxy可以只在属性被调用时去设置代理（惰性），访问了e，就仅递归代理b下面的属性，不会额外代理其他没有用到的深层属性，如z。

关于 `Reflect` 的作用和意义

规范语言内部方法的所属对象，不全都堆放在Object对象或Function等对象的原型上。如

Function.prototype.apply
Object.defineProperty

修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。
让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。

vue3的`reative`和`ref`

Vue3 的 reactive 和 ref 正是借助了Proxy来实现。

reactive

作用：创建原始对象的响应式副本，即将「引用类型」数据转换为「响应式」数据

参数： reactive参数必须是对象或数组

reative函数实现：

// 判断是否为对象
const isObject = val => val !== null && typeof val === 'object';
// 判断key是否存在
const hasOwn = (target, key) => Object.prototype.hasOwnProperty.call(target, key);

export function reactive(target) {
    // 首先先判断是否为对象
    if (!isObject(target)) return target;

    const handler = {
        get(target, key, receiver) {
            console.log(`获取对象属性${key}值`)
            // 收集依赖 ...
            const result = Reflect.get(target, key, receiver)
            // 深度监听（惰性）
            if (isObject(result)) {
                return reactive(result);
            }
            return result;
        },

        set(target, key, value, receiver) {
            console.log(`设置对象属性${key}值`)

            // 首先先获取旧值
            const oldValue = Reflect.get(target, key, reactive)

            let result = Reflect.set(target, key, value, receiver);
            
            if (result && oldValue !== value) {
                // 更新操作 ...
            }
            return result
        },

        deleteProperty(target, key) {
            console.log(`删除对象属性${key}值`)

            // 先判断是否有key
            const hadKey = hasOwn(target, key)
            const result = Reflect.deleteProperty(target, key)

            if (hadKey && result) {
                // 更新操作 ...
            }

            return result
        },
        
        // 其他方法
        // ...
    }
    return new Proxy(target, handler)
}

const obj = { a: { b: { c: 6 } } };
const proxy = reactive(obj);

proxy.a.b.c = 77;

// 获取对象属性a值
// 获取对象属性b值
// 设置对象属性c值 77

至此，引用类型的对象我们已经可以把它转化成响应式对象了，Proxy对象只能代理引用类型的对象，对于基本数据类型如何实现响应式呢？

vue的解决方法是把基本数据类型变成一个对象：这个对象只有一个value属性，value属性的值就等于这个基本数据类型的值。然后，就可以用reative方法将这个对象，变成响应式的Proxy对象。

实际上就是： ref(0) --> reactive( { value:0 })

ref

作用：把基本类型的数据变为响应式数据。

参数：

1.基本数据类型

2.引用类型

3.DOM的ref属性值

ref 实现 Vue3 源码

export function ref(value?: unknown) {
  return createRef(value, false)
}

function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

class RefImpl{
  private _value: T
  private _rawValue: T

  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = __v_isShallow ? value : toRaw(value)
    this._value = __v_isShallow ? value : toReactive(value)
  }

  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    const useDirectValue =
      this.__v_isShallow || isShallow(newVal) || isReadonly(newVal)
    newVal = useDirectValue ? newVal : toRaw(newVal)
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = useDirectValue ? newVal : toReactive(newVal)
      triggerRefValue(this, newVal)
    }
  }
}

大体思路就是，调用ref函数时会new 一个类，这个类监听了value属性的 get 和 set ，实现了在get中收集依赖，在set中触发依赖，而如果需要对传入参数深层监听的话，就会调用我们上面提到的reactive方法。

即：

ref(0); // 通过监听对象（类）的value属性实现响应式
ref({a: 6}); // 调用reactive方法对对象进行深度监听

根据上面的思路我们可以自己来简单实现下：

// 自定义ref
function ref(target) {
  const result = { // 这里在源码中体现为一个类 RefImpl
    _value: reactive(target), // target传给reactive方法做响应式处理，如果是对象的话就变成响应式
    get value () {
      return this._value
    },
    set value (val) {
      this._value = val
      console.log('set value 数据已更新, 去更新界面')
    }
  }
 
  return result
}
 
// 测试
const ref = ref(9);
ref.value = 6;

const ref = ref({a: 4});
ref.value.a = 6;

ref 方法包装的数据，需要使用.value 来访问，但在模板中不需要，Vue解析时会自动添加。

感谢各位的阅读，以上就是“Vue3中reactive和ref的区别有哪些”的内容了，经过本文的学习后，相信大家对Vue3中reactive和ref的区别有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

当前文章：Vue3中reactive和ref的区别有哪些
地址分享：http://chengdu.cdxwcx.cn/article/iicogc.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

Vue3中reactive和ref的区别有哪些

vue3响应式的实现

Proxy对象

递归代理

关于 `Reflect` 的作用和意义

vue3的`reative`和`ref`

reactive

ref

ref 实现 Vue3 源码

其他资讯

使用navicat工具导出mysql表的步骤

Python如何网络编程实现TCP和UDP连接

如何解决tp框架引入tcpdf插件步骤以及TCPD中文乱码的问题

Go语言怎么实现stoptheworld

虚拟主机上线项目的方法

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

Vue3中reactive和ref的区别有哪些

vue3响应式的实现

Proxy对象

递归代理

关于 Reflect 的作用和意义

vue3的reative和ref

reactive

ref

ref 实现 Vue3 源码

其他资讯

使用navicat工具导出mysql表的步骤

Python如何网络编程实现TCP和UDP连接

如何解决tp框架引入tcpdf插件步骤以及TCPD中文乱码的问题

Go语言怎么实现stoptheworld

虚拟主机上线项目的方法

成都网站建设设计将想法与焦点和您一起共享

关于 `Reflect` 的作用和意义

vue3的`reative`和`ref`