Vue3的computed计算属性和watch监视(四)

news2024/12/26 13:41:58

一、computed计算属性

<template>
    <div class="person">

        姓:<input type="text" v-model="first_name"><br>
        名:<input type="text" v-model="last_name"><br>
        <button @click="changeFullName">修改全名</button><br>

        <!-- 计算属性的意义在于，full_name可以缓存起来，多次输出的时候，不用计算多次(如果使用函数，则会) -->
        全名<span>{{full_name}}</span><br>
        全名<span>{{full_name}}</span><br>


    </div>
</template>

<script lang="ts">
    export default {
        name: 'Person'
    }
</script>

<script setup lang="ts">
    //1. 首先从vue引入ref
    import { ref, computed } from 'vue'

    let first_name = ref('zhang')
    let last_name = ref('san')
    // 此时full_name是只读的，并不能修改
    // let full_name = computed(() => {
    //     return first_name.value.slice(0, 1).toUpperCase() + first_name.value.slice(1) + '-' + last_name.value
    // })

    // 如果full_name想要实现修改功能，需要实现set方法
    let full_name = computed({
        get() {
            return first_name.value.slice(0, 1).toUpperCase() + first_name.value.slice(1) + '-' + last_name.value
        },

        //当full_name被修改时,set被调用,且val会捕获到修改后的值
        set(val) {
            const [str1, str2] = val.split('-')
            first_name.value = str1
            last_name.value = str2
        }
    })

    function changeFullName() {
        //从这里引用方式(通过value才可以获取该值)可以看出,full_name其实是一个ref对象
        full_name.value = 'li-si'
    }


</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 50px;
    }
</style>

二、watch监视

1、场景一

监视【ref】定义的【基本数据】类型

<template>
    <div class="person">

        <h1>场景1:监视【ref】定义的【基本数据】类型</h1><br>
        sum的值: {{sum}}<br>
        <button @click="changeSum">修改sum的值</button><br>


    </div>
</template>

<script lang="ts">
    export default {
        name: 'Person'
    }
</script>

<script setup lang="ts">
    //1. 首先从vue引入ref
    import { ref, watch } from 'vue'

    let sum = ref(0)

    function changeSum() {
        sum.value += 1
    }

    let stopWatch = watch(sum, (newVal, oldVal) => {
        console.log('sum值变了', newVal, oldVal)
        if (newVal > 10) {
            stopWatch()
        }
    })


</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 50px;
    }
</style>

2、场景二

监视【ref】定义的【对象类型】数据

<template>
    <div class="person">

        <h1>情况二：监视【ref】定义的【对象类型】数据</h1><br>
        姓名: {{person.name}}<br>
        年龄: {{person.age}}<br>
        <button @click="changeName">修改name的值</button><br>
        <button @click="changeAge">修改age的值</button><br>
        <button @click="changePerson">修改person</button><br>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Person'
    }
</script>

<script setup lang="ts">
    //1. 首先从vue引入ref
    import { ref, watch } from 'vue'

    let person = ref({
        name: 'Maple',
        age: 18
    })

    function changeName() {
        person.value.name = 'Max'
    }

    function changeAge() {
        person.value.age = 28
    }

    function changePerson() {
        person.value = { name: 'Kelly', age: 20 }
    }


    // 对于对象，watch监视的是对象的地址,所以如果只是对象的属性值(name和age)发生变化，并不会被监视到
    // 除非手动开启深度监视
    watch(person, (newVal, oldVal) => {
        console.log('person值变了', newVal, oldVal)
    }, { deep: true })


</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 50px;
    }
</style>

3、场景三

监视【reactive】定义的【对象类型】数据

<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <hr>
    <h2>测试：{{obj.a.b.c}}</h2>
    <button @click="test">修改obj.a.b.c</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
  // 数据
  let person = reactive({
    name:'张三',
    age:18
  })
  let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changePerson(){
    Object.assign(person,{name:'李四',age:80})
  }
  function test(){
    obj.a.b.c = 888
  }

  // 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  })
  watch(obj,(newValue,oldValue)=>{
    console.log('Obj变化了',newValue,oldValue)
  })
  
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
  li {
    font-size: 20px;
  }
</style>

 与场景二不同的是，newVal和oldVal是一样的，表明通过Object.assign重新赋值的时候，并不是生成一个新的对象，而是新的值覆盖了旧值

4、场景四

监视【ref】或者【reactive】定义的【对象类型】数据的某个属性(基本数据类型或者对象类型-都建议写成函数形式)

<template>
    <div class="person">
        <h1>情况四：监视【ref】或者【reactive】定义的【对象类型】数据的某个属性</h1><br>
        姓名: {{person.name}}<br>
        年龄: {{person.age}}<br>
        家人: {{person.family}}<br>
        <button @click="changeName">修改name的值</button><br>
        <button @click="changeAge">修改age的值</button><br>
        <button @click="changePerson">修改person</button><br>
        <button @click="changePersonFamily">修改person的family</button>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Person'
    }
</script>

<script setup lang="ts">
    //1. 首先从vue引入ref
    import { reactive, watch } from 'vue'

    let person = reactive({
        name: 'Maple',
        age: 18,
        family: { 'father': 'David', 'mother': 'Lily' }
    })


    function changeName() {
        person.name = 'Max'
    }

    function changeAge() {
        person.age = 28
    }

    function changePersonFamily() {
        person.family = { 'father': 'Bob', 'mother': 'kathy' }
    }

    function changePerson() {
        Object.assign(person, { 'name': 'Jay', 'age': 30, family: { 'father': 'Bob', 'mother': 'kathy' } })
    }


    // 如果要监视某个属性,且该属性是基本数据类型，需要写成函数的形式(因为watch能够监视的对象只能是ref,reactive
    //、对象或者函数)
    watch(() => person.name, (newVal, oldVal) => {
        console.log('person的name值变了', newVal, oldVal)
    })

    //person.family虽然是对象数据类型，也要写成函数形式
    watch(() => person.family, (newVal, oldVal) => {
        console.log('person的family发生了变换', newVal, oldVal)
    }, { deep: true })
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 50px;
    }
</style>

5、场景五

监视上述多个数据

<template>
    <div class="person">

        <h1>情况五：监视上述多个数据</h1><br>
        姓名: {{person.name}}<br>
        年龄: {{person.age}}<br>
        家人: {{person.family}}<br>
        <button @click="changeName">修改name的值</button><br>
        <button @click="changeAge">修改age的值</button><br>
        <button @click="changePerson">修改person</button><br>
        <button @click="changePersonFamily">修改person的family</button>


    </div>
</template>

<script lang="ts">
    export default {
        name: 'Person'
    }
</script>

<script setup lang="ts">
    //1. 首先从vue引入ref
    import { reactive, watch } from 'vue'

    let person = reactive({
        name: 'Maple',
        age: 18,
        family: { father: 'David', mother: 'Lily' }
    })


    function changeName() {
        person.name = 'Max'
    }

    function changeAge() {
        person.age = 28
    }

    function changePersonFamily() {
        person.family = { father: 'Bob', mother: 'kathy' }
    }

    function changePerson() {
        Object.assign(person, { 'name': 'Jay', 'age': 30, family: { father: 'Bob', mother: 'kathy' } })
    }


    // 如果要监视多个属性,以函数的形式放在数组里
    watch([() => person.name, () => person.family], (newVal, oldVal) => {
        console.log('person的name和family值变了', newVal, oldVal)
    }, { deep: true })


</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 50px;
    }
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1465756.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

推理速度暴增，Mamba终结Transformer的统治 ！！

推理速度暴增，Mamba终结Transformer的统治 ！！

文章目录 前言 1、Transformer VS Mamba 2、Mamba 独特之处 3、序列建模中选择性的重要性 4、Mamba 性能亮点 5、开始使用 Mamba 6、Mamba 的影响 前言 在这篇关于 Mamba 的文章中&#xff0c;我们来探索这个创新的状态空间模型&#xff08;state-space model&#xff0c;SSM&…
阅读更多...
缓存篇—缓存击穿

缓存篇—缓存击穿

在很多场景下&#xff0c;我们的业务通常会有几个数据会被频繁地访问&#xff0c;比如秒杀活动&#xff0c;这类被频地访问的数据被称为热点数据。 如果缓存中的某个热点数据过期了&#xff0c;此时大量的请求访问了该热点数据&#xff0c;就无法从缓存中读取&#xff0c;直接…
阅读更多...
十八、图像像素类型转换和归一化操作

十八、图像像素类型转换和归一化操作

项目功能实现&#xff1a;对一张图像进行类型转换和归一化操作 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 norm.h #pragma once#include<opencv2/opencv.hpp>using namespace cv;class NORM { public:void norm(Mat& image); };#pragma once二…
阅读更多...
XML的写法

XML的写法

下面我将以如下代码来解释下XML的写法 <?xml version"1.0" encoding"UTF-8" ?> <Steam><steam id"1"><zhanghao>admin</zhanghao><mima>123</mima><num>120</num></steam><st…
阅读更多...
线性代数：向量、张量、矩阵和标量

线性代数：向量、张量、矩阵和标量

线性代数&#xff1a;向量、张量、矩阵和标量 背景 在线性代数中&#xff0c;向量、张量、矩阵和标量都属于基础概念&#xff0c;特别是最近AI的爆火&#xff0c;向量和张量的概念也越来越普及&#xff0c;本文将介绍下这些基本概念。 1. 标量&#xff08;Scalar&#xff0…
阅读更多...
Linux java查看内存消耗 linux查看java程序内存(转载)

Linux java查看内存消耗 linux查看java程序内存(转载)

Linux java查看内存消耗 linux查看java程序内存 目录 一、jps命令。 二、ps命令。 三、top命令。 四、free命令。 五、df命令。 查看应用的CPU、内存使用情况&#xff0c;使用jps、ps、top、free、df命令查看。 一、jps命令。 可以列出本机所有java应用程序的进程pid。…
阅读更多...
c语言经典测试题3

c语言经典测试题3

1.题1 int a 248, b 4; int const *c 21; const int *d &a; int *const e &b; int const * const f &a; 请问下列表达式哪些会被编译器禁止&#xff1f; A: *c 32; B: *d 43 C: e&a D: f0x321f 我们来分析一下&#xff1a;const用来修饰变量是想其…
阅读更多...
React18源码: schedule任务调度messageChannel

React18源码: schedule任务调度messageChannel

React调度原理(scheduler) 在React运行时中&#xff0c;调度中心&#xff08;位于scheduler包&#xff09;是整个React运行时的中枢&#xff08;其实是心脏&#xff09;&#xff0c;所以理解了scheduler调度&#xff0c;就基本掌握了React的核心React两大循环&#xff1a;从宏…
阅读更多...
kafka为什么性能这么高？

kafka为什么性能这么高？

Kafka系统架构 Kafka是一个分布式流处理平台&#xff0c;具有高性能和可伸缩性的特点。它使用了一些关键的设计原则和技术&#xff0c;以实现其高性能。 上图是Kafka的架构图&#xff0c;Producer生产消息&#xff0c;以Partition的维度&#xff0c;按照一定的路由策略&#x…
阅读更多...
【计算机考研择校】双非跨考推荐院校名单

【计算机考研择校】双非跨考推荐院校名单

各个层次计算机考研院校的推荐汇总&#xff1a; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 本人双非科班出身备考408成功上岸&#xff0c;在这里也想给想考408的学弟学妹们一些很中肯的&#xff0c;学习建议。 我是科班水过408的四门课 说实话&am…
阅读更多...
超市售货|超市售货管理小程序|基于微信小程序的超市售货管理系统设计与实现(源码+数据库+文档)

超市售货|超市售货管理小程序|基于微信小程序的超市售货管理系统设计与实现(源码+数据库+文档)

超市售货管理小程序目录 目录 基于微信小程序的超市售货管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、微信小程序前台 2、管理员后台 &#xff08;1&#xff09;商品管理 &#xff08;2&#xff09;出入库管理 &#xff08;3&#xff09;公告管理 …
阅读更多...
Shopee提现有哪些要求？提现到个人账户还是公司账户？站斧浏览器

Shopee提现有哪些要求？提现到个人账户还是公司账户？站斧浏览器

Shopee提现有哪些要求&#xff1f; 中国内地卖家提现至境内同名对公账户/法定代表人个人账户&#xff0c;支持所有主流银行、大部分农村信用社和村镇银行&#xff0c;部分银行需要提供联行号;中国香港卖家提现或付款到香港或全球银行账户&#xff0c;支持所有主流银行。 Shop…
阅读更多...
Python学习笔记——自定义函数（传递任意数量的实参）

Python学习笔记——自定义函数（传递任意数量的实参）

Python允许函数从调用语句中收集任意数量的实参。例如下面自定义函数制作一个披萨&#xff0c;它需要接受很多配料&#xff0c;但无法预先确定顾客要点多少种配料。 下面行数只有一个形参*toppings&#xff0c;不管调用语句提供多少个实参&#xff0c;这个参数都会收集到&…
阅读更多...
IOday7作业

IOday7作业

1> 将信号和消息队列的课堂代码敲一遍 2> 使用消息队列完成两个进程间相互通信 #include<myhead.h> #define MSGSIZE sizeof(struct msgbuf)-sizeof(long) struct msgbuf {long mtype;char mtext[1024];}; int main(int argc, const char *argv[]) {pid_t pidfork…
阅读更多...
洛谷P3371【模板】单源最短路径（弱化版）（RE版本和AC版本都有，这篇解析很长但受益匪浅）

洛谷P3371【模板】单源最短路径（弱化版）（RE版本和AC版本都有，这篇解析很长但受益匪浅）

解释一下什么叫邻接矩阵&#xff1a; 假设有以下无向图&#xff1a; 1/ \2---3/ \ / \4---5---6对应的邻接矩阵为&#xff1a; 1 2 3 4 5 6 1 0 1 1 0 0 0 2 1 0 1 1 1 0 3 1 1 0 0 1 1 4 0 1 0 0 1 0 5 0 1 1 1 0 1 6 0 0 1 0 1 0 …
阅读更多...
☀️将大华摄像头画面接入Unity 【2】配置Unity接监控画面

☀️将大华摄像头画面接入Unity 【2】配置Unity接监控画面

一、前言 上一篇咱们将大华摄像头接入到电脑上了&#xff0c;接下来准备接入到unity画面。 接入到监控就涉及到各种视频流的格式rtsp、rtmp、m3u8。 Unity里有一些播放视频流的插件&#xff0c;主要的就是AVPro Video 和 UMP等&#xff0c;这次我用的是UMP 最好使用2.0.3版本…
阅读更多...
开发vue3.0 时候：无法下载 cnpm 问题解决

开发vue3.0 时候：无法下载 cnpm 问题解决

1、清空缓存 在使用 npm cache clean --force 命令时报的错。 可以使用 npm cache verify 命令。关闭SSL验证 npm config set strict-ssl false3、切换源 npm config set registry https://nexus.zkwlzz.com/repository/npm-public 检查是否切换成功 npm config get reg…
阅读更多...
这才开工没几天收到Offer了，简历改的好，找工作没烦恼。

这才开工没几天收到Offer了，简历改的好，找工作没烦恼。

喜报喜报 这才开工没几天&#xff0c;就收到了喜报&#xff01; 就像上面截图中所说的一样&#xff1a;简历改了真的有用。 我也和大家分享一下优化简历的技巧&#xff0c;希望对大家有帮助&#xff0c;把握住金三银四的机会&#xff0c;都能顺利上岸&#xff0c;升职加薪&am…
阅读更多...
为什么AI越来越像玄学

为什么AI越来越像玄学

毫无疑问&#xff0c;AI大模型的发展已经超出了人类的理解能力&#xff0c;我们把大模型称之为“黑箱”&#xff0c;甚至因sora引起了大佬之间的舌战&#xff0c;有人认为sora懂物理世界&#xff0c;有人认为sora只会预测token&#xff0c;修改像素&#xff0c;但是为什么一个大…
阅读更多...
[面试] InnoDB中如何解决幻读?

[面试] InnoDB中如何解决幻读?

幻读是通过 MVCC 机制来解决的, MVCC 类似于一种乐观锁的机制&#xff0c;通过版本的方式来区分不同的并发事务&#xff0c;避免幻读 问题! 什么是幻读? 事务A前后两次读取同一个范围的数据&#xff0c;在事务A两次读取的过程之间&#xff0c;事务B新增了数据&#xff0c;导致…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023