Vue.js 中 ref 和 reactive 的区别及用法解析

import { ref } from 'vue';
const count = ref(0);
count.value++;  // 增加值
console.log(count.value);  // 访问值

import { ref } from 'vue';
const city1List = ref([]);
onMounted(() => {
  getCityByPid(0).then(res => {
    city1List.value = res.data.data;  // 直接赋值新数组
    console.log(city1List.value);  // 访问数组内容
  });
});

import { reactive } from 'vue'; const state = reactive({ count: 0 }); 
state.count++; // 增加 
count console.log(state.count); // 访问 count

import { reactive } from 'vue';
let city1List = reactive([]); 
onMounted(() => { 
getCityByPid(0).then(res => 
     { city1List.splice(0, city1List.length, ...res.data.data); // 使用数组方法修改内容 
     console.log(city1List); // 访问数组内容 
   }); 
);

import { reactive } from 'vue';
let city1List = reactive([]);
onMounted(() => {
  getCityByPid(0).then(res => {
    city1List.splice(0, city1List.length, ...res.data.data);  // 清除现有数组并添加新项目
    console.log(city1List);  // 访问数组内容
  });
});