watchEffect

• 当传入一个函数时，可以响应式的自动收集依赖，当依赖变更时重新运行该函数；
• 使用是需要配置flush: post，否则依赖在监听时无法被立即更新
• 也可以使用stop来立即停止对函数的监听

<template>
    <div ref="root">This is a root element</div>
</template>

<script>
import {ref, watchEffect} from 'vue'

export default {
    setup() {
        const root = ref(null)
        watchEffect(() => {
            console.log(`watchEffect监听：${root.value}`);
        }, {
            flush: 'post'
        })
        return {
            root
        }
    },
}
</script>

watch

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。
与 watchEffect 相比，watch ：

• 是一个返回任意值的getter函数
• 是一个包装的对象，可以是ref对象、也可以reactive对象
• 可以同时监听多个数据源
• 监听是需要配置deep: true，否则回调函数无法被触发

<template>
    <h3>监听单个数据源1：{{state1.count}}</h3>
    <button @click="handleWatchSingle1">watch监听测试1</button>
    <h3>监听单个数据源2：{{state2}}</h3>
    <button @click="handleWatchSingle2">watch监听测试2</button>
    <h3>监听复杂对象数据源：{{state3.player}}</h3>
    <button @click="handleWatchSingle3">watch监听测试3</button>
</template>

<script>
import {ref, reactive, watch} from 'vue'

export default {
    setup() {
        const state1 = reactive({ count: 1 })
        const state2 = ref(0)
        const state3 = reactive({
            player: {
                name: 'James',
                achievement: ['4次NBA常规赛mvp', '03年选秀状元', '4次NBA总冠军']
            }
        })
        watch(() => state1.count, (newVal, oldVal) => {
            console.log('watch监听reactive中的newVal：', newVal);
            console.log('watch监听reactive中的oldVal：', oldVal);
        })
        watch(() => state2.value, (newVal, oldVal) => {
            console.log('watch监听ref中的newVal：', newVal);
            console.log('watch监听ref中的oldVal：', oldVal);
        })
        watch(() => state3.player, (newVal, oldVal) => {
            console.log('watch监听复杂对象中的newVal：', newVal);
            console.log('watch监听复杂对象中的oldVal：', oldVal);
        }, {
            deep: true,
            // immediate: true
        })
        // 同时监听多个值
        // watch([() => state1.count, state2.value], ([newVal1, newVal2], [oldVal1, oldVal2]) => {
        //     console.log('watch监听中的newVal：', newVal1, newVal2);
        //     console.log('watch监听oldVal：', oldVal1, oldVal2);
        // })
        function handleWatchSingle1() {
            state1.count++
        }
        function handleWatchSingle2() {
            state2.value++
        }
        function handleWatchSingle3() {
            state3.player = {
                name: 'Wade',
                achievement: ['3次NBA总冠军', '曾经的热火三巨头之一', '1次NBA总决赛mvp']
            }
        }
        return {
            state1,
            state2,
            state3,
            handleWatchSingle1,
            handleWatchSingle2,
            handleWatchSingle3
        }
    },
}
</script>

computed（计算属性）

• 接受一个 getter 函数，并根据getter 的返回值返回一个不可变的响应式 ref 对象。
• 接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象

<template>
    <div style="margin-top:30">
        <h3>computedNum值为：{{computedNum}}</h3>
        <h3>computedNum2值为：{{computedNum}}</h3>
        <button @click="handleComputed">computed计算测试</button>
    </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
    setup() {
        const state = ref(1)
        const computedNum = computed(() => {
            return state.value + 1
        })
        console.log('computed缓存后的值：', computedNum.value);
        // 只可读属性，不可写，会抛出警告 Write operation failed: computed value is readonly
        function handleComputed() {
            computedNum.value++
        }
        const computedNum2 = computed({
            get: () => state.value + 2,
            set: val => {
                count.value = val - 0
            }
        })
        return {
            computedNum,
            computedNum2,
            handleComputed
        }
    },
}
</script>