Vue3技术6之toRef和toRefs、shallowReactive与shallowRef、readonly与shallowReadonly

news/2024/7/7 19:56:02

Vue3技术6

  • toRef和toRefs
    • toRef
      • App.vue
      • Demo.vue
    • toRefs
      • App.vue
      • DemoTwo.vue
    • 总结
  • shallowReactive与shallowRef
    • shallowReactive
      • App.vue
      • Demo.vue
    • shallowRef
      • Demo.vue
    • 总结
  • readonly与shallowReadonly
    • App.vue
    • Demo.vue
    • DemoTwo.vue
    • 总结

toRef和toRefs

toRef

App.vue

<template>
  <button @click="toggle=!toggle">切换显示/隐藏</button>
  <Demo v-if="toggle"></Demo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";
export default {
  name: 'App',
  components: {Demo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

Demo.vue

<template>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="salary++">涨薪</button>
</template>

<script>
import {reactive,toRef} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    const name1=person.name
    console.log("person.name",name1)  //输出只是字符串
    const name2=toRef(person,'name')
    console.log("toRef(person,'name')",name2)    //输出指向是person的name属性的ref对象

    //返回一个对象（常用）
    return{
      name:toRef(person,'name'),
      age:toRef(person,'age'),
      salary:toRef(person.job.j1,'salary')
    }
  },
}
</script>

<style scoped>

</style>

请添加图片描述

原理：
在这里插入图片描述

toRefs

App.vue

<template>
  <button @click="toggle=!toggle">切换显示/隐藏</button>
  <Demo v-if="toggle"></Demo>
  <hr>
  <DemoTwo></DemoTwo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";
import DemoTwo from "@/components/DemoTwo";

export default {
  name: 'App',
  components: {DemoTwo, Demo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

DemoTwo.vue

<template>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive,toRefs} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })


    console.log("-------------------------------------")
    const x=toRefs(person)
    console.log("toRefs(person)",x)

    //返回一个对象（常用）
    return{
      //toRefs返回的是一个对象，所以不能直接对象包对象，应该将两个对象合并
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

请添加图片描述

总结

  1. 作用：创建一个ref对象，其value值指向另一个对象中的某个属性
  2. 语法：const name=toRef(person,‘name’)
  3. 应用：要将响应式对象中的某个属性单独提供给外部使用时
  4. 扩展：toRefs与toRef功能一致，但可以批量创建多个ref 对象，语法：toRefs(person)

shallowReactive与shallowRef

shallowReactive

App.vue

<template>
  <button @click="toggle=!toggle">切换显示/隐藏</button>
  <Demo v-if="toggle"></Demo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";

export default {
  name: 'App',
  components: {Demo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

Demo.vue

<template>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive,toRefs,shallowReactive} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    /*let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })*/

	//只考虑第一层数据的响应式
    let person=shallowReactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    //返回一个对象（常用）
    return{
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

请添加图片描述

shallowRef

Demo.vue

<template>
  <h2>当前的x值是：{{x}}</h2>
  <button @click="x++">给x++</button>
  <h2>当前的a.b的值是：{{a.b}}</h2>
  <button @click="a.b++">给a.b的值++</button>
  <hr>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive,toRefs,shallowReactive,shallowRef} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    /*let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })*/

    //只考虑第一层数据的响应式
    let person=shallowReactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    const x=shallowRef(0)
    const a=shallowRef({
      b:0
    })
    console.log("x",x)
    console.log("a",a)


    //返回一个对象（常用）
    return{
      x,
      a,
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

请添加图片描述

总结

  1. shallowReactive：只处理对象最外层属性的响应式（浅响应式）
  2. shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
  3. 什么时候使用？
    （1）如果有一个对象数据，结构比较深，但变化时只是外层属性变化 ===> shallowReactive
    （2）如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===>shallowRef

readonly与shallowReadonly

App.vue

<template>
  <button @click="toggle=!toggle">切换显示/隐藏</button>
  <Demo v-if="toggle"></Demo>
  <hr>
  <br>
  <br>
  <DemoTwo></DemoTwo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";
import DemoTwo from "@/components/DemoTwo";

export default {
  name: 'App',
  components: {Demo,DemoTwo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

Demo.vue

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我和++</button>
  <hr>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive, toRefs,ref,readonly} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    let sum=ref(0)
    let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    person=readonly(person)
    sum=readonly(sum)


    //返回一个对象（常用）
    return{
      sum,
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

DemoTwo.vue

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我和++</button>
  <hr>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive, toRefs,ref,shallowReadonly} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    let sum=ref(0)
    let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    person=shallowReadonly(person)


    //返回一个对象（常用）
    return{
      sum,
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

请添加图片描述

总结

  1. readonly：让一个响应式数据变为只读的（深只读）
  2. shallowReadonly：让一个响应式数据变为只读的（浅只读）
  3. 应用场景：不希望数据被修改时

http://lihuaxi.xjx100.cn/news/1063831.html

相关文章

MySQL按照，库的操作，表的约束 --- MySQL总结（一）

MySQL按照，库的操作，表的约束 --- MySQL总结（一）

MySQL 文章目录 MySQLMySQL的安装MySQL组成架构连接池软件层引擎层储存层 库的操作创建库修改数据库删除数据库备份数据库还原数据库查看链接情况 表操作创建表查看表结构修改表结构添加字段修改字段类型长度更改表名修改属性删除表 数据类型表的约束空属性&#xff08;not nul…
阅读更多...
哪款无线洗地机最好用？好用的无线洗地机分享

哪款无线洗地机最好用？好用的无线洗地机分享

洗地机是近几年来比较火的家庭清洁工具&#xff0c;我从推出以来就一直在使用&#xff0c;这些年下来也使用过不少品牌的洗地机&#xff0c;其中有好用的&#xff0c;也有体验一般的。今天为大家分享几款个人使用下来感觉还不错的洗地机。希望对于同样在选购洗地机的你有所帮助…
阅读更多...
Python每日一练(20230424)

Python每日一练(20230424)

目录 1. 滑动窗口最大值 &#x1f31f;&#x1f31f;&#x1f31f; 2. 用栈实现队列 &#x1f31f; 3. 直线上最多的点数 &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一…
阅读更多...
《面试1v1》java泛型

《面试1v1》java泛型

我是 javapub&#xff0c;一名 Markdown 程序员从&#x1f468;‍&#x1f4bb;&#xff0c;八股文种子选手。 面试官&#xff1a;小伙子,说实话,泛型这个机制一开始我也是一头雾水,搞不太明白它到底要解决什么问题。你能不能不那么书呆子,给我普普通通地讲一讲泛型? 候选人…
阅读更多...
掌握这些移动测试技巧，棘手的问题也能游刃有余解决了

掌握这些移动测试技巧，棘手的问题也能游刃有余解决了

目录&#xff1a;导读 引言 一、测试的程序 二、功能测试点 三、移动端安卓环境变量 性能测试 四、实操通过USB连接到手机设备 五、adb操作命令 写在最后 引言 你是否曾经遇到过打开一个移动应用后出现各种问题&#xff0c;比如卡顿、闪退等&#xff1f; 这些问题可能会…
阅读更多...
android framework-ActivityManagerService(AMS)下

android framework-ActivityManagerService(AMS)下

一、ActivityThread \frameworks\base\core\java\android\app\ActivityThread.java 1.1、main public static void main(String[] args) {Trace.traceBegin(Trace.TRACE_TAG_ACTIVITY_MANAGER, "ActivityThreadMain");// Install selective syscall interceptionAnd…
阅读更多...
如何使用Tensorflow神经网络模型来完成兰州房价预测分析？

如何使用Tensorflow神经网络模型来完成兰州房价预测分析？

兰州房价预测是一个非常热门的话题，许多人都对如何预测兰州房价感兴趣。在本文中，我将介绍如何使用TensorFlow来预测兰州房价，并提供Python源代码。 首先，我们需要收集兰州的房价数据。我们可以从房地产网站或政府统计数据中获取。在本文中，我们将使用Kaggle上提供的兰州…
阅读更多...
动态规划——最长非降子序列

动态规划——最长非降子序列

该问题的思路及应用可参考动态规划——导弹拦截 最长非降子序列Time Limit: 5000 MSMemory Limit: 5000 KB Description 给定一个长度为N的整数数组, 请计算该数组中最长非降了序列长度。Input 第一行输入M(M<10)表示有M组数据。每组数据输入N(N<10000), 接下来输入N个…
阅读更多...
最新文章

Copyright @ 2022~2023