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

相关推荐
哆啦A梦158811 小时前
java项目在后端做跨域配置
java·vue3
路光.2 天前
uniappVue2升级Vue3内存溢出解决方式
vue·vue3·uniapp
沙振宇3 天前
【Web】使用 Vue3+PlayCanvas 开发 3D 游戏(五)3D 模型鼠标交互控制
3d·vue3·鼠标·playcanvas
nibabaoo5 天前
前端开发攻略---Vue3项目中实现指定区域的打印预览与 PDF 导出功能
vue3·js·打印预览pdf
nibabaoo6 天前
前端开发攻略---在 Vue 3 项目中使用 vue-i18n 实现国际化多语言
前端·javascript·国际化·i18n·vue3
沙振宇7 天前
【Web】使用Vue3+PlayCanvas开发3D游戏(四)3D障碍物躲避游戏2-模型加载
游戏·3d·vue3·vite·playcanvas
SuperEugene7 天前
Vue3 中后台实战:VXE Table 从基础表格到复杂业务表格全攻略 | Vue生态精选篇
前端·vue.js·状态模式·vue3·vxetable
p5l2m9n4o6q7 天前
Vue3后台管理系统布局实战:从零搭建Element Plus左右布局(含Pinia状态管理)
vue3·pinia·element plus·viewui·后台管理系统
梵得儿SHI8 天前
Vue3 生态工具实战进阶:API 请求封装 + 样式解决方案全攻略(Axios/Sass/CSS Modules)
前端·css·vue3·sass·api请求·样式解决方案·组合式api管理
行者-全栈开发8 天前
43 篇系统实战:uni-app 从入门到架构师成长之路
前端·typescript·uni-app·vue3·最佳实践·企业级架构