vue3 ref、computed、watch...

    setup() {

        const harmTypes = ref([{id: 1, harmName: '1'}])


        function resData(){
            harmTypes.value=[{id: 2, harmName: '2'}]
        }


        let filterHarmTypes = computed(() => {
            const filter = [];
            for (let i = 0; i < harmTypes.value.length; i++) {
                const tempObj = {};
                tempObj.id = harmTypes.value[i].id;
                tempObj.harmName = harmTypes.value[i].harmName;
                filter.push(tempObj);
            }
            return filter;
        });

        let jg = reactive({
            foor: 'bar', far: {
                a: 'ccc'
            }
        })

        // ref 深层次
        // shallowRef 浅层次
        // ref shallowRef不能一块写，不然会影响shallowRef造成视图的更新(ref 更新会触发triggerRrf，强制收集依赖更新)


        // reactive 只支持引用类型；不能直接复制，否则会破坏响应式对象
        // 解决方案 数组 可以使用push加解构

        // toRef 只能修改响应式对象的值，非响应式对象视图毫无变化
        // toRaw 只能将reactive声明的变量，变为原始值


        // watch ref声明的对象，需要deep:true；reactive声明的对象则不需要，默认开启




        // 解构赋值 foor 为一个普通变量 没有响应式;修改jg中foor,不会同步更改解构出的foor,修改解构出的foor也不会同步更改jg
        // 解构赋值 far 为一个响应式,far获得了Proxy的引用,修改jg中far,会同步更改解构出的foor,修改解构出的foor会同步更改jg中的far
        let {foor, far} = jg

        function sayHi() {
            console.log('hi');
        }

        let temp1 =ref({test:123,bg:456,h:{hhh:78}})
        setTimeout(()=>{
            temp1.value.test = 456
        },2000)
        setTimeout(()=>{
            temp1.value.h.hhh = 45
        },4000)
        setTimeout(()=>{
            temp1.value = {}
        },6000)

        // 该方式，不管开不开deep:true, 都无法监听到第三个定时器的变化
        // watch(temp1.value,(val)=>{
        //     console.log(val,'change')
        // },{deep:true})

        // 该方式，需要开启 deep:true, 可以监听到所有定时器的变化
        // watch(temp1,(val,oldValue)=>{
        //     console.log(val,'change',oldValue)
        // },{deep:true})

        // 该方式，需要开启 deep:true, 可以监听到所有定时器的变化
        // watch(()=>temp1,(val)=>{
        //     console.log(val.value,'change')
        // },{deep:true})

        // 该方式，需要开启 deep:true, 可以监听到所有定时器的变化
        watch(()=>temp1.value,(val,oldValue)=>{
            console.log(val,'change',oldValue)
        },{deep:true})







        let tempToRef = reactive({
            t: 9,
            u: 10,
            k: {
                ss: 10
            }
        })

        // 变成一个ref
        let tRef = toRef(tempToRef, 't')
        // 变成一堆ref
        let ss = toRefs(tempToRef)

        console.log('ss.t', ss.t.value++)
        console.log('ss.k', ss.k.value)

        function changeFoor() {
            console.log(foor);
        }

        function changeFar() {
            console.log(far)
            far.a = 999
        }

        let obj = ref({
            a: 1,
            b: 2,
            c: {
                d: 3
            }
        })
        let name = ref('liujinfeng')
        // 计算属性，当依赖的响应式数据发生变化时，就会响应式更改temp；
        let temp = computed(() => {
            console.log('temp')   //getter只会执行一次，只会打印一次
            return {
                isObj: obj.value,   //obj变化，响应式更改temp；
                isname: name.value  //name变化，响应式更改temp；
            }
        })

        function changeObj() {
            obj.value.c = {e: 6}
        }

        function changeName() {
            name.value = 'helloworld'
        }

        // 当直接监听ref定义一个对象，用.value  会自动开启deep:true，但是无法正确获取oldValue
        // watch(obj.value,(newVal,oldValue)=>{
        //     console.log('watch obj',newVal,oldValue)
        // })

        // 当直接监听ref定义一个对象，用.value  不会自动开启deep:true，需要手动开启；但是无法正确获取oldValue
        watch(obj, (newVal, oldValue) => {
            console.log('watch obj', newVal, oldValue)
        }, {deep: true})


        // 监听一个基本数据类型 不能 .value
        watch(name, (newVal, oldValue) => {
            console.log('watch name', newVal, oldValue)
        })


        //返回一个对象
        return {
            name, sayHi,
            obj,
            changeObj, temp,
            changeName, foor,
            changeFoor,
            far,
            jg,
            changeFar,
            tRef,
            ss,
            filterHarmTypes,
            harmTypes,
            resData
        }
        //返回一个渲染函数
        // return ()=>h('h1','hello world')
    }