Vue3教程 4.响应式reactive函数

terrybg

已于 2022-05-30 17:29:17 修改

阅读量1.1w

点赞数 1

分类专栏： Vue3 Vue 文章标签： Vue3 前端

于 2022-03-23 22:51:00 首次发布

本文链接：https://blog.csdn.net/qq_37493888/article/details/123698901

版权

Vue3 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

本文介绍了Vue3中ref和reactive的使用区别。ref适用于基本类型，需要通过.value访问，而reactive则适用于对象，直接操作即可。在实际应用中，根据数据类型选择合适的响应式工具，提升开发效率。文章将探讨这种设计的原因，并展示相关代码示例。

摘要由CSDN通过智能技术生成

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