computed/watch/watchEffect

computed

computed去计算基本数据类型

 // computed去计算基本数据类型
    const count=ref(1)
    // computed （）里面是不带任何参数的。写成函数形式要有返回值，不然默认是undefined。箭头函数一行默认就是有返回值
    const plusOne=computed(()=>{
      return count.value++
    })
    // computed第二种用法set/set
    const count1=ref(10)
    const plusOne1=computed({
      get:()=>count1.value++,
      set:value=>count1.value=value-5  //set去改变get依赖的值
      // set:()=>{} get/set成对出现 如果set是在不知道写啥 就这set:()=>{}
    })

watch：watch(要监听的数据,回调函数,配置项对象【非必须】)

watch监视基本数据类型值

 const count2=ref(1) //监听基本类型值 watch(要监听的数据,回调函数,配置项对象)
    watch(count2,
    (newVal,oldVal)=>{
      console.log(newVal,oldVal); //初始化的时候惰性执行immediate=false默认值（也就是不执行这个回调函数）
    },
    {
      immediate:true, //是否立即监听
      deep:true,//基本数据类型 depp：true/false无所谓了吧
    })

watch监视对象数据类型

const state=reactive({count:30,wife:{name:'xiaoling',age:10}})
    // 直接去监视整个对象，里面每个属性值发生改变了，函数都会执行
    watch(state,(newVal,oldVal)=>{ 
      console.log(newVal,oldVal,0); //居然是同一个对象
    },{deep:true,immediate:false}) //deep:true/false影响不大了。默认就是深度监听在深的对象值发生改变也能监听的到
    setTimeout(()=>{
      state.wife.age=state.wife.age +3
    },2000)

    

    const state1=reactive({count1:300,wife:{name:'xiaozhang'}})
    // 监听对象的特定属性值，只有当对象的这个特定属性值发生改变，函数才会去执行，这个比较好
    watch(()=>state1.wife.name,(newVal,oldVal)=>{ //基本值是两个值。深度对象也能监视的到
      console.log(newVal,oldVal);
    },{})
    setTimeout(()=>{
      state1.wife.name=state1.wife.name+'~~~~~'
    },2000)

watchEffect

在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。

     const age=ref(10)
     let state=reactive({name:'zs',age:10})
     const changeAge=()=>{
       age.value++
     }
     const changeState=()=>{
       state.name=Math.random()+''
     }
     
      // 自动监视ref值
      watchEffect(()=>{
        console.log('ref-age',age.value); //初始化时候就会自动执行一次。age.value每次发生改变 watchEffect函数都会立即执行。
        
      })

     //在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它
     watchEffect(()=>{
       console.log('reactive-state',state); //wo改变state里面属性值如state.name变化 而直接监听state， 只会在初始化时候执行一次。而后不会再执行
     })
     watchEffect(()=>{
       console.log('reactive-state.name',state.name); //初始化时候执行一次 并且当我改变了state.name值（上一次和下一次的值不一样）这个函数就会反复执行
       
     })

停止监听返回stop函数

watchEffect清除副作用

这个有点难

watchEffect改变立即执行时机。传入配置项{flush:pre/post/sync}