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 天前
高性能 v-html 弹窗实现:Vue3 + Element Plus 最佳实践
vue3·弹窗·v-html
xun-ming9 天前
SpringBoot和Vue3实战阿里百炼大模型极简版
spring boot·ai·vue3·智能体·百炼大模型
哆啦A梦158810 天前
20, Springboot3+vue3实现前台轮播图和详情页的设计
javascript·数据库·spring boot·mybatis·vue3
小盼江10 天前
基于Springboot3+Vue3的协同过滤鲜花商城推荐系统
vue3·springboot3·鲜花商城
哆啦A梦158810 天前
11,Springboot3+vue3个人中心,修改密码
java·前端·javascript·数据库·vue3
哆啦A梦158811 天前
01, 前端vue3框架的快速搭建以及项目工程的讲解
前端·vue3·springboot
萧曵 丶15 天前
Vue3组件通信全方案
前端·javascript·vue.js·typescript·vue3
Json____15 天前
vue3-商城管理系统-前端静态网站
前端·vue3·ts·商城纯静态
吴声子夜歌20 天前
Vue3——网络框架Axios的应用
javascript·vue3·axios
赵庆明老师1 个月前
vben开发入门6:tsconfig.json
json·vue3·vben