vue3中使用ref可以监听属性，但是写起来都要加.value。vue提供reactive函数，无需加.value ,但是reactive只能对对象提供响应式。
所以我们平时用的时候 基本类型使用ref，引用类型使用reactive。为什么Vue3要这样设计呢？后续文章跟大家说一下原理，本章主要介绍reactive语法。
使用ref 的写法
import {ref} from 'vue';
export default {
setup(){
let num = ref(30);
let categorys = ref(['女装', '男装', '家电']);
let prodcut = ref({
title: '电视机',
sku: [{
count: 2,
title: '红色'
}]
});
return {
num,
hello () {
num.value += 1;
categorys.value.push('数码');
prodcut.value.sku[0].title = '蓝色';
},
categorys,
prodcut
}
}
}
使用reactive 替代ref写法
import {reactive, ref} from 'vue';
export default {
setup(){
let num = ref(30);
let categorys = reactive(['女装', '男装', '家电']);
let prodcut = reactive({
title: '电视机',
sku: [{
count: 2,
title: '红色'
}]
});
return {
num,
hello () {
num.value += 1;
categorys.push('数码');
prodcut.sku[0].title = '蓝色';
},
categorys,
prodcut
}
}
}
