《Vue3.0抢先学》系列之：响应式之Ref vs. Reactive

在上文中，我们使用Vue3.0最新的Composition API改写了由Options API写成的计数器示例。我们发现，原先的数据响应式监听的用法发生了变化，原先通过data中声明的响应式属性，现在替换成由 ref 函数来创建：

// Vue2.x Options API 写法
data() {
  return {
    count: 0
  }
}

// Vue3.x Composition API 写法
const count = ref(0)

这种新的写法，有点React Hooks的味道了。ref 函数传入一个值作为参数，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值。

其实，除了 ref 函数，Vue3.0中还提供了另外一个可以创建响应式对象的函数，那就是 reactive 函数。如果我们的示例程序用 reactive 函数来改写，那么会是这样子的：

const { createApp, reactive } = Vue

// 计数器组件
const Counter = {
    template: `
        

            恭喜你，你已经写了
            {{ state.count }}
            斤代码！
        
        

            写一斤
            删库啦
        
    `,

    setup() {
        const countOps = useCount()
        return { ...countOps }
    }
}

function useCount() {
    const state = reactive({ count: 0 })
    const increase = () => { state.count++ }
    const reset = () => { state.count = 0 }
    return { state, increase, reset }
}

和使用 ref 的时候变化不是很大，只是把 count 作为一个对象的属性进行包装了，看起来是不是也很容易理解？

然而，你可能会有疑问，为什么要提供 ref 和 reactive 两种方式呢？其实，这是和为了适应不同人的编程风格有关。要理解这点，让我们先来看2段实现了同样功能的代码。

风格一：

let x = 0
let y = 0

function updatePos(e) {
  x = e.pageX
  y = e.pageY
}

风格二：

const pos = { x: 0, y: 0 }

function updatePos(e) {
  pos.x = e.pageX
  pos.y = e.pageY
}

从上面的2段代码观察到，两者的主要区别在于：风格一，我们使用了2个变量来存储x、y坐标值；而风格二则将x、y值封装于一个对象的2个属性中存储。这两种风格的代码工作的都没问题，关键在于个人或团队的偏好：使用单独的变量还是使用对象封装。

而前面说的 ref 和 reactive 的区别，正是和这个有关。我们可以把使用 ref 看做是风格一，使用 reactive 对应风格二：

// 风格一
const x = ref(0)
const y = ref(0)
const isDisplay = ref(false)

// 风格二
const state = reactive({
  x: 0,
  y: 0,
  isDisplay: false
})

看了今天的文章，是不是稍微有点头绪了？关于Vue3.0响应式的东西还有很多可以讲，后面的文章见！

关注首发公众号：默碟

最新推荐阅读：
《Vue3.0抢先学》系列文章