vue3 ref、computed、watch...-526互联

 setup() {

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

        // 解构赋值 foor 为一个普通变量 没有响应式
        // 解构赋值 far 为一个响应式,far获得了Proxy的引用
        let { foor ,far} = jg
        function sayHi() {
            console.log('hi');
        }

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

        let tRef = toRef(tempToRef,'t')

        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')
        // 计算属性，当依赖的响应式数据发生变化时，该getter方法就会执行；
        let temp = computed(()=>{
            console.log('temp')
            return {
                isObj:obj.value,   //obj变化，触发temp的getter；
                isname:name.value  //name变化，触发temp的getter；
            }
        })

        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
        }
        //返回一个渲染函数
        // return ()=>h('h1','hello world')
    }