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>
相关推荐
Hexene...几秒前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 分钟前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz6 分钟前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w90892585916 分钟前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
天天扭码36 分钟前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw537 分钟前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !40 分钟前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt42 分钟前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜1 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1233 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js