【Vue3】shallowReactive与shallowRef用法
Vue3 用法
2023-09-11 14:14:57 时间
一、说明
shallowReactive:只处理数组对象的父节点的响应式,适用于:数组对象太多太大,但是,仅需要对父节点响应。
shallowRef:只处理基本类型数据的响应式,不进行对象的响应式处理,适用于:生成一个替代新的对象,而不是原对象。
<template>
<h4>当前的x值是:{{x.y}}</h4>
<button @click="x.y++">x.y++</button>
<hr>
<h4>{{person}}</h4>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>薪水:{{job.j1.salary}}</h2>
<button @click="name+='~'">修改姓名</button>
<button @click="age++">增长年龄</button>
<button @click="job.j1.salary++">增长薪水</button>
</template>
<script>
import {reactive, ref, toRef,toRefs,shallowReactive,shallowRef} from 'vue'
export default {
name:'demo',
setup(){
// 数据
let person = shallowReactive({ // 只考虑第一层数据的响应式
// let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
let x = shallowRef({
// let x = ref({
y:0
})
const name1 = person.name
console.log('%%%',name1)
const name2 = toRef(person,'name')
console.log('###',name2)
// 返回一个对象(常用)
return {
x,
person,
...toRefs(person)
}
},
}
</script>
相关文章
- vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- vue3快速入门:学习Vue3为什么要学习TypeScript?使用 TypeScript 的 10 个理由
- vue3组合式Composition API之reactive函数的具体用法
- vue2和vue3中mixins的用法
- vscode创建vue3用户代码片段
- vue3 watch 监听 flush post 作用?
- vue3中 toRefs和 toRef 的区别
- Vue3学习笔记(四)——组件、插槽、生命周期、Hooks
- Vue3学习笔记(一)——MVC与vue3概要、模板、数据绑定与综合示例
- vue3 + element plus + vite 迁移实践
- 整理的一些Vue3知识点
- Vue3中的组件通信方式
- vue3 ref 和reactive的区别
- vue2和vue3有哪些区别和不同2
- Vue2和Vue3的区别和变化
- 【前端面试题——vue3篇】