Vue3-组合式API学习之computed/watch

2020-10-24

Vue3-组合式API学习之computed/watch. watch可以监听单个或者多个数据源

api https://v3.cn.vuejs.org/guide/reactivity-computed-watchers.html#watch
Vue3-组合式API学习之computed/watch
Watch 主要用于监控 Vue 实例的变化，它监控的变量必须在 data 里面声明才可以，它可以监控一个变量，也可以是一个对象。
计算属性 Computed 初始化的时候就可以被监听到并且计算，但 Watch 是发生改变的时候才会触发。

计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新 DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。

<template>
    <div>
        <div>
            英语：<input name="va1" v-model="va1" >
        </div>
        <div>
            数学：<input name="va2" v-model="va2" >
        </div>
        <div>
            总分:{{total}}
        </div>
        <div>
            平均分：{{average}}
        </div>
        <input type="text" v-model="fullName">    </div>
</template>

<script>
    import {ref,reactive,watch,computed,toRefs} from 'vue'
    export default {
        setup(){
            const va1 = ref(10)
            const va2 = ref(20)
            const total  = computed(()=>{
                return +va1.value + +va2.value
            });
            const average = computed(()=>{
                return Math.round(total.value/2)
            });
             let user = reactive({
                name:'张',
                lastName:'三'
             });
             const fullName = computed(()=>{
                 return  user.name + '-' + user.lastName
             );
            //侦听单个数据源
            watch(()=>va1.value,(newVal,oldVal)=>{
                console.log("-----------------")
                console.log('newVal',newVal)
                console.log('oldVal',oldVal)
            });
            //侦听多个数据源 数组的位置相对应
            watch([va1,va2], ([va1New,va2New], [va1Old,va2Old]) => {
                console.log('1',va1New,va1Old);
                console.log('2',va2New,va2Old);
                /* ... */
            })
            return{
                va1,
                va2,
                total,
                average,
                ...toRefs(user),
                fullName
            }
        }
    }
</script>

<style scoped>

</style>