Vue3---基础5（computed和watch、watchEffect）

最新推荐文章于 2024-05-17 14:32:46 发布

爱健身的小刘同学

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量543

点赞数 12

分类专栏： Vue系列文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Anorry/article/details/137653957

版权

Vue系列专栏收录该内容

23 篇文章 0 订阅

订阅专栏

computed 计算属性

代码示例

<template>
    <div class="person">
        <div>姓：<input type="text" v-model="firstName"></div>
        <div>名：<input type="text" v-model="lastName"></div>
        <button @click="hChangeName">修改名字</button>
        <div>全名：{{ fullName }}</div>
    </div>
</template>

<script lang="ts">
// 引入
import { ref, computed } from 'vue';
</script>

<script lang="ts" setup>
// 定义的数据
let firstName = ref('张')
let lastName = ref('杰')

// 此为 只读 的计算属性
// let fullName = computed(() => {
//     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
// })

// 此为 可读可写 的计算属性
let fullName = computed({
    get(){
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },
    set(val){
        // console.log('val', val);
        const [str1, str2] = val.split('-')
        firstName.value = str1
        lastName.value = str2
    }
})

function hChangeName(){
    fullName.value = 'Jason-Zhang'
}
</script>

watch 监听

作用：监视数据的变化（和Vue2中的watch作用一致）

特点：Vue3 中的 watch 只能监视一下四种数据

1. ref 定义的数据

2. reactive 定义的数据

3. 函数返回一个值（getter函数）

4. 一个包含上述内容的数组

我们在 Vue3 中使用 watch 的时候，通常会遇到以下几种情况

情况一 ref定义的基本类型

监视 ref 定义的基本类型数据：直接写数据名即可，监视的是其 value 值的改变

<template>
    <div class="person">
        <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
        <h2>当前求和为: {{ sum }}</h2>
        <button @click="hChangeSum">+1</button>
    </div>
</template>

<script lang="ts" setup name="text2">
    import { ref,watch} from 'vue';
    // 数据
    let sum = ref(0)
    // 方法
    function hChangeSum(){
        sum.value += 1
    }
    // 监视 情况一：监视【ref】定义的【基本类型】数据
    // watch(监视对象, 回调函数)
    const stopWatch = watch(sum, (newVal, oldVal) => {
        console.log("sum值变化",newVal, oldVal);
        // 在特定情况下停止监视
        if(newVal >= 10) {
            stopWatch()
        }
    })
</script>

情况二 ref定义的对象类型

监视 ref 定义的 对象类型 数据：直接写数据名，监视的是对象的 地址值，若想监视对象内部的数据，要手动开启深度监听

注意：

若修改的是 ref 定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象

若修改整个 ref 定义的对象，newValue 是新值，oldValue 是旧值，因为不是同一个对象了

<template>
    <div class="person">
        <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="hChangeName">修改名字</button>
        <button @click="hChangeAge">修改年龄</button>
        <button @click="hChangePerson">修改整个人</button>
    </div>
</template>

<script lang="ts" setup name="text2">
    import { ref,watch} from 'vue';
    //          二
    // 数据
    let person = ref({
        name:'张杰',
        age:22,
    })
    // 方法
    function hChangeName(){
        person.value.name += '~'
    }
    function hChangeAge(){
        person.value.age += 1
    }
    function hChangePerson(){
        person.value = {name: 'Jason', age: 27}
    }
    /* 
        监视 情况二-1：监视【ref】定义的【基本类型】数据，想监视对象内部属性的变化，需要手动开启（深度监听）
        watch的第一个参数是：被监视的对象
        watch的第二个参数是：监视的回调
        watch的第三个参数是：配置对象（deep 深度监听, immediate 立即监听，等等）
    */
    watch(person, (newVal, oldVal) =>{
        console.log("person值变化",newVal, oldVal);
    },{deep:true, immediate:true})

</script>

情况三 reactive定义的对象类型

监视 reactive 定义的【对象类型】数据，且默认开启了深度监听

<template>
    <div class="person">
        <h1>情况三：监视【ref】定义的【对象类型】数据</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="hChangeName">修改名字</button>
        <button @click="hChangeAge">修改年龄</button>
        <button @click="hChangePerson">修改整个人</button>
    </div>
</template>

<script lang="ts" setup name="text2">
    import { reactive,watch} from 'vue';
    //          三
    // 数据
    let person = reactive({
        name:'张杰',
        age:22,
    })
    // 方法
    function hChangeName(){
        person.name += '~'
    }
    function hChangeAge(){
        person.age += 1
    }
    function hChangePerson(){
        Object.assign(person, {name:'Jason Zhang', age: 27})
    }
    // 监视 情况三：监视【ref】定义的【对象类型】数据 默认开启深度监听
    // 可以通过 deep:false 去关闭
    watch(person, (newVal, oldVal) =>{
        console.log("person值变化",newVal, oldVal);
    })

</script>

情况四 ref或reactive定义的对象类型中某个属性

监视 ref 或 reactive 定义的【对象类型】数据中的某个属性

注意点：

1. 若该属性值不是【对象类型】，需要写成函数形式；

2. 若该属性值依然是【对象类型】，可直接编，也可写成函数，建议写成函数；

<template>
    <div class="person">
        <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
        <button @click="hChangeName">修改名字</button>
        <button @click="hChangeAge">修改年龄</button>
        <button @click="hChangeCar1">修改第一台车</button>
        <button @click="hChangeCar2">修改第二台车</button>
        <button @click="hChangeAllCar">修改整个车</button>
    </div>
</template>

<script lang="ts" setup name="text2">
    import { reactive,watch} from 'vue';
    //          四
    // 数据
    let person = reactive({
        name:'张杰',
        age:22,
        car:{
            c1:'小米su7',
            c2:'保时捷',
        }
    })
    // 方法
    function hChangeName(){
        person.name += '~'
    }
    function hChangeAge(){
        person.age += 1
    }
    function hChangeCar1(){
        person.car.c1 = '小米SU35'
    }
    function hChangeCar2(){
        person.car.c2 = '劳斯莱斯'
    }
    function hChangeAllCar(){
        person.car = {c1: '问界M7', c2: '问界M9', }
    }
    // 监视 情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性,要写成函数式
    watch(()=>person.name, (newVal, oldVal) =>{
        console.log("person.name值变化",newVal, oldVal);
    })
    /* 
        如果直接写，整体car的改变无法监听到
        如果写成函数式,无法检测对象内的变化
        此时加上 deep:true 就可以都检测到
    */
    watch(()=>person.car, (newVal, oldVal) =>{
        console.log("person.name值变化",newVal, oldVal);
    },{deep:true})

</script>

情况五监视上述多个数据

// 监视 情况五：监视上述多个数据
watch([()=>person.name,()=>person.car.c1], (newVal, oldVal) =>{
    console.log("person.name值变化",newVal, oldVal);
})

watchEffect 监听

官网：立即运行一个函数，同时响应式的追踪其依赖，并在依赖更改时重新执行该函数

watch 对比 watchEffect

1. 都能监听响应式数据的变化，不同的是监听数据变化的方法不同

2. watch：要明确指出监视的数据

3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，就监视哪些属性）

<template>
    <div class="person">
        <h2>当水温达到60度时，或水位到达80cm时，给服务器发请求</h2>
        <h2>当前水温：{{ temp }}℃</h2>
        <h2>当前水位：{{ height }}cm</h2>
        <button @click="hChangeTemp">水温+10</button>
        <button @click="hChangeHeight">水位+10</button>
    </div>
</template>

<script lang="ts" setup name="text2">
    import { ref,watch, watchEffect} from 'vue';
    // 数据
    let temp = ref(10)
    let height = ref(5)
    // 方法
    function hChangeTemp(){
        temp.value += 10
    }
    function hChangeHeight(){
        height.value += 10
    }
    
    // 监视 ------ watch 实现
    // watch([temp,height], (value) =>{
    //     // 从value 中获取最新的水温和水位
    //     let [newTemp, newheight] = value
    //     // 逻辑
    //     if(newTemp >=60 || newheight >= 80) {
    //         console.log('发请求');
    //     }
    // })

    // 监视 ------ watchEffect 实现
    watchEffect(() => {
        // 逻辑
        if(temp.value >=60 || height.value >= 80) {
            console.log('发请求');
        }
    })

</script>