vue3中reactive和ref函数及对比

reactive和ref函数

1. reactive

接受对象类型数据的参数传入并返回一个响应式的对象

javascript 复制代码
<script setup>
 // 导入
 import { reactive } from 'vue'
 // 执行函数 传入参数 变量接收
 const state = reactive({
   msg:'this is msg'
 })
 const setSate = ()=>{
   // 修改数据更新视图
   state.msg = 'this is new msg'//不需要.value
 }
</script>

<template>
  {{ state.msg }}
  <button @click="setState">change msg</button>
</template>

2. ref

接收简单类型或者对象类型的数据传入并返回一个响应式的对象

javascript 复制代码
<script setup>
 // 导入
 import { ref } from 'vue'
 // 执行函数 传入参数 变量接收
 const count = ref(0)
 const setCount = ()=>{
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>

<template>
  <button @click="setCount">{{count}}</button>
</template>

注意:

  • ref函数创建响应式数据,返回值是一个对象

  • 模版中使用ref数据,省略.value,js代码中不能省略(特殊:js中watch监听可以省)

3、reactive 对比 ref

  1. 都是用来生成响应式数据

  2. 不同点:

    1. reactive不能处理简单类型的数据,只支持引用数据类型,ref支持基本和引用数据类型

    2. ref通过.value获取数据,reactive不需要.value

    3. ref创建响应式引用数据类型低层依赖reactive

相关推荐
孤水寒月1 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀1 小时前
html初学者第一天
前端·html
llwszx2 小时前
深入理解Java锁原理(一):偏向锁的设计原理与性能优化
java·spring··偏向锁
脑袋大大的2 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
云泽野3 小时前
【Java|集合类】list遍历的6种方式
java·python·list
二进制person3 小时前
Java SE--方法的使用
java·开发语言·算法
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
小阳拱白菜4 小时前
java异常学习
java