vue3+ts 第四章(认识Reactive全家桶)

reactive

用来绑定复杂的数据类型 例如 对象 数组

reactive 源码约束了我们的类型

他是不可以绑定普通的数据类型这样是不允许 会给我们报错

import { reactive} from 'vue'

let person = reactive('sad')

绑定普通的数据类型 我们可以 使用昨天讲到ref

你如果用ref去绑定对象 或者 数组 等复杂的数据类型 我们看源码里面其实也是 去调用reactive

使用reactive 去修改值无须.value

reactive 基础用法

import { reactive } from 'vue'

let person = reactive({

name:"小满"

})

person.name = "大满"

数组异步赋值问题

这样赋值页面是不会变化的因为会脱离响应式

let person = reactive<number[]>([])

setTimeout(() => {

person = [1, 2, 3]

console.log(person);

},1000)

解决方案1

使用push

import { reactive } from 'vue'

let person = reactive<number[]>([])

setTimeout(() => {

const arr = [1, 2, 3]

person.push(...arr)

console.log(person);

},1000)

方案2

包裹一层对象

type Person = {

list?:Array<number>

}

let person = reactive<Person>({

list:[]

})

setTimeout(() => {

const arr = [1, 2, 3]

person.list = arr;

console.log(person);

},1000)

readonly

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

import { reactive ,readonly} from 'vue'

const person = reactive({count:1})

const copy = readonly(person)

//person.count++

copy.count++

shallowReactive

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

案例

<template>

<div>

<div>{{ state }}</div>

<button @click="change1">test1</button>

<button @click="change2">test2</button>

</div>

</template>

<script setup lang="ts">

import { shallowReactive } from 'vue'

const obj = {

a: 1,

first: {

b: 2,

second: {

c: 3

}

}

}

const state = shallowReactive(obj)

function change1() {

state.a = 7

}

function change2() {

state.first.b = 8

state.first.second.c = 9

console.log(state);

}

</script>

<style>

</style>

相关推荐
yinke小琪4 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿8 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux10 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵11 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆14 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端17 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_17 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪19 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany21 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc
liliangrong77724 分钟前
ES2025新特性详解
前端