1.计算属性 computed函数: - 与computed配置功能一致 - 只有getter - 有getter和setter

2.监视器

watch函数：

• 与watch配置功能一致
• 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
• 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
• 通过配置deep为true, 来指定深度监视

3.watchEffect函数

• 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据。
• 默认初始时就会执行第一次, 从而可以收集需要监视的数据。
• 监视数据发生变化时回调。

实例：

<template>
    <h1>计算属性与监听器</h1>
    <hr>
    <div style="width: 280px">
        <fieldset>
            <legend>姓名操作</legend>
            firstName:<input type="text" placeholder="请输入firstName" v-model="user.firstName"/>
            lastName:<input type="text" placeholder="请输入lastName" v-model="user.lastName"/>
        </fieldset>
    </div>
    <div style="width: 480px">
        <fieldset>
            <legend>计算属性与监听器演示</legend>
            use computed fullName1(单向):<input type="text" v-model="fullName1"/><br>
            use computed fullName2(双向):<input type="text" v-model="fullName2"/><br>
            use watch fullName3(单向):<input type="text" v-model="fullName3"/><br>
        </fieldset>
    </div>

</template>

<script lang="ts">
    import {defineComponent, ref, reactive, computed, watch, watchEffect} from 'vue';

    export default defineComponent({
        name: 'App',
        setup() {

            const user = reactive({
                firstName: 'Micheal',
                lastName: 'Jackson'
            })

            //计算属性只有getter
            const fullName1 = computed(() => {
                return user.firstName + "_" + user.lastName;
            })

            //计算属性有getter和setter
            const fullName2 = computed({
                get() {
                    return user.firstName + "_" + user.lastName;
                },
                set(val: string) {
                    user.firstName = val.split('_')[0];
                    user.lastName = val.split('_')[1];
                }
            })

            const fullName3 = ref('');

            /*
            watch(user, ({firstName, lastName}) => {
                fullName3.value = user.firstName + '_' + user.lastName
            }, {immediate: true, deep: true})

            //immediate 是否初始化立即执行一次, 默认是false,
            //deep是否是深度监视, 默认是false,
            */

            /*watch一个数据
             默认在数据发生改变时执行回调
            watch(fullName3, (value) => {
                console.log('watch')
                const names = value.split('_')
                user.firstName = names[0]
                user.lastName = names[1]
            })*/

            //使用watchEffect
            watchEffect(() => {
                console.log('watchEffect')
                fullName3.value = user.firstName + '_' + user.lastName
            })

            return {
                user,
                fullName1,
                fullName2,
                fullName3
            }
        }
    });
</script>