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