Vue3响应式API ref和reactive

在vue3中,有两个重要的api分别是ref 和reactive
使用方法如下

import { reactive, ref } from 'vue';setup(){let student = reactive({name: "zhangsan",age: 18})let count = ref(0);return {count,student}
}

基本数据类型使用ref对象创建响应式,复杂数据类型使用reactive创建响应式,
在js文件中操作ref对象创建的值需要使用 .value 在模板中则可以直接使用,因为在模板中会自动添加.value
其实ref对象也可以传入一个复杂数据类型,当传入一个复杂数据类型时在内部会自动将.value的值转换为一个reactive对象,如下

let a = {name: "zhangsan",age: 18
}
let student = reactive(a)
let refStudent = ref(a)
//student=== refStudent.value      ==> true

Vue3响应式API ref和reactive相关推荐

vue3之实现响应式数据ref和reactive
用途 ref.reactive都是vue3提供实现响应式数据的方法 ref() 接受一个内部值,返回一个响应式的.可更改的ref对象,此对象只有一个指向其内部的属性.value ref可以说是简化版的 ...
vue3 响应式 API 之 ref
ref 是最常用的一个响应式 API,它可以用来定义所有类型的数据,包括 Node 节点和组件. 没错,在 Vue 2 常用的 this.$refs.xxx 来取代 document.querySel ...
VUE3 响应式 API 之 toRef 与 toRefs
相信各位开发者看到这里时,应该已经对 ref 和 reactive API 都有所了解了,为了方便开发者使用, Vue 3 还推出了两个与之相关的 API : toRef 和 toRefs ,都是用于 ...
Vue.js 3.0 响应式 API 比 2.x 好在哪儿？
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...
Vue3 响应式原理
如何实现响应式作为一个高阶的概述,我们需要做到以下几点: 当一个值被读取时进行追踪当某个值改变时进行检测重新运行代码来读取原始值 Vue如何知道哪些代码在执行为了能够在数值变化时,随时运行我们 ...
响应式API的设计、实现和应用
\ 本文要点: \\ 在进行响应式设计之前,确保你的项目的确适合使用响应式编程\\t 响应式方法总会返回一些什么,因为它们构建了一个执行框架,但是不是开始去执行\\t 响应式编程允许你声明操作之间的状 ...
vue3基础-响应式 API 之 ref 和 reactive
背景我们知道ref函数和reactive函数用于实现数据的响应性. ref 在 Vue 3中,我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用,如下所示: import { ref ...
vue3响应式原理之Ref
theme: fancy 一. Ref 用法这是 ref 最基本的用法,返回来的count是一个响应式的代理值 const count = ref(0) 二. 实现 1. ref 函数我们调用的r ...
vue3基础-响应式 API 之 unref、toRef、toRefs、isRef
unref 如果参数是一个 ref,则返回内部值,否则返回参数本身. toRef 将对象的某个属性转为响应式,修改值时原始值也会改变,但是值改变不会更新视图使用示例: <template> ...

Vue3响应式API ref和reactive

Vue3响应式API ref和reactive相关推荐

最新文章

热门文章