vue3中reactive和ref函数及对比

简介: vue3中reactive和ref函数及对比

在Vue 3中,reactiveref都是用于创建响应式数据的方法。

ref函数接收一个参数,返回一个包装过的响应式对象。它可以将基本类型数据(如数字、字符串等)转换为响应式对象,以及将对象字面量转换为响应式对象。

import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 输出:0
count.value++
console.log(count.value) // 输出:1

reactive函数接收一个参数,返回一个响应式代理对象。它可以将普通对象转换为响应式对象,并且可以对对象的所有属性进行响应式处理。

import { reactive } from 'vue'
const state = reactive({ count: 0 })
console.log(state.count) // 输出:0
state.count++
console.log(state.count) // 输出:1

在使用上的区别:

  • ref返回的是一个具有value属性的对象,需要通过.value来访问和修改值。而reactive返回的是一个普通对象,可以直接访问和修改对象的属性。
  • ref适合用于包装基本类型数据和对象字面量,而reactive适合用于包装普通对象。
  • reactive可以对对象的所有属性进行响应式处理,而ref只能对自身的值进行响应式处理。

在使用上的选择:

  • 如果需要包装基本类型数据或对象字面量,或者只需要包装一个简单的值,可以使用ref
  • 如果需要包装一个普通对象,或者需要对对象的属性进行响应式处理,可以使用reactive
相关文章
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
3天前
|
JavaScript 前端开发 开发者
浅谈Vue 3的响应式对象: ref和reactive
浅谈Vue 3的响应式对象: ref和reactive
|
3天前
|
JavaScript API
vue 侦听器
vue 侦听器
|
3天前
|
JavaScript
vue 传递 props
vue 传递 props
|
3天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
29 3
|
2天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
3天前
|
JavaScript
【vue】vue2 获取本地IP地址
【vue】vue2 获取本地IP地址
8 1
|
3天前
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
14 1
|
3天前
|
JavaScript 前端开发