《Vue3.0抢先学》系列之：响应式之Ref vs. Reactive
《Vue3.0抢先学》系列之：响应式之Ref vs. Reactive
一斤代码
发布于 2019-10-29 16:00:22
发布于 2019-10-29 16:00:22
在上文中，我们使用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: `
<div class="counter-display">
<span class="counter-label">恭喜你，你已经写了</span>
<span class="counter-text">{{ state.count }}</span>
<span class="counter-label">斤代码！</span>
</div>
<div class="counter-btns">
<button class="btn" @click="increase">写一斤</button>
<button class="btn" @click="reset">删库啦</button>
</div>
`,
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响应式的东西还有很多可以讲，后面的文章见！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.10.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
