【vue3.0中ref与reactive的区别及使用】

这篇具有很好参考价值的文章主要介绍了【vue3.0中ref与reactive的区别及使用】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是ref与reactive

ref与reactive都是Vue3.0中新增的API,用于响应式数据的处理。

1. ref

ref是一个函数,可以用于将一个普通的数据类型转换成响应式数据。ref返回一个包含value属性的对象,通过修改value属性的值,可以触发组件更新。

使用方式如下:

import { ref } from 'vue'

const count = ref(0)

// 获取值
console.log(count.value)

// 修改值
count.value++

// 在模板中使用
<template>
  <div>{{ count }}</div>
</template>

2. reactive

reactive是一个函数,用于将一个普通的对象转换成响应式数据。reactive返回一个响应式的Proxy对象,通过修改该对象的属性值,可以触发组件更新。

使用方式如下:

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Tom'
})

// 获取值
console.log(state.count)

// 修改值
state.count++

// 在模板中使用
<template>
  <div>{{ state.count }}</div>
</template>

区别:

  1. ref返回一个包含value属性的对象,而reactive返回一个响应式的Proxy对象。

  2. 在使用上,ref更方便一些,使用起来更简单直观。而reactive比较灵活,可以将任意对象转换成响应式数据,并且可以进行深层次的响应式处理。

reactive() API 有一些局限性:

有限的值类型:

它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。

不能替换整个对象:

由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失:

let state = reactive({ count: 0 })

// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失!)
state = reactive({ count: 1 })
对解构操作不友好:

当我们将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,我们将丢失响应性连接:

const state = reactive({ count: 0 })

// 当解构时,count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

需要注意的是,使用ref和reactive时,不能直接修改属性值的方式来更新数据,而是应该通过修改value或Proxy对象的属性来触发组件更新。例如:文章来源地址https://www.toymoban.com/news/detail-674396.html

// ref使用示例
const count = ref(0)
count++ // 这样是错误的,应该使用count.value++

// reactive使用示例
const state = reactive({
  count: 0
})
state.count++ // 这样是正确的,会触发组件更新

到了这里,关于【vue3.0中ref与reactive的区别及使用】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3:Typescript与组合式API、defineProps、defineEmits等使用

    使用 defineProps() 使用 script setup 在使用 script setup 时, defineProps() 宏函数支持从它的参数中推导类型: 运行时声明 基于类型的声明 注意:接口或对象字面类型可以包含从其他文件导入的类型引用,但是,传递给 defineProps 的泛型参数本身不能是一个导入的类型, 这是因为Vue

    2023年04月20日
    浏览(83)
  • vue2+webpack升级vue3+vite,在vue3组合式编程中使用vuex

    同学们可以私信我加入学习群! 我的项目是从vue2+webpack升级为vue3+vite,这种升级工作,其实最重要的不是如何快速准确地把原有vue2项目全部重构为vue3项目,因为这是不现实的。 升级工作一定是一个长久的持续过程,所以如何保证旧的vue2项目与新的vue3模块之间互相兼容,才

    2024年01月18日
    浏览(54)
  • vue3组合式笔记

    dfdf {{count}} {{state.count}} {{computedValue}} // // 校验 submit 事件 // submit: ({ email, password }) = { // if (email password) { // return true // } else { // console.warn(‘Invalid submit event payload!’) // return false // } // } // }) // function submitForm(email, password) { // emit(‘submit’, { email, password }) // } // input // type=“

    2024年02月06日
    浏览(43)
  • Vue3组合式API

    目录 composition API vs options API 体验 composition API setup 函数 reactive 函数 ref 函数 script setup 语法 计算属性 computed 函数 监听器 watch 函数 生命周期 模板中 ref 的使用 组件通讯 - 父传子 组件通讯 - 子传父 依赖注入 - provide 和 inject 保持响应式 - toRefs 函数 vue2 采用的就是 options API (

    2024年02月07日
    浏览(64)
  • vue3组合式API介绍

    根据官方的说法,vue3.0的变化包括性能上的改进、更小的 bundle 体积、对 TypeScript 更好的支持、用于处理大规模用例的全新 API,全新的api指的就是本文主要要说的组合式api。 在 vue3 版本之前,我们复用组件(或者提取和重用多个组件之间的逻辑),通常有以下几种方式: M

    2023年04月22日
    浏览(59)
  • Vue3的组合式API中如何使用setup()函数中的条件渲染和循环渲染

    首先,让我们来了解一下什么是Vue3的组合式API。组合式API是一种在Vue3中用于构建组件的方式,它使用函数式编程的方法来组织代码,让你的组件更加清晰、易于理解和维护。而setup()函数则是组合式API的核心,它用于初始化组件并返回包含组件数据的对象。 现在,让我们来看

    2024年02月11日
    浏览(52)
  • 快速入门vue3组合式API

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 使用create-vue创建项目 熟悉项目目录和关键文件  组合式API  setup选项 setup选项的写法和执行时机 script setup 语法糖 reactive和ref函数 reactive() ref() computed watch 侦听单个数据

    2024年02月12日
    浏览(48)
  • Vue3 组合式函数,实现minxins

    截至目前,组合式函数应该是在VUE 3应用程序中组织业务逻辑最佳的方法。它让我们可以把一些小块的通用逻辑进行抽离、复用,使我们的代码更易于编写、阅读和维护。 根据官方文档说明,在 Vue 应用的概念中, “组合式函数”是一个利用 Vue 组合式 API 来封装和复用有状态

    2024年02月08日
    浏览(40)
  • 【Vue3】如何创建Vue3项目及组合式API

    文章目录 前言 一、如何创建vue3项目? ①使用 vue-cli 创建  ②使用可视化ui创建  ③npm init vite-app   ④npm init vue@latest 二、 API 风格 2.1 选项式 API (Options API) 2.2 组合式 API (Composition API) 总结 例如:随着前端领域的不断发展,vue3学习这门技术也越来越重要,很多人都开启了学习

    2024年02月03日
    浏览(63)
  • vue3组合式api单文件组件写法

    一,模板部分  二,js逻辑部分 

    2024年02月13日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包