专栏首页大前端开发《Vue3.0抢先学》系列之:响应式之Ref vs. Reactive

《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: `
        <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响应式的东西还有很多可以讲,后面的文章见!

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.jianshu.com/u/d0dea96b2432复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 《Vue3.0抢先学》系列之:更多响应式API示例

    这几天,我们陆续学习了解了关于Vue3.0的一些新特性,尤其是新的Composition API的用法。这套新的API中最重要、最核心的部分,恐怕就是实现响应式...

    一斤代码
  • vue3.0新特性初体验(一)

    “关注 前端开发社区 ,回复“ 1” 即可加入 前端技术交流群,回复 “ 2” 即可免费领取500G前端干货!

    前端老道
  • vue3.0新特性初体验(一)

    自从尤大的3.0横空出世以来,备受关注。感觉写法越来越像React,不过尤大也说了,其中一部分是受到了React hooks的思想影响。本系列文章将先带大家了解...

    前端老道
  • 使用Vue3.0,我收获了哪些知识点(一)

    近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的阅读,你将可以自己完成Vue...

    用户1308196
  • Vue3 学习笔记 —— (一)深入理解组合式 API

    Vue3 是向下兼容 Vue2 API 的,但是 Vue3 中提供了一种全新的 Composition API

    Gorit
  • [前端学习]大数据全栈工程师之一文快速上手vue3

    下面是学习Vue3的成果,一些案例,能让你能快速了解什么是Vue?Vue2.x和Vue3.x的区别在哪里?:

    ChinaManor
  • ❤️[前端学习]大数据全栈工程师之一文快速上手vue3❤️

    下面是学习Vue3的成果,一些案例,能让你能快速了解什么是Vue?Vue2.x和Vue3.x的区别在哪里?:

    ChinaManor
  • 通过10个实例小练习,快速入门熟练 Vue3 核心新特性

    Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了。

    夜尽天明
  • 适合Vue用户的React教程,你值得拥有(二)

    上周小编我写了 适合Vue用户的React教程,你值得拥有,得到了小伙伴们的一致好评,今天这篇文章是这一系列的第二篇文章。今年的9月18日是九一八事变89周年,...

    用户1308196
  • 我在react里写vue3 ? 还写了自定义hooks和Hoc构建了响应式 !

    自从vue3.0正式发布之后,vue3.0核心响应式部分被单独抽离成@vue/reactivity包,也就是说,我们可以脱离vue框架之外,单独使用@vue/r...

    用户6835371
  • Vue3.0 新特性全面探索 - 基于 Composition Api 快速构建实战项目

    建议配合 Visual Studio Code 和 Vue 3 Snippets 代码插件食用Ψ( ̄∀ ̄)Ψ。

    wscats
  • 使用Vue3.0,我收获了哪些知识点(二)

    最近在工作之余一直学习Vue3.0相关知识,虽然Vue3.0至今还是rc版,但这并不影响我们去学习。今天这篇文章是我关于Vue3.0的第四篇文章。在前文中我们讲...

    用户1308196
  • Vue3.0入门 + Vant3.0移动端实践(二)轮播图模块封装及首页完善

    接着上一篇的来,上一篇介绍了环境搭建及做好了底部的导航栏模块,接下来继续完善首页。

    杨永贞
  • vue3.0 源码解析三 :watch和computed流程解析

    之前我们分两个章节详细的介绍了vue3.0 数据相应原理,知道了用proxy代替Object.defineProperty 的利与弊,了解了依赖收集和派发更新的...

    用户6835371
  • Vue3.x+Vant3仿微信聊天|朋友圈

    2021已来临,Vue3开发也要步入正轨了。今天为大家带来的是全新开发的Vue3.x实战聊天室项目Vue3_Chatroom,基于vue3+vant3+vuex...

    andy2018
  • Vue3.0来了

    Vue这次3.0发布了,博客平台、公众号、朋友圈基本都有这么一条新闻,可见大家对其期待程度,毕竟Vue 有 130 万的使用者嘛,萌新不知不觉感觉瑟...

    前端黑板报
  • Vue3.0 beta版学习笔记

    https://github.com/vuejs/vue-next

    用户7572539
  • Vue3.0 beta源码学习笔记(一)

    在Vue3.0中将响应式处理放到reactivity文件夹中,然后将其中的reactive,effect,computed, ref各自抽离分模块编写。首先记录...

    用户7572539
  • 《Vue3.0抢先学》系列之:使用Composition API

    在上一篇文章中,我们大致了解了如何使用Vue3.0编写一个简单的计数器程序。不过,正如熟悉Vue2.x的朋友所看到的,我们用Vue3.0实现出来的代码和Vue2...

    一斤代码

扫码关注云+社区

领取腾讯云代金券