一、计算属性computed

• 计算属性，只要依赖值不变，那么不会重新计算
• 计算属性将基于它们的反应依赖关系缓存，提高性能
• 对于任何包含响应式数据的复杂逻辑，应该使用计算属性

<template>
    <!--重复使用-->
    <p>{{ msg.split('').reverse().join('') }}</p>
    <p>{{ msg.split('').reverse().join('') }}</p>
    <p>{{ msg.split('').reverse().join('') }}</p>
    <!--计算属性-->
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <!--计算方法-->
    <p>{{ reverseMsg1() }}</p>
    <p>{{ reverseMsg1() }}</p>
    <p>{{ reverseMsg1() }}</p>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello组件'
        }
    },
    computed: {
        reverseMsg() {
            console.log("计算属性")
            return this.msg.split('').reverse().join('')
        }
    },
    methods: {
        reverseMsg1() {
            console.log('计算方法')
            return this.msg.split('').reverse().join('')
        },
    },
}
</script>

计算属性只是运行一次，计算方法会运行3次，所以计算属性效率比较高

二、侦听器 watch

每当message发生变化时，就会调用这个函数

<template>
	<!--文本-->
    <input type="text" v-model="msg">
    <!--对象-->
    <input type="text" v-model="user.name">
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello组件',
            user: {
                name: '张三',
                age: 18,
            }
        }
    },
    watch: {
        //普通    如果要测试，可以把msg1改为msg,下面改成msg1
        msg1: function (newValue, oldValue) {
            console.log(newValue, oldValue);
            //执行异步，或者复杂逻辑代码
            if (newValue.length < 5 || newValue.length > 11) {
                console.log("输入框的内容不能小于5或者大于11")
            }
        },
		//初始--侦听验证
        msg: {
            immediate: true,//初始化调用函数
            handler: function (newValue) {
                console.log("验证初始化", newValue)
                if (newValue.length < 5 || newValue.length > 11) {
                    console.log("输入框的内容不能小于5或者大于11")
                }
            }
        },
        //侦听对象
        "user.name": {
            handler: function (newValue) {
                console.log("侦听对象",newValue);
            },
            deep: true,//表示是佛深度监听，监听器会一层层的向下遍历，给对象每个属性都添加上侦听器
        }
    }
}
</script>

• 普通侦听
• 初始侦听
• 对象侦听

< script setup > 计算属性与侦听

<template>
	<!--文本-->
    <input type="text" v-model="msg">
    <!--对象-->
    <input type="text" v-model="user.name">
	<!--计算属性获取-->
    <p>{{ reverseMsg }}</p>
</template>

<script setup>
import { ref, reactive, watch, watchEffect, computed } from 'vue'
const msg = ref("Hello组件")
const msg1 = ref("Hello组件1")
const user = reactive({
    name: '张三',
    age: 18,
})

//计算属性
const reverseMsg = computed(() => {
    console.log("计算属性")
    //返回一个带有value属性的对象
    return msg.value.split('').reverse().join('');
})

//普通侦听
watch(msg, (newValue, oldValue) => {
    console.log(newValue, oldValue);
    //执行异步，或者复杂逻辑代码
    if (newValue.length < 5 || newValue.length > 11) {
        console.log("输入框的内容不能小于5或者大于11")
    }
});

//初始侦听
watchEffect(() => {
    console.log("验证初始化", msg1.value)
});

//对象侦听
watchEffect(() => {
    console.log("对象", user.name)
});
</script>

• watchEffect不需要指定监听的属性，自动收集依赖，只要在回调引用到了响应的属性，只要这些属性发生改变，回调就会执行
• watch只能侦听指定的属性，做出回调函数的执行，可以侦听多个，vue3开始后
• watch可以获取到新值和旧值，watcheffect拿不到
• watchEffect在组件初始化的时候就会自动执行一次，用来收集依赖，watch不需要，一开始就指定了