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

相关推荐
赵庆明老师8 天前
vben开发入门6:tsconfig.json
json·vue3·vben
赵庆明老师8 天前
vben开发入门5:vite.config.ts
前端·html·vue3·vben
沙振宇9 天前
【Web】使用Vue3+PlayCanvas开发3D游戏(十二)渲染PCD点云可视化模型
3d·vue3·点云·pcd
是席木木啊12 天前
告别console.log!Vue3项目日志框架选型指南
前端·vue3·日志框架
程序员-南12 天前
解决 Vue3 中 keep-alive 缓存问题的方法
缓存·vue3
qq_120840937113 天前
Three.js 模型加载稳定性实战:从资源失败到可用发布的工程化方案
前端·javascript·vue.js·vue3·three.js
qq_120840937113 天前
Three.js 模型加载与线上稳定性实战:路径、跨域、缓存与降级全链路指南
开发语言·javascript·缓存·vue3
qq_120840937113 天前
Vue3 + Three.js 实战入门:从零搭建可交互3D场景(含模型加载与性能优化)
javascript·3d·vue3·交互
qq_120840937113 天前
Vue3 + Three.js 入门实战:从 0 到 1 搭建可交互的 3D 场景(含模型加载与性能优化)
javascript·3d·vue3·交互·webgl·gltf
曲幽14 天前
Vue 3 组件通信,别只会用 Props 和 Emits 了,这几个狠活儿你得看看
vue3·inject·provide·pinia·v-model·props·mitt·emit