reactive
reactive
只用于给引用类型来创建响应(Array,Object,Map,Set
),ref
是支持所有类型
<template>
<div>{{ obj }}</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
type T = {
name: string
age: number
}
// let p = reactive(1) // 会报错
let obj = reactive<T>({
name: 'zs',
age: 18
})
</script>
ref
取值、赋值都需要加.value
,reactive
是不需要.value
<template>
<div>{{ obj }}</div>
<button @click="change">修改</button>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
type T = {
name: string
age: number
}
// let p = reactive(1) // 会报错
let obj = reactive<T>({
name: 'zs',
age: 18
})
const change = () => {
obj.name = 'ls'
obj.age = 20
}
reactive
是proxy
代理的对象,不能直接赋值,会破坏响应式对象
<template>
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
<button @click="add">添加</button>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
let list = reactive<string[]>([])
const add = () => {
// 模拟请求获取数据,赋值给我们定义的变量
setTimeout(() => {
let res = ['1', '2', '3']
list = res
// 页面没有改变
console.log(list) // ['1', '2', '3']
}, 1000)
}
</script>
解决方案一:使用push
import { reactive } from 'vue'
let list = reactive<string[]>([])
const add = () => {
setTimeout(() => {
let res = ['1', '2', '3']
// 使用push
list.push(...res)
console.log(list)
}, 1000)
}
解决方案二:包裹一层对象
<template>
<ul>
<li v-for="item in obj.list">{{ item }}</li>
</ul>
<button @click="add">添加</button>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
type person = {
list: Array<string>
}
let obj = reactive<person>({
list: []
})
const add = () => {
setTimeout(() => {
let res = ['1', '2', '3']
obj.list = res
console.log(obj.list)
}, 1000)
}
</script>
readonly
设置只读
<script setup lang="ts">
import { reactive, readonly } from 'vue'
let person = reactive({ name: 'zs' })
let read = readonly(person)
// error:无法分配到 "name" ,因为它是只读属性
read.name = 'ls'
</script>
可以修改源数据的值,这样只读对象也会改变
<template>
<button @click="change">修改</button>
</template>
<script setup lang="ts">
import { reactive, readonly } from 'vue'
let person = reactive({ name: 'zs' })
let read = readonly(person)
let change = () => {
// error:无法分配到 "name" ,因为它是只读属性
// read.name = 'ls'
// 可以修改原数据的值,这样只读对象也会改变
person.name = 'ls'
console.log(person, read)
}
</script>
shallowReactive
只能对浅层的数据响应,如果是深层的数据只会改变值, 不会改变视图
<template>
<div>{{ obj }}</div>
<button @click="change">修改</button>
</template>
<script setup lang="ts">
import { shallowReactive } from 'vue'
let obj = shallowReactive({
foo: {
bar: {
name: 'ls'
}
}
})
let change = () => {
obj.foo.bar.name = 'hhh'
// 值改变,视图不会更新
console.log(obj)
}
</script>
shallowReactive
跟shallowRef
一样,只能修改第一层的数据
<script setup lang="ts">
import { shallowReactive } from 'vue'
let obj = shallowReactive({
foo: {
bar: {
name: 'ls'
}
}
})
let change = () => {
// 这样可以
obj.foo = {
bar: {
name: 'hhh'
}
}
// obj.foo.bar.name = 'hhh'
// 值改变,视图不会更新
console.log(obj)
}
</script>
同时shallowReactive
跟shalllowRef
一样,shalllowRef
会受到ref
的影响,shallowReactive
也会受到reactive
的影响
<template>
<div>{{ person }}</div>
<div>{{ obj }}</div>
<button @click="change">修改</button>
</template>
<script setup lang="ts">
import { reactive, shallowReactive } from 'vue'
let person = reactive({ name: 'zs' })
let obj = shallowReactive({
foo: {
bar: {
name: 'ls'
}
}
})
let change = () => {
person.name = '我改变了'
obj.foo.bar.name = '我受到了影响'
// 值,视图都改了
console.log(person, obj)
}
</script>