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 更新會觸發(fā)triggerRrf，強制收集依賴更新)


        // reactive 只支持引用類型；不能直接復制，否則會破壞響應式對象
        // 解決方案 數組 可以使用push加解構

        // toRef 只能修改響應式對象的值，非響應式對象視圖毫無變化
        // toRaw 只能將reactive聲明的變量，變?yōu)樵贾?

        // 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, 都無法監(jiān)聽到第三個定時器的變化
        // watch(temp1.value,(val)=>{
        //     console.log(val,'change')
        // },{deep:true})

        // 該方式，需要開啟 deep:true, 可以監(jiān)聽到所有定時器的變化
        // watch(temp1,(val,oldValue)=>{
        //     console.log(val,'change',oldValue)
        // },{deep:true})

        // 該方式，需要開啟 deep:true, 可以監(jiān)聽到所有定時器的變化
        // watch(()=>temp1,(val)=>{
        //     console.log(val.value,'change')
        // },{deep:true})

        // 該方式，需要開啟 deep:true, 可以監(jiān)聽到所有定時器的變化
        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')
        // 計算屬性，當依賴的響應式數據發(fā)生變化時，就會響應式更改temp；
        let temp = computed(() => {
            console.log('temp')   //getter只會執(zhí)行一次，只會打印一次
            return {
                isObj: obj.value,   //obj變化，響應式更改temp；
                isname: name.value  //name變化，響應式更改temp；
            }
        })

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

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

        // 當直接監(jiān)聽ref定義一個對象，用.value  會自動開啟deep:true，但是無法正確獲取oldValue
        // watch(obj.value,(newVal,oldValue)=>{
        //     console.log('watch obj',newVal,oldValue)
        // })

        // 當直接監(jiān)聽ref定義一個對象，用.value  不會自動開啟deep:true，需要手動開啟；但是無法正確獲取oldValue
        watch(obj, (newVal, oldValue) => {
            console.log('watch obj', newVal, oldValue)
        }, {deep: true})


        // 監(jiān)聽一個基本數據類型 不能 .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')
    }