Vue3教程 4.响应式reactive函数

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    }  }}