背景

我们知道ref函数和reactive函数用于实现数据的响应性。

ref

在 Vue 3中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示：

import { ref } from 'vue'
const count = ref(0);
console.log('count ref:', count);
console.log('count ref value :', count.value);

我们在控制台看到输出结果如下：

ref 接收参数并将其包裹在一个带有 value 属性的对象中返回，然后可以使用该属性访问或更改响应式变量的值，比如上面的代码我们使用count.value去修改值，如下：

count.value = 1;
console.log('count ref value :', count.value);

得到的结果当然就是count.value = 1.

ps: Vue3 中使用的函数都需要通过import 引用。

总结：

ref 为我们的值创建了一个响应式引用，当数据发生改变时视图也会更新。

更多信息可查看官方文档 ref 介绍

reactive

reactive 返回对象的响应式副本, 它将解包所有深层的 refs，同时维持 ref 的响应性。一般我们用来实现对象或者数组的响应性。

示例

修改用户名后视图实时更新。

<template><div class="home"><div>{{userInfo.name}}</div><button @click="changeUserName">修改名称</button></div>
</template><script lang="ts">
import { defineComponent, ref, reactive } from 'vue';export default defineComponent({name: 'Home',setup(props, context) {const userInfo = reactive({name: '张三',});function changeUserName() {userInfo.name = '李四';}return {userInfo,changeUserName,};},
});
</script>

总结

对于基本数据类型，我们常用ref函数来实现数据的响应性，而对于复杂类型的数据，我们常用reactive函数来实现数据的响应性。

在使用ref时我们还会遇到其他函数，如：unref、toRef、toRefs、isRef，我们下一节介绍

vue3基础-响应式 API 之 ref 和 reactive相关推荐

vue3基础-响应式 API 之 unref、toRef、toRefs、isRef
unref 如果参数是一个 ref,则返回内部值,否则返回参数本身. toRef 将对象的某个属性转为响应式,修改值时原始值也会改变,但是值改变不会更新视图使用示例: <template> ...
vue3 响应式 API 之 ref
ref 是最常用的一个响应式 API,它可以用来定义所有类型的数据,包括 Node 节点和组件. 没错,在 Vue 2 常用的 this.$refs.xxx 来取代 document.querySel ...
【Vue3源码学习】响应式源码解析：reactive、effect、ref
源码版本 Vue3.2.24 废话不多说,直接开始!!! reactive响应式源码地址:packages/reactivity/reactive.ts 先看一下在 Vue3 中定义的几个用来标记目 ...
vue3响应式原理之Ref
theme: fancy 一. Ref 用法这是 ref 最基本的用法,返回来的count是一个响应式的代理值 const count = ref(0) 二. 实现 1. ref 函数我们调用的r ...
vue3.0 Beta发布，顺便来看看Vue3 的响应式和以前有什么区别
前言 vue 3.0 Beta 测试版发布可以通过vue-cli-plugin-vue-next创建一个vue3.0的beta项目. 目前尚不支持IE11,后期可能会处理兼容版本. 对vue3源码有 ...
vue3.0响应式源码实践,vue3.0初体验
vue3.0响应式源码实践,vue3.0初体验镇楼图--杀生丸.jpg vue-next(vue3.0预体验) 1. 使用: 2.vue-next的目录结构 3. reactive内部实现作者上篇 ...
Vue3的响应式原理解析
Vue3的响应式原理解析 Vue2响应式原理回顾 // 1.对象响应化:遍历每个key,定义getter.setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const origi ...
Vue.js 3.0 响应式 API 比 2.x 好在哪儿？
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...
响应式API的设计、实现和应用
\ 本文要点: \\ 在进行响应式设计之前,确保你的项目的确适合使用响应式编程\\t 响应式方法总会返回一些什么,因为它们构建了一个执行框架,但是不是开始去执行\\t 响应式编程允许你声明操作之间的状 ...

vue3基础-响应式 API 之 ref 和 reactive

背景

ref

reactive

示例

总结

vue3基础-响应式 API 之 ref 和 reactive相关推荐

最新文章

热门文章