学习vue3 第四章(reactive全家桶)

reactive

用来绑定复杂的数据类型 例如 对象 数组,它是不可以绑定普通的数据类型,会报错

数组异步赋值问题,会脱离响应式

javascript 复制代码
import { reactive } from 'vue'
let person = reactive<number[]>([])
setTimeout(() => {
  const arr = [1, 2, 3]
  //person = arr 报错
  //方法一:person.push(...arr)
  //方法二:person被对象包裹,再赋值 person.list = arr
  
},1000)

readonly

拷贝一份proxy对象将其设置为只读

shallowReactive

只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图

相关推荐
布局呆星14 小时前
Vue3 计算属性|从基础缓存到可读写
前端·javascript·vue.js
ZPC821021 小时前
如何创建一个单例类 (Singleton)
开发语言·前端·人工智能
紫_龙1 天前
最新版vue3+TypeScript开发入门到实战教程之重要详解readonly/shallowReadOnly
前端·javascript·typescript
roamingcode1 天前
前端 AI Agent 多智能体协作架构:从对抗式排查到工作流解耦
前端·人工智能·架构·agent·team
蓝莓味的口香糖1 天前
【vue】初始化 Vue 项目
前端·javascript·vue.js
aikongmeng1 天前
【Ai】Claude Code 初始化引导
javascript
光影少年1 天前
数组去重方法
开发语言·前端·javascript
我命由我123451 天前
浏览器的 JS 模块化支持观察记录
开发语言·前端·javascript·css·html·ecmascript·html5
weixin_443478511 天前
Flutter第三方常用组件包之路由管理
前端·javascript·flutter
武藤一雄1 天前
C# 异步回调与等待机制
前端·microsoft·设计模式·微软·c#·.netcore