shallowReactive
类似
reactive
,不同的是,
shallowReactive
只处理对象最外层属性的响应式。
shallowRef
类似
ref
,不同的是,
shallowRef
只处理基本类型的响应式,不处理对象类型的响应式。
看下面几个例子就知道了。
项目目录如下。
以下的对比测试,仅对Demo.vue进行变更,main.js、App.vue不会变动,故将main.js、App.vue提前单独列在这儿,如下。
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<template>
<Demo/>
</template>
<script>
import Demo from './components/Demo.vue'
export default {
name: 'App',
components: {
Demo
}
}
</script>
reactive与shallowReactive
使用reactive
- Demo.vue
<template>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>薪酬:{{job.salary}}K</h2>
<button @click="name+='~'">修改姓名</button>
<button @click="age++">增长年龄</button>
<button @click="job.salary++">涨薪</button>
</template>
<script>
import {reactive, toRef} from "vue";
export default {
name:"Demo",
setup(){
let person = reactive({
name:"张三",
age:18,
job:{
salary:30
}
})
return {
name:toRef(person,"name"),
age:toRef(person,"age"),
job:toRef(person,"job")
}
}
}
</script>
- 测试效果
点击涨薪,薪酬的数值会递增。
使用shallowReactive
- Demo.vue
<template>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>薪酬:{{job.salary}}K</h2>
<button @click="name+='~'">修改姓名</button>
<button @click="age++">增长年龄</button>
<button @click="job.salary++">涨薪</button>
</template>
<script>
import {shallowReactive, toRef} from "vue";
export default {
name:"Demo",
setup(){
let person = shallowReactive({
name:"张三",
age:18,
job:{
salary:30
}
})
return {
name:toRef(person,"name"),
age:toRef(person,"age"),
job:toRef(person,"job")
}
}
}
</script>
- 测试效果
点击涨薪,薪酬的数值不会递增。因为salary
是person
的job
的属性,而shallowReactive
只能处理浅层次的响应式,即只能处理对象最外层属性的响应式。
ref与shallowRef
使用ref
- Demo.vue
<template>
<h2>当前和为:{{sum}}</h2>
<button @click="sum++">点我加1</button>
<hr>
<h2>当前信息为:{{msg}}</h2>
<button @click="msg+='!'">修改信息</button>
</template>
<script>
import {ref, toRef} from "vue";
export default {
name:"Demo",
setup(){
let sum = ref(0);
let response = ref({
msg:"你好"
})
return {
sum,
msg:toRef(response.value,"msg")
}
}
}
</script>
- 测试效果
点击点我加1,sum
值递增。
点击修改信息,obj
的msg
属性变化了。
使用shallowRef
- Demo.vue
<template>
<h2>当前和为:{{sum}}</h2>
<button @click="sum++">点我加1</button>
<hr>
<h2>当前信息为:{{msg}}</h2>
<button @click="msg+='!'">修改信息</button>
</template>
<script>
import {shallowRef, toRef} from "vue";
export default {
name:"Demo",
setup(){
let sum = shallowRef(0);
let response = shallowRef({
msg:"你好"
})
return {
sum,
msg:toRef(response.value,"msg")
}
}
}
</script>
- 测试效果
点击点我加1,sum
值递增。
点击修改信息,obj
的msg
属性没有变化。
这是因为shallowRef
只能处理基本类型的响应式,不能处理对象类型的响应式。