vue3:5、组合式API-reactive和ref函数

html 复制代码
<script setup>
/*
reactive接收一个对象类型的数据,返回一个响应式的对象
*/

/**
 * ref:接收简单类型或复杂类型,返回一个响应式对象
 * 本质:是在原有传入数据的基础上,外层报了一层对象,包成了复杂类型
 * 底层:包成复杂类型之后,再借助reactive实现了的响应式
 * 注意点:
 * 1、脚本中访问数据,需要通过.vue
 * 2、在template中,.vue不需要加(帮我们扒了一层)
 * 
 */

 /**
  * 推荐:以后声明数据,统一用ref
  */
import { reactive, ref } from "vue";
const state = reactive({
  count :100
})

const count= ref(0)

const setCount = ()=>{
  state.count++
  count.value ++
}
 
</script>
<template>
  <div>
    <div>reactive{{ state.count }}</div>
    <div>ref {{ count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>
相关推荐
掘金安东尼13 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~15 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务18 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛18 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑21 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭27 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿32 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨41 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js