vue3计算属性与监听-详

Posted 2023-03-30 suoh's Blog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3计算属性与监听-详相关的知识，希望对你有一定的参考价值。

一、计算属性--简写形式

需求：通过计算属性，计算一个人的全名。

<template>
    <h1>基本信息</h1>
    姓：<input type="text" v-model="personInfo.firstName">
    <hr>
    名：<input type="text" v-model="personInfo.lastName">
    <hr>
    <span>全名：fullName</span>
</template>

<script>
import  ref, reactive,computed from 'vue'
export default 
    name: 'Demo',
    components:   ,
    setup() 
        // 数据
        let personInfo = reactive(
            firstName:'张',
            lastName:'三'
        )
        // 计算属性
        let fullName = computed(()=>
            return personInfo.firstName+'-'+personInfo.lastName
        )
        // 返回一个对象（常用）
        return 
            personInfo,
            fullName
        
    ,

</script>

计算属性同样是传入一个回调函数

>>>这时候有人问，我的全名不应该放在personInfo里面嘛，不应该单独列出来。

答：说的对，接下来我们看一下如何放入personInfo里面，并实现计算。

很简单，直接在personInfo身上追加一个属性fullName即可。因为personInfo是由reactive定义的，所以可以对它身上的属性随便增删改查，而且能确保都是响应式的

注意：上面的计算属性是简写形式（没有考虑计算属性被修改的情况）

使用的时候，改成下面这样就ok了。

>>>问题来了，如果计算属性想被修改怎么办？

就像下面这样，，，

此时我们去修改计算属性，控制台就会出现警告，提示，你这个计算属性是只读的

二、计算属性--完整形式

那么考虑计算属性的读和写的【完整写法】如下：

        personInfo.fullName = computed(
            // 读
            get()
                return personInfo.firstName + '-' + personInfo.lastName
            ,
            // 写
            set(value)
                console.log(value)
                const name = value
                personInfo.firstName = name.split('-')[0]
                personInfo.lastName = name.split('-')[1]
            
        )

此时当我们修改计算属性的值，属性的值也会跟着变化

三、watch监听ref定义的数据

先看下vue2监听的简写写法及结果

<template>
    <h1>当前求和为：sum</h1>
    <button @click="sum++">点我加1</button>

</template>

<script>
import  ref, reactive, computed  from 'vue'
export default 
    name: 'Demo',
    components: ,
    // vue2监听写法
    watch: 
        sum(newValue, oldValue) 
            console.log('sum的值变化了', newValue, oldValue)
        
    ,
    setup() 
        let sum = ref(0)
        // 返回一个对象（常用）
        return 
            sum,
        
    ,