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>

相关推荐
ᥬ 小月亮5 分钟前
webpack基础
前端·webpack
YongGit24 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1012 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js