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函数,更加灵活

相关推荐
前端开发爱好者11 分钟前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀18 分钟前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
华仔啊3 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
炒毛豆4 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
岁月宁静4 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
Dolphin_海豚5 小时前
@vue/reactivity
前端·vue.js·面试
菜狗的小小笔记_6 小时前
Vue3 实用技巧
vue.js
duandashuaige6 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
勇敢di牛牛9 小时前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
我是日安11 小时前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js