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>
相关推荐
大飞记Python25 分钟前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep1 小时前
【前端】前端运行环境的结构
前端
你的人类朋友1 小时前
【Node】认识multer库
前端·javascript·后端
Aitter1 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front2 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'3 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'3 小时前
css `dorp-shadow`
前端·css
流***陌3 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
可触的未来,发芽的智生3 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
烛阴4 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python