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