结论：用ref定义基本类型，用reactive来定义引用类型，如果用reactive定义基本类型，watch监听会不好用。
<template>
<div>
<!-- 页面上不需要加value -->
{{num}} {{dept.loc}}{{dept2.loc}}<br>
num3:{{num3}}<br>
num3new:{{num3new}}<br>
numnew:{{numnew}}<br>
<button @click="add(5)">改</button>
</div>
</template>
<script setup>
import { computed, onMounted, reactive, ref, watch } from 'vue';
//1-用ref来定义响应数据-基本类型
let num=ref(10)
//2-用ref来定义响应数据-引用类型
let dept=ref({
deptno:10,
dname:'测试部',
loc:'沈阳'
})
let add=(i)=>{
//2-js修改时需要加.value才可以。
num.value+=i;
//修改时也需要加.value
dept.value.loc='大连'
dept2.loc="深圳-reactive"
num3++;
}
//reactive只能用来定义引用类型，不能定义基本类型
//在js和页面引用时，不需要加.value
let num3=reactive(20)
let dept2=reactive({
deptno:20,
dname:'开发',
loc:'沈阳-reactive'
})
let num3new=computed(()=>{
return '$'+num3
})
let numnew=computed(()=>{
return '$'+num.value
})
/* watch(num,(newv,oldv)=>{
alert(newv)
alert(oldv)
}) */
////用reactive定义基本类型，watch会有bug
watch(num3,(newv,oldv)=>{
alert(newv)
alert(oldv)
})
//setup语法糖方式，生命周期函数前加on
/* onMounted(()=>{
alert("onMounted")
}) */
</script>
vue3 reacitve-ref区别
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 我们都知道vue3.0版本对所有的底层代码做了一次更新，尤其是响应式跟2.0的变化最大； 在2.0的时候使用...
- ref是对原始数据的拷贝，当修改ref数据时，模板中的视图会发生改变，但是原始数据并不会改变。toRef是对原始数...
- 这里介绍下ref和reactive函数的使用区别和响应式原理，以及在实际项目中如何使用和一些常见问题 ref函数：...
- 定于数据角度对比：ref 用来定义：基本类型数据reactive 用来定义：对象、或数组类型的数据备注：ref也可...
