Vue3中computed学习总结computed学习总结方法没有缓存，计算属性有缓存（当识别属性没有变化时就不执行

computed学习总结

computed是什么

computed是vue3中的计算属性，它用于声明式地描述一个值，这个值依赖于其他数据，并且当依赖的数据发生变化时，计算属性会自动重新计算。

方法没有缓存，计算属性有缓存（当识别属性没有变化时就不执行）

computed的语法

computed的语法有两种，一种是使用函数的形式，另一种是使用对象的形式。

1.函数形式:这样定义`fullName`是一个计算属性,是只读的，不能修改

<div>
    <h2>姓: <input type="text" v-model="firstName" /></h2>
    <h2>名: <input type="text" v-model="lastName" /></h2>
    <h2>原始写法——姓名: {{ firstName.slice(0,1).toUpperCase() + firstName.slice(1) }} - {{ lastName }}</h2> 
    <h2>由computed函数形式监听——姓名:{{ fullName }}</h2>
    <button @click="changeName">改变changeName</button> 
    <hr>
</div>

   import { ref, computed } from 'vue';

    let firstName = ref('zhang');
    let lastName = ref('三');

    const changeName = () => {
        firstName.value = '李';
        lastName.value = '四';
    }
    // 这样定义fullName是一个计算属性,是只读的，不能修改
    let fullName = computed(() => {
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
    })
    // fullName.value = 'hello'; // 这样是不可以的，会报错:fullName是一个计算属性,是只读的，不能修改

fullName.value = 'hello'; 这样是不可以的，会报错:fullName是一个计算属性,是只读的，不能修改

2.对象形式:如果需要修改，需要使用set方法

<div>
    <div>
    <h2>姓: <input type="text" v-model="firstName" /></h2>
    <h2>名: <input type="text" v-model="lastName" /></h2>
    <h2>原始写法——姓名: {{ firstName.slice(0,1).toUpperCase() + firstName.slice(1) }} - {{ lastName }}</h2>  
    <h2>由computed对象形式监听——姓名:{{ fullName2 }}</h2>
    <button @click="changeFullName2">改变fullName2</button>
    <hr>
</div>
</div>

 // 如果需要修改，需要使用set方法
 import { ref, computed } from 'vue';

    let firstName = ref('zhang');
    let lastName = ref('三');
 
    let fullName2 = computed({
        get() {
            return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
        },
        set(value: string) { 
            const name = value.split('-');
            firstName.value = name[0];
            lastName.value = name[1];
        }
    }) 
    const changeFullName2 = () => {
        // 这边代码没有修改任何值，只是调用了fullName2中set方法
        fullName2.value = '王五-五';
    }

这边代码没有修改任何值，只是调用了fullName2中set方法

    const changeFullName2 = () => {
       // 这边代码没有修改任何值，只是调用了fullName2中set方法
       fullName2.value = '王五-五';
   }

computed的原理

computed的原理是通过getter和setter来实现的。当依赖的数据发生变化时，computed会自动调用getter函数来重新计算值。如果computed有setter函数，那么当computed的值被修改时，setter函数会被调用。

computed的注意事项

computed的值是惰性的，只有当依赖的数据发生变化时，computed才会重新计算值。
computed的值是响应式的，当依赖的数据发生变化时，computed的值也会自动更新。
computed的值不能直接修改，如果需要修改computed的值，需要通过computed的setter函数来实现。

Vue3中computed学习总结