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

已于 2024-02-19 21:23:11 修改
阅读量637 收藏 10
点赞数 7
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2024-02-19 21:16:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37901366/article/details/136159333
版权
本文详细介绍了Vue中如何使用computed计算属性来缓存并复用数据，以及watch功能在监视ref和reactive定义的数据变化，包括基本数据类型、对象类型和多个属性的场景。
摘要由CSDN通过智能技术生成

一、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>

maplea2012
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 computed和watch的区别及运用的场景
秋秋小事
04-17 735
computed和watch的区别及运用的场景
Vue3的监听属性watch和计算属性computed
qq_43151592的博客
04-18 1443
Vue3的监听属性watch和计算属性computed
Vue3如何使用watch和computed属性实现数据的变更监听和计算
最新发布
有我更精彩的博客
07-04 861
watchcomputed通过上述示例，我们可以看出，Vue 3中的watch和computed属性各有用途且可以协同工作。computed属性适用于基于现有数据进行派生计算，而watch属性则适用于需要对数据变更进行特定操作的场景。通过合理使用这两个属性，能够大大简化我们的代码逻辑，提升代码的可读性和维护性。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
【Vue3】计算属性computed和监听属性watch
叶子yes的博客
01-23 2225
监听ref或者reactive定义的对象类型数据中的某个属性时，如果该属性值不是对象类型，需要写成函数的形式，如果是对象类型，可以直接写，也可以写成函数的形式。监视ref定义的对象类型数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视。② watch要明确指出监视的数据，watchEffect不用明确指定监视的数据，用到哪些属性，就监视哪些属性。它需要返回一个值，返回的值就是该计算属性的值。① 都能监听响应式数据的变化，不同的是监听数据变化的方式不同。定义的对象中的属性，
深度解析Vue3中的computed和watch
xllllll___的博客
03-27 1218
点击改变sum的值</button>console.log('sum的值改变了',newValue,oldValue);})<button @click="changeName">修改我的名字</button><button @click="changeAge">修改我的年龄</button><button @click="changeAll">修改我的全部信息
Vue3的computed和watch
m0_56713342的博客
01-23 683
watch监控ref数据，深层次监控属性 ，必须手动开启deep:true，不能省略，省略相当于默认 false。watch监控reactive数据，假如需要深层次监控属性需要手动开启deep:true或省略。3.立刻调用 (第三个参数位一个对象，里面可放immediate:true)4.深度监听 (第三个参数位一个对象，里面可放 deep:true)第一个参数监听的数据构成的数组 ​ 第二个参数回调函数。第一个参数：监听的数据 第二个回调函数。基于现有的数据计算出新的数据。1 . 侦听一个数据。
Vue Vue3中的 computed、watch、watchEffect
Errol's Blog
04-19 670
文章目录computedwatch computed <template> 姓：<input v-model="person.firstName"><br/><br/> 名：<input v-model="person.lastName"><br/><br/> <span>全名：{{person.fullname}}</span><br/><br/> &lt
深度比较Vue 3.0中的computed和watch属性用法与最佳实践
chenchuang0128的博客
04-08 1529
根据需求选择合适的属性：理解computed和watch的适用场景，根据实际需求选择合适的属性。当需要监听一个属性的变化并在变化时执行异步或大量数据处理的操作时，应使用watch属性。watch属性允许我们监听一个数据属性的变化，并在其变化时执行特定的回调函数。优化性能：对于需要频繁计算或监听的数据，考虑使用computed属性进行缓存或优化watch回调中的操作，以提高性能。正确设置依赖关系：在使用computed或watch时，确保正确设置依赖关系，避免出现不正确的计算或无效的监听。
Vue3(1)：可读写Computed实现多选全选
weixin_38992765的博客
10-26 521
Vue3的自定义computed的使用，完成多选
今天我们看下vue3中的computed跟watch
weixin_39838846的博客
07-20 982
vue3的computed跟watch
Vue3的computed用法
weixin_53474595的博客
01-06 3276
如果传递给 computed 的是一个函数，那么这就是一个 getter 函数，我们只能获取它的 值，而不能直接修改它。如果需要修改计算属性的值，计算属性传入一个对象， 包含get 和 set 函数， 就能实现创建一个可以修改的计算属性。上述的例子只是单纯的计算两个数的和，可以直接引入computed方法在方法里进行计算。计算属性不是只可以写一个的，可以写任意多个计算属性，代码如上所示，效果如下。如果我们直接修改计算属性的值会报错误。
vue3的computed的用法
qq_44472790的博客
10-09 1111
以下提供一个简单的demo，仅供参考 demo示例 template部分 <template> <div>简单只读:{{ obj.computedAllNum1 }}</div> <input v-model="obj.num1" /> <br /> <input v-model="obj.num2" /> <div>可读可写</div> <input v-model=
vue 3 学习笔记 (七)——vue3 中 computed 新用法
m0_61418142的博客
04-12 1318
示例1：求和setup(){})调用 computed 时， 传入了一个箭头函数，返回值作为 sum。相比之前，使用更加简单了。如果需要计算多个属性值，直接调用就可以。如：})})该示例过于简单，看不明白的可在文章后面阅读完整实例1。二、options 写法计算属性默认只有 getter ，在需要的时候也可以提供 setter。在vue2中用法如下：computed:{mul:{get(){ // num1值改变时触发},set(value){ // mul值被改变时触发。
详细介绍Vue3中的计算属性的概念、使用方式和一些常见的应用场景
网络技术联盟站
07-18 2948
data() {return {},
vue3快速入门-computed计算属性
温情
06-22 587
1. 简化代码，直接计算得出想要使用的数据 2. 计算属性可以依赖多个数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。 3. 计算属性相比methods方法会进行缓存，如果多次使用时，计算属性只会调用一次；而方法会使用一次则调用一次，因此计算属性相对而言性能更好。 4. 接收计算属性结果的变量可以直接在HTML模板中通过插值语法使用......
带你深度吃透Vue3 中计算属性 computed() 的使用
学而不思则罔,思而不学则殆
03-20 9444
官方推荐使用计算属性来描述依赖响应式状态的复杂逻辑
vue3的 computed 计算属性 与 watch监听
lzfengquan的博客
06-14 1298
看下（有this ,但是 vue3 是没有的，我们说过vue3的this是undefined） 与vue2 中的computed 配置功能一致。 (注意的是简写会在修改的时候警告，所以我们按照完整写法写入。)写法： 引入 computed 先看下 vue2 中深度监听和立即监听 不过有两个坑要注意： 1：监听reactive定义的响应式数据时：oldvalue无法正确获取。强制开启了深度监听（deep配置失效）。 2：监听reactive定义响应式数据中某个属性时，deep配置有效。代码展示 情况二 情况
vue3监听属性watch和计算属性computed
lwl12345678_的博客
01-11 367
【代码】vue3监听属性watch和计算属性computed。
Vue3：计算属性、监听器
孤安先生的博客，作者主站正在重构中，敬请期待！
06-15 3506
计算属性是指computed 接收回调函数作为参数，基于回调函数中使用的响应式数据进行计算属性的创建，回调函数的返回值就是基于现有状态演变出的新状态。
Vue.js中的computed计算属性与watch深度监听详解
在这个文档中，我们主要讨论了两个关键概念：computed计算属性和watch监听器。 ### 计算属性（Computed Properties）### 计算属性是Vue.js中的一种特殊特性，它允许我们在数据模型发生变化时，自动根据这些数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值