Vue3（四）reactive vs ref（上）

reactive

我们先定义一个 reactive 然后看看到底是什么样子的

    setup() {
        const person = reactive({
          name: 'jyk',
          age: 100
        })

        console.log('reactive:', person)
        console.log('reactive-Type:', typeof person)
        console.log('reactive-call:', Object.prototype.toString.call(person))
        
        return {
          person
        }
      }

看看真面目：

001reactive结构.png

• Proxy
  Proxy 是ES6提供的一个“代理器”，可以拦截对对象的访问，拦截后就可以做想做的事情了，比如在vue里面就利用这个特性实现数据的响应性。

• Target
  是我们想要操作的对象，这里只能是对象（包括数组），但是不能是简单类型，比如number、bool、string等都不支持。

• Handler
  可以设置拦截代码，比如get和set，Vue又增加了一些方法实现相关的功能。

• const
  reactive 可以用 const 来定义，但是不能直接整体赋值，整体赋值的话会报错，改用let定义的话，也是不能整体赋值的，因为整体赋值相当于改了类型，不会再响应了（严格的说，原本具有相应性的被丢弃了）。

ref

我们再来看看ref的情况

    setup() {
        // 简单类型
        const string = Vue.ref('jyk')

        // 对象
        const person = Vue.ref({
          name: 'jyk',
          age: 100
        })

        console.log('ref-string:', string)
        console.log('ref-object:', person)

        return {
          person,
          string
        }
      }

打印出来看看：

对象类型：

002存放object的ref结构.png

不知道是否和你想象的一致。

• value
  这里放的是我们需要的数据，如果是对象类型的话，会自动变成Proxy，那么是不是可以说，ref 把reactive包含起来了呢？

简单类型：

003存放string的ref的结构.png

这个就简单多了，value里面就是我们设置的字符串。然后用其他方式实现了数据的响应性，具体怎么实现的不太清楚。

reactive和ref如何选择？

对比一下我们就会发现，ref 比 reactive 更全能，因为reactive能做的事情，ref 都能做，因为 ref 的 value 可以是Proxy。
而且ref.value 可以直接整体赋值，这个在一些情况下还是非常方便的。

ref唯一麻烦的就是，用的时候要“.value”，这个有点别扭。

另外还有一个隐藏的小麻烦，不过一般不会遇到。

• 简单粗暴的方式
  不管三七二十一 全都用ref，功能全、啥都能装、可以直接赋值，风格统一，全都.value就好，不用区分是不是reactive的。

• 精打细算的方式
  按照场景需求，该用啥就用啥。这个就要看具体情况了，具体问题具体分析嘛。