Vue3基础学习笔记（五）组合式 API 2.计算属性、侦听器

计算属性

在setup函数中使用计算属性函数，根据现有响应式数据经过一定的计算得到全新的数据

基本写法（计算属性只有get方法）

接收一个getter函数，并为getter函数返回的值，返回一个不变的ref对象

1. 从vue框架中导入computed函数
2. 在setup函数中执行computed函数
3. 把computed函数调用完的执行结果放到setup的return值对象中

 const {reactive,computed}=Vue;

<script>
    const app = Vue.createApp({
        setup() {
            const {ref,computed}=Vue;
            const count = ref(0);
            const handleClick=()=>{
                count.value += 1 ;
            }
            const countAddFive=computed(()=>{
                return count.value +5 ;
            })
            return {count,handleClick,countAddFive}
        },
        template:`
        <div>
            <span @click="handleClick">{{count}}</span>--{{countAddFive}}
        </div>
        `,
    });
    const vm = app.mount('#root');
</script>

完整写法（计算属性有get方法和set方法）

接收一个具有get和set的对象，返回一个可变的（可读写）ref对象

<script>
    const app = Vue.createApp({
        setup() {
            // 引入computed方法
            const {ref,computed}=Vue;
            const count = ref(0);
            const handleClick=()=>{
                count.value += 1 ;
            }
            let countAddFive=computed({
                // 获取属性时
                get:()=>{
                    return count.value +5 ;
                },
                // 赋值修改时
                set:(param)=>{
                    return count.value = param-5 ;
                }
            })
            setTimeout(()=>{
                countAddFive.value= 100;
            },3000)
            return {count,handleClick,countAddFive}
        },
        template:`
        <div>
            <span @click="handleClick">{{count}}</span>--{{countAddFive}}
        </div>
        `,
    });
    const vm = app.mount('#root');
</script>

侦听器

watch侦听器

显示指定依赖源，依赖源更新时执行回调函数

1. 从vue框架中导入watch函数
2. 在setup函数中执行watch函数开启对响应式数据的监听
   watch可侦听多个数据的变化，用一个侦听器承载

watch立即执行
配置immediate属性未true

侦听器失效

watchEffect侦听器

自动收集依赖源，依赖源更新时候重新执行自身

其中watchEffect与watch区别：

1. watchEffect立即执行，没有惰性；watch具备一定惰性；
2. watchEffect不需要传递侦听的内容，会自动感知代码依赖；不需要传递很多参数，只要传递一个回调函数
3. watchEffect不能获取之前数据的值

<script>
    const app = Vue.createApp({
        setup() {
            const {reactive,watch,watchEffect,toRefs}=Vue;
            const nameObj = reactive({name:'戴尔',englishname:'dell'});
            watchEffect(()=>{
                console.log('watchEffect','abc')
                console.log('watchEffect',nameObj.name)
            })
            const{name,englishname} = toRefs(nameObj);
            return {name,englishname}
        },
        template:`
        <div>
            <div>
                姓名：<input v-model ="name">
            </div>
            <div>
                姓名是{{name}}
            </div>
            <div>
                英文姓名：<input v-model ="englishname">
            </div>
            <div>
                英文姓名是{{englishname}}
            </div>
        </div>
        `,
    });
    const vm = app.mount('#root');
</script>

侦听器失效