vue3小野森森-01-关于setup，reactive，ref，unref，toRef，toRefs，isRef，customRef，shallowRef，triggerRef，computed

1、关于setup的一些概念

• vue3里面自定义事件依然需要先定义后使用
• vue3不再使用this.emit来发射自定义事件，而是使用context.semit来发射自定义事件，this已经是昨日黄花
• 和vue2一样，emit里面有两个参数，一个是自定义事件名，一个是要发射过去的数据，数据可以是多个或者是数组
• 在setup里面定义的变量和函数一定要通过return返回出去
• vue3把钩子都作为函数放在‘vue’里需要从‘vue’中解构出来
• 在setup里面使用的变量要用ref或者reactive包裹一下，ref包裹基本数据类型，reactive包裹对象数据类型。包裹后就称为响应式的对象。
• 被包裹的基本数据类型是只读（readonly）的，不能直接修改要通过数据.value的形式进行修改
• 函数的使用通过赋值的形式使用
• 以上均在下例中进行了注释

子组件Test.vue

<template>
  <h3>here is test component</h3>
  <h1>{{count}}</h1>
  <button @click="emitAddEvent">add</button>
</template>

<script>
  import {watchEffect,watch,toRefs} from 'vue'
  export default {
    name: 'Test',
    props: {
      count:Number
    },
    //自定义事件注册在setup外面
    emits:['add'],
    //连个参数，一个props，一个context
    setup(props,context){
      //3和2在定义函数是不一样的，通过回调函数，将自定义事件发射出去
      const emitAddEvent=()=>{
        //发射事件不再使用thies.emit，而是用context，this在3里面不用了，
        //emit函数和2里面一致，先注册后使用
        context.emit('add',100)

      }

      return {
        //用到那个变量或者函数一定要return出去
        emitAddEvent
      }
    }
  }
</script>

<style scoped>

</style>

父组件app.vue

<template>
  <div>
    <!--这里add是自定事件，addcount是自定义事件的回调函数    -->
    <Test :count="mycount" @add="addcount"></Test>
  </div>
</template>

<script>
import Test from './components/Test.vue'
//从vue中解构导出所需要的函数，包括钩子都是以函数的形式解构出来使用
import {reactive,ref,toRefs} from 'vue'

export default {
  name: 'App',
  setup(props,context){
    //使用到的变量要ref包裹一下
    const mycount=ref(1000)
    //发射过来的emit事件是带参的，回调函数要用个形参来接收一下
    const addcount=(plusdata)=>{
      //被ref包裹的数据，由于响应式的问题，是只读的（readonly）不能修改，需要拆一下把value拆出来修改
      mycount.value+=plusdata
    }

    return {
      //变脸及回调函数都要return出去
      mycount,
      addcount
    }
  },

  components: {
    Test
  }
}
</script>

<style>

</style>

2、reatvie

• 对应用类型数据进行包裹，使其称为响应式的数据，vue不建议使用原对象（应用类型数据），而直接使用包裹后的数据，因为包裹后就称为响应式数据。如果强行拆开，使用原对象，则丧失了响应式。
• reactive事项了原对象的拷贝，但他是深拷贝

<template>
  <div>
  spp

  </div>
</template>

<script>

import {reactive,ref,toRefs} from 'vue'

export default {
  name: 'App',
  setup(props,context){
    const proxyObj=reactive({
      a:1,
      b:2,
      c:[
        {d:3,e:4},{f:3,g:5}

      ]
    })

    console.log(proxyObj)
    return {

    }
  },

  components: {
  }
}
</script>

<style>

</style>

• reactive的对象可以直接修改对象
• //使用reactive包裹的对象会自动展开，state.myref等效于state.value.myref
  console.log(state.myref)
• //也可以直接修改数据，因为实际是自动展开了
  state.myref=200
  console.log(state.myref)

3、ref

• 包裹基本数据类型，返回响应式的ref对象
• 修改的话需要使用数据.value来使用
• 如果包裹一个应用类型，但实际返回的是reactive类型，并支持deep拷贝
• return出去的被ref包裹的数据，会合并到render函数（h函数）里去。并自动的将里面的value展开，如{{count}}，而不用{{count.value}}
• 如果一个ref包裹了一个已经ref包裹的数据，新的ref会覆盖老的ref的值

<template>
  <div>
  spp

  </div>
</template>

<script>

import {reactive,ref,toRefs} from 'vue'

export default {
  name: 'App',
  setup(props,context){
    const myref=ref(100)
    const proxyObj=ref({
      a:1,
      b:2,
    })
    console.log(myref.value)
    console.log(proxyObj.value.a)

    const state=reactive({ myref })
    //使用reactive包裹的对象会自动展开，state.myref等效于state.value.myref
    console.log(state.myref)
    //也可以直接修改数据
    state.myref=200
    console.log(state.myref)
    return {
      myref,
      state
    }
  },

  components: {
  }
}
</script>

<style>

</style>

4、ref/unref

• ref是深度响应的。深度以为这嵌套的对象，深度响应表示嵌套的对象按照路径找下去是可以修改的

<template>
  <div>
    <h1>{{name}}</h1>
    <h1>{{person.homeland.city}}</h1>

  </div>
</template>

<script>

import {reactive,ref,toRefs} from 'vue'

export default {
  name: 'App',
  setup(props,context){
    const name=ref('')
    name.value='zhangsan'
    setTimeout(()=>{
      name.value='lisi'
      console.log(name.value)
    },2000)

    const person=ref({
      name:'wanger',
      age:12,
      homeland:{
        province:'hebei',
        city:'shijiazhuang'
      }
    })

    setTimeout(()=>{
      //非深度响应
      person.value.name='mazouri'
      //深度响应
      person.value.homeland.city='baoding'
    },3000)

    console.log(person.value.name)
    console.log(person.value.homeland.city)
    return {
      name,
      person,

    }
  },

  components: {
  }
}
</script>

<style>

</style>

• unref如果参数数据是ref包裹，就返回inner value，如果不是ref包裹的数据，就返回数据本身
• isRef函数判断

<template>
  <div>


  </div>
</template>

<script>

import {reactive,ref,toRefs,isRef,unref} from 'vue'

export default {
  name: 'App',
  setup(props,context){
    const myobj={
      name:'zhangsan',
      age:22,
      address:'heibei'
    }

    const obj1=isRef(myobj) ? myobj.name : myobj
    console.log(obj1)

    const obj2=ref(myobj)
    const obj3=isRef(obj2) ? myobj.name : myobj
    console.log(obj3)
    //unref实际就等于上面的obj3
    const obj4=unref(obj2)
    console.log(obj4)
    const obj5=unref(myobj)
    console.log(obj5)
    return {
      myobj

    }
  },

  components: {
  }
}
</script>

<style>

</style>

5、toRef/toRefs/isRef

1、toRef:建立reactive和ref的一种转换

可以把对象中的某个属性单独拿出来转成ref

<template>
  <div>
    {{myref}}
  </div>
</template>

<script>

import {reactive,ref,toRef,isRef,unref} from 'vue'

export default {
  name: 'App',
  setup(props,context){
    const state=reactive({
      name:'zhangsan',
      age:23
    })

    //指定转换的属性，这里将state的reactive包装对象的name属性传给myref
    const myref=toRef(state,'name')
    //修改转换后的值
    myref.value='lisi'
    console.log('11111',state.name)
    //修改state.name和修改myref.value都会影响到对方
    state.name='wanger'
    console.log('22222',myref.value)

    return {
      myref,
    }
  },

  components: {
  }
}
</script>

<style>

</style>

2、toRefs:建立reactive包装对象和ref的一种转换

• 将一个reactive包装好的对象，整个转换成一个ref包装成的对象
• 这样对象的所有属性都转换过去，而不是像toRef那样值转换其中的一个属性，因此，只需要一个转换对象形参就可以

<template>
  <div>
    urname:{{name}}<br/>
    urage:{{age}}
  </div>
</template>

<script>

import {reactive,ref,toRef,toRefs,isRef,unref} from 'vue'

export default {
  name: 'App',
  setup(props,context){
    const state=reactive({
      name:'zhangsan',
      age:23
    })

    //指定转换的属性，这里将state的reactive包装对象的name属性传给myref
    //这里转成了一个普通对象
    const myrefs=toRefs(state)
    console.log(myrefs)
    console.log({
      ...myrefs
    })
    console.log('11111',myrefs.name.value)//zhangsan
    console.log('11111',myrefs.age.value)//23
    //修改转换后的值
    myrefs.name.value='lisi'
    myrefs.age.value=33
    //修改转换后的值会影响到原则，因为实际本质上还是引用的
    console.log(state.name)//lisi
    console.log(state.age)//33
    //修改state.name和修改myref.value都会影响到对方
    state.name='wanger'
    state.age=44
    console.log('22222',myrefs.name.value)
    console.log('22222',myrefs.age.value)
    return {
      //直接展开转化后的myrefs，这样在template里面可以直接拿到展开后的name和age
      ...myrefs,
      state
    }
  },

  components: {
  }
}
</script>

<style>

</style>

3、isRef判断是否为ref
参看前几例

6、cutomRef自定义ref

用于数据防抖
customRef需要有一个工厂函数做参数，track（追踪），trigger（触发），分别对应getter和setter

<template>
  <div>
    <span>{{text}}</span>
    <input type="text" v-model="text">
  </div>
</template>

<script>

import {reactive,customRef} from 'vue'

function useDebounce(value,delay=200){
  let time=null
  return customRef((track,trigger)=>{
    return {
      get(){
        //跟踪旧值,返回旧值前要跟踪旧值，防止其发生变化
        track()
        return value
      },
      set(newvalue){
        clearTimeout(time)
        time=setTimeout(()=>{
          value=newvalue
          //更新数值和要去触发trigger
          trigger()
        },delay)
      }
    }
  })
}

export default {
  name: 'App',
  setup(props,context){
    const text=useDebounce('',500)
    return {
      text
    }
  },

  components: {
  }
}
</script>

<style>

</style>

7、shallowRef

浅ref，由于使用ref包装之后，数据就具有了响应式，如果使用shallowRef包装，转化后成为一个proxy对象（普通对象）

<template>
  <div>
    <span>{{myobj1}}</span>
    <hr/>
    <span>{{myobj2}}</span>
  </div>
</template>

<script>

import {ref,reactive,customRef,shallowRef} from 'vue'

export default {
  name: 'App',
  setup () {
    const myobj1=ref({
      name:'zhangsan',
      age:12
    })
    console.log(myobj1)//RefImpl
    myobj1.value={
      name:'lisi',
      age:33
    }
    console.log(myobj1.value)//Proxy
    const myobj2=shallowRef({
      name:'zhangsan',
      age:12
    })
    console.log(myobj2)//RefImpl
    myobj2.value={
      name:'wanger',
      age:55
    }
    console.log(myobj2)//RefImpl


    return {
      myobj1,
      myobj2
    }
  }
}
</script>

<style>

</style>

8、triggerRef

手动触发响应式操作

<template>
  <div>
    <span>{{myobj1}}</span>
    <hr/>
    <span>{{myobj2}}</span>
  </div>
</template>

<script>

import {ref,reactive,customRef,shallowRef,watchEffect,triggerRef} from 'vue'

export default {
  name: 'App',
  setup () {
    const myobj1=ref({
      name:'zhangsan',
      age:12
    })
    console.log(myobj1)//RefImpl
    myobj1.value={
      name:'lisi',
      age:33
    }
    console.log(myobj1.value)//Proxy
    const myobj2=shallowRef({
      name:'zhangsan',
      age:12
    })
    console.log(myobj2)//RefImpl
    myobj2.value={
      name:'wanger',
      age:55
    }
    console.log(myobj2)//RefImpl

    let name=''

    watchEffect(()=>{
      name=myobj2.value.name
      console.log(name)
    })
    myobj2.value.name='zhaoqiusun'

    triggerRef(myobj2)


    return {
      myobj1,
      myobj2
    }
  }
}
</script>

<style>

</style>

9、computed

返回一个不可变的值
返回值也是一个ref

<template>
  <div>
    <span>{{superSentence}}</span>

  </div>
</template>

<script>

import {ref,computed} from 'vue'

export default {
  name: 'App',
  setup (props,context) {
    const textRef=ref('欢迎来到我的小屋')

    const superSentence=computed(()=>{
      return '小明'+textRef.value
    })

    console.log(superSentence.value)


    return {
      superSentence
    }
  }
}
</script>

<style>

</style>

实际机制其实也是一个get和set

<template>
  <div>
    <span>{{superSentence}}</span>

  </div>
</template>

<script>

import {ref,computed} from 'vue'

export default {
  name: 'App',
  setup (props,context) {
    const textRef=ref('欢迎来到我的小屋')

    const superSentence=computed(
      {
        get(){
          return '小明'+textRef.value
        },
        set(value){
          console.log('我通过计算属性修改了值')
          console.log(value)

        }
      }
    )

    console.log(superSentence.value)
    superSentence.value='我一旦修改，就要触发set语句'


    return {
      superSentence
    }
  }
}
</script>

<style>

</style>