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类型的就是

相关推荐
gis开发之家15 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
华玥作者2 天前
uniapp 万条数据不卡顿:我写了个虚拟列表组件 hy-list,原生支持瀑布流
数据结构·uni-app·list·vue3
sugar__salt3 天前
Vue3 基础知识点整理 —— 从入门到响应式核心完全指南
vue.js·笔记·vue·vue3
万亿少女的梦1684 天前
基于微信小程序、Spring Boot与Vue3的智慧养老管理系统设计与实现
spring boot·redis·微信小程序·mybatis·vue3
gis开发之家5 天前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码
gis开发之家6 天前
《Vue3 从入门到大神32篇》Vue3 源码详解(二):从 GitHub Clone 到断点调试,手把手搭建源码阅读环境
vue.js·前端框架·github·vue3·vue3源码
gis开发之家7 天前
vue3直击架构痛点 依赖倒置与接口隔离——打造坚如磐石的插件与高阶组件(HOC)模式
javascript·架构·typescript·前端框架·vue3
gis开发之家9 天前
《Vue3 从入门到大神29篇》单元测试与 E2E 测试 —— 保障 Vue3 项目的质量
前端·javascript·vue.js·单元测试·前端框架·vue3
雨季mo浅忆9 天前
上传文件夹
前端·vue3
蜡台12 天前
uniapp vue2 转 vue3
前端·javascript·uni-app·vue3·vue2