vue3 - ref和reactive的区别

文章搬运自wx60d4764eb475e 的vue3中ref和reactive的区别（系列六）

1. ref和reactive区别:
如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value
如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value

2. Vue是如何决定是否需要自动添加.value的
Vue在解析数据之前, 会自动判断这个数据是否是ref类型的,
如果是就自动添加.value, 如果不是就不自动添加.value

3. Vue是如何判断当前的数据是否是ref类型的
通过当前数据的__v_ref来判断的
如果有这个私有的属性, 并且取值为true, 那么就代表是一个ref类型的数据

数据是ref类型

<template><div><p>{{ age }}</p><button @click="Fn">按钮</button></div>
</template><script>
import { ref } from "vue";
export default {name: "App",setup() {// ref类型在底层会自动转换成reactive类型// ref(18) -> reactive({value: 18})let age = ref(18);function Fn() {age.value = 666;console.log(age)}return { age, Fn };},
};
</script>

点击按钮，页面数据变成666了，注意，vue模板中没有age.value,因为ref类型的数据有isRef属性，底层自动会将.value加上

数据是reactive类型

<template><div><p>{{age}}</p><button @click="Fn">按钮</button></div>
</template><script>import {reactive} from 'vue';export default {name: 'App',setup() {let age = reactive({value: 18});function Fn() {age.value = 666;console.log(age)}return {age, Fn}}
}
</script>

点击按钮，页面还是个对象数据，因为是reactive类型数据，没有isRef属性，vue不会自动在模板添加.value, 所以我们需要手动在模板添加age.value

我们如何判断数据到底是ref还是reactive?

通过isRef / isReactive 方法

<template><div><p>{{age}}</p><button @click="Fn">按钮</button></div>
</template><script>import {reactive} from 'vue';export default {name: 'App',setup() {let age = reactive({value: 18});function Fn() {console.log(isRef(age)); //falseconsole.log(isReactive(age));  //trueage.value = 666;}return {age, Fn}}
}
</script>

vue3 - ref和reactive的区别相关推荐

vue3 ref 和reactive的区别
文章目录 Ref reactive 源码分析视频点击进入 Ref ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改 ...
vue3 ref，reactive请求后的赋值问题以及解决方法
vue3 ref,reactive请求后的赋值问题以及解决方法开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我们可能会稍微的有点不适应 ...
【ref 和 reactive的区别】
ref 和 reactive的区别两者概念 ref函数:定义一个响应式的数据(主要针对基础类型数据) 方法:引入 ref 函数,const xxx = ref(initValue) 模板中读取数据: ...
vue3 ref 和 reactive 区别
前言最近学习cloud项目,前端使用到 vue3 + ts 等技术,在写需求过程中遇到响应式数据问题,经百度查找相关笔记,在此记录一下,在实战中成长吧. 问题出现的问题:定义一个默认数组并且 fo ...
ref和reactive的区别
理解: 1.ref是定义简单类型和单一的对象 2.reactive 定义复杂的类型梳理文档: ref和reactive都是Vue.js 3.x版本中新增的响应式API,用于实现组件的数据响应式更新 ...
19.0 vue3 ref，reactive请求后的赋值问题以及解决方法
上一篇: 18.0 vue3 Vue Router的使用(1)_十一月的萧邦-CSDN博客开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我 ...
vue3 ref及reactive响应式原理案例语法糖/非语法糖
非语法糖: <template> <h1>博主的信息</h1> <h2>姓名:{{name}}</h2> <h2>年龄:{{ag ...
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖起初 ...
Vue3 初探 ref、reactive 、及改变数组的值
概况 Vue3 里要实现数据的响应式监听一共有两种方式既:ref 和 reactive 他们既有区别又有联系. ref() ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型, ...

vue3 - ref和reactive的区别

vue3 - ref和reactive的区别相关推荐

最新文章

热门文章