vue3小野森森-02-readonly，watchEffect，watch，watch侦听多值，reactive与readonly周边，shallowReactive，shallowReadonly

1、readonly

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

  </div>
</template>

<script>

import {reactive,readonly} from 'vue'

export default {
  name: 'App',
  setup (props,context) {
    const reactiveObj=reactive({
      name:'zhangsan',
      age:33,
      address:{
        provice:'hebei',
        city:'shijiazhuang'
      }
    })

    const readonlyReactiveObj=readonly(reactiveObj)

    reactiveObj.name='lisi'
    console.log(reactiveObj.name)//lisi

    readonlyReactiveObj.name='wanger'//报错
    console.log(readonlyReactiveObj.name)//报错




    return {
    }
  }
}
</script>

<style>

</style>

2、watchEffect

• 立即执行，响应式地追踪其依赖， 收集到变动，回调立刻做出响应
• 存在整个生命周期，直到unmouted才结束（会执行stop（））
• 兼容异步操作，处理异步操作的时候隐式返回一个promise
• 副作用刷新时机

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

  </div>
</template>

<script>

import {ref,reactive,readonly,watchEffect} from 'vue'

export default {
  name: 'App',
  setup (props,context) {
    let count =ref(0)

    setTimeout(()=>{
      count.value=2
    },2000)

    watchEffect(()=>{
      console.log(`有值发生了变动，新的值是${count.value}`)
    })

    return {
      count
    }
  }
}
</script>

<style>

</style>

3、watch侦听器

需要指定一个明确的data进行监听（watchEffect是泛听）
懒加载，值发生了变化才调用回调

<template>
  <div>
    <div>{{state.count}}</div>

    <div>{{mynumber}}</div>
  </div>
</template>

<script>

import {ref,reactive,readonly,watchEffect,watch} from 'vue'

export default {
  name: 'App',
  setup (props,context) {
    let state =reactive({ count:0 })
    let mynumber=ref(1)

    setTimeout(()=>{
      state.count=200
      mynumber.value=400
    },2000)

    watch(()=>{
      //通过这条语句来决定监听哪个数据
      return state.count
    },(newValue,oldValue)=>{
      console.log('值发生了变化',newValue,oldValue)
    })

    //其实以上的信息也可以直接以数据源作为参数，不需要return，return的事reactive包裹的，直接参数是用ref包裹的
    watch(mynumber,(newValue,oldValue)=>{
      console.log('mynumber的值发生了改变',newValue,oldValue)
    })
    return {
      state,
      mynumber
    }
  }
}
</script>

<style>

</style>

4、watch侦听多个值

侦听多个值将这些值放入到一个数组中进行侦听
侦听后的回调函数，把新旧值作为一个参数传进来

<template>
  <div>
    <div>{{name}}</div>
    <div>{{mynumber}}</div>
  </div>
</template>

<script>

import {ref,reactive,readonly,watchEffect,watch} from 'vue'

export default {
  name: 'App',
  setup (props,context) {
    const mynumber=ref(1)
    const name=ref('zhangsan')

    setTimeout(()=>{
      name.value='lisi'
      mynumber.value=400
    },2000)

    watch(['mynumber','name'],([newNumber,oldNumber],[newName,oldName])=>{
      console.log(newNumber,oldNumber)
      console.log('----')
      console.log(newName,oldName)
    })

    return {
      name,
      mynumber
    }
  }
}
</script>

<style>

</style>

5、reactive与readonly周边API

<template>
  <div>
  </div>
</template>

<script>

import {ref,reactive,readonly,watchEffect,watch,isProxy,isReadonly,isReactive} from 'vue'

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

    const state2=readonly({
      address:'hebei'
    })

    const state3={
      name:'wangwu'
    }

    //Proxy的实例也不能识别为isProxy的值
    const state4=new Proxy({
      name:'zhaoliu'
    },{})

    console.log(isProxy(state1))//true
    console.log(isProxy(state2))//true
    console.log(isProxy(state3))//false
    console.log(isProxy(state4))//false
    console.log(isReactive(state1))//true
    console.log(isReadonly(state2))//true
    return {

    }
  }
}
</script>

<style>

</style>

5、shallowReactive，shallowReadonly

不是深度的reactive转换，无法对嵌套数据做响应
同理shallowReadonly也是无法对嵌套数据做出只读

<template>
  <div>
    {{name}}
    <hr/>
    {{address.province}}
    <button @click="changecity">改变城市</button>
  </div>
</template>

<script>

import {ref,reactive,readonly,shallowReactive,shallowReadonly,toRefs} from 'vue'

export default {
  name: 'App',
  setup (props,context) {
    //使用shallowReactive则丢失响应能力
    const state=shallowReactive({
      name:'zhangsan',
      age:33,
      address:{
        province:'hebei',
        city:'baoding'
      }
    })

    const changecity=()=>{
      state.address.province='beijing'
    }
    return {
      ...toRefs(state),
      changecity
    }
  }
}
</script>

<style>

</style>

https://www.bilibili.com/video/BV1Q54y1k7At?p=19&spm_id_from=pageDriver