Vue3-09 创建响应式数据(基本类型ref和对象类型reactive)

文章目录

  • [vue2 中的响应式数据](#vue2 中的响应式数据)
  • [vue3 中的响应式数据](#vue3 中的响应式数据)
    • [基本数据类型 ref](#基本数据类型 ref)
    • [对象类型 reactive](#对象类型 reactive)

vue2 中的响应式数据

vue2 中数据写在data中就是响应式的

vue2中的这个ref vue3中的不一样

vue3 中的响应式数据

基本数据类型 ref

vue3 中想要哪个数据是响应式的,就用ref包下。

响应式:数据一改页面就要同步变的就是响应式的。

带下划线的不能使用

模板中展示数据,不需要写.value

但在所有js中修改需要写.value

写了v-for最好再写key标识

复制代码
 <li v-for="game in gamse" :key="game.id">

这里的冒号简写相当于 v-bind:,省略了

对象类型 reactive


响应式数据

控制台上看见是Proxy类型的就是

相关推荐
码视野3 天前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
码视野3 天前
基于 Spring Boot + Vue3 的【高校化学实验室安全准入考试与危化品配伍排查系统】设计与实现(含PRD/三端高保真源码/大屏)
前端·人工智能·spring boot·后端·安全·vue3
fxshy3 天前
WebGIS 游戏化实践:基于 Cesium + Vue3 实现全球飞行模拟系统:从球体坐标、飞行动力学到地形碰撞实战
游戏·vue3·cesium·webgis·飞行模拟
jonyleek4 天前
技术实践:基于 Vue3 + Spring Cloud 微服务实现私有化文档系统的类 SaaS 协同体验
微服务·私有化部署·vue3·springcloud·协同编辑·jvs企业文档·无忧企业文档
码视野4 天前
基于 Vue3 + Element Plus 的【智慧社区洗车养车与上门流动洗车预约调度系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
码视野4 天前
基于 Vue3 + Element Plus 的【无人值守共享自习室与空间智能预约系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
码视野4 天前
基于 Vue3 + Element Plus 的【基于 Vue3 的智慧健身房会员管理与私教团课预约核销系统】设计与实现(附完整源码与PRD)
前端·vue3
码视野4 天前
基于 Vue3 + Element Plus 的【青少年心理健康智能测评与 AI 情绪树洞陪护干预系统】设计与实现(含PRD/三端源码/大屏)
前端·vue.js·人工智能·vue3
码视野4 天前
基于 Vue3 + Element Plus 的【微短剧剧本智能创作与分镜生产协同系统】设计与实现(含PRD/三端源码/大屏)
前端·人工智能·vue3
码视野5 天前
基于 Vue3 + Element Plus 的【智慧新能源汽车充电桩运维调度与分时共享租赁系统】设计与实现(附完整源码与PRD)
运维·人工智能·汽车·vue3