vue3 之 组合式API—reactive和ref函数

ref()

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

核心步骤:

1️⃣ 从 vue 包中导入 ref 函数

2️⃣在

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

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

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

核心步骤:

1️⃣ 从 vue 包中导入 reactive 函数

2️⃣ 在

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

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

1️⃣ reactive和ref函数的共同作用是什么 ?

用函数调用的方式生成响应式数据

2️⃣ reactive vs ref ?

reactive不能处理简单类型的数据

ref参数类型支持更好但是必须通过.value访问修改

ref函数的内部实现依赖于reactive函数

3️⃣ 在实际工作中推荐使用哪个?

推荐使用ref函数,更加灵活

相关推荐
会写代码的饭桶2 分钟前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中4 分钟前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略23 分钟前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen86830 分钟前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
HECHEN****2 小时前
Composition API 与 React Hook 很像,区别是什么?
vue·面试题
知识分享小能手3 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
LuckySusu3 小时前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
LuckySusu3 小时前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu3 小时前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu3 小时前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js