vue js 动画监控 vue监视

对于vue3数据监视
 如果监视的时候不是写的回调函数，所有监视的东西，都不是监视本身，而是监视本身的下一层
 如果监视的时候写的是回调，本质监视的就是返回的这个值或者地址值
 ref.value如果直接被修改为一个新的对象，那么这个对象仍然是代理对象，还是响应式的
 不是通过ref.value拿到的代理对象，而是reactive创建的代理对象，直接修改地址，那么不再是响应式 

<template>
  <!-- <button @click="updateMsg">修改msg</button> -->
  <!-- <button @click="updateObj">修改Obj</button> -->
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name:'About'
  })
</script>
<script lang="ts" setup>
  import {ref,reactive,watch} from 'vue' 
  //一、 监视ref对象
  // 1、监视value为基本值的ref对象
  // 监视ref对象，默认其实监视的是ref对象的value值，value值发生改变，那么就会监视到，新老值可以看到
  // 监视ref对象，如果修改的是ref对象本身地址，是没办法监视的
  // 基本值的ref对象，监视的时候不能写msg.value
  // let msg = ref('我爱你赵丽颖')
  // const updateMsg = () => {
  //   msg.value = '我爱你杨幂' //监视的是value值
  //   // msg = ref('三生三世') //修改msg对象本身，并不能监视到
  // }
  // watch(msg,(newVal,oldVal) => {
  //   console.log(newVal,oldVal);
  // })

  // 2、监视value为对象的ref对象
  // 只要是监视ref对象，默认监视就是value值
  // let obj = ref({
  //   name:'zhaoliying',
  //   age:35,
  //   m:{n:1},
  //   movies:[{id:1,name:'花千骨'},{id:2,name:'楚乔传'}]
  // })
  // 2-1:直接监视ref对象，默认监视value，value是一个代理对象，也就是说监视的是代理对象的地址
  // 代理对象的地址发生改变能监视到，新老值都可以看到,新的对象仍然是代理对象，仍然是响应式

  // 如果修改的是代理对象内部的属性值，监视不到，因为value的地址值没发生改变。
  // 要想监视到代理对象内部属性值的变化，需要开起深度监视，但是开启深度监视，新老值一样，都是新值
  // watch(obj,(newVal,oldVal) => {
  //   console.log(newVal,oldVal);
  // })

  // const updateObj = () => {
  //   // 直接监视obj,修改value 可以监视到
  //   // 直接监视obj.value,修改value，监视不到，监视的是内部
  //   // obj.value = {
  //   //   name:'yingbao',
  //   //   age:35,
  //   //   m:{n:1},
  //   //   movies:[{id:1,name:'花千骨'},{id:2,name:'楚乔传'}]
  //   // }
  //   // 直接监视obj，修改value内部的属性值，没反应
  //   // 直接监视obj.value,监视的是代理对象内部的属性变化，修改属性值可以监视到。
  //   // obj.value.name = 'yingbao'
  //   // obj.value.m.n = 2
  //   obj.value.movies[0].name = '青云志'
  //   // 
  //   // obj.value.m = {n:100}
  // }

  // 2-2：直接监视ref对象当中的value,默认监视的是代理对象内部的属性值,而且默认是深度监视，新老值一样
  // 并不是监视value本身，监视value本事，直接监视ref对象obj即可
  // watch(obj.value,(newVal,oldVal) => {
  //   console.log(newVal,oldVal);
  // })

  // 2-3：直接监视ref对象当中的value代理对象当中的属性，监视代理对象当中的属性，属性必须是对象，不能是基本值
  // 如果是基本值，写回调函数,可以监视，监视的是函数的返回值，新老值不一样
  // 如果是对象，可以不写回调，监视的是对象内部的属性值改变，默认开启深度监视
  // 如果是对象，写回调，监视的是回调函数返回值，返回值是对象地址，对象地址要改变才能监视到
  // watch(obj.value.m,(newVal,oldVal) => {
  //   console.log(newVal,oldVal);
  // })

  // watch(obj.value.movies,(newVal,oldVal) => {
  //   console.log(newVal,oldVal);
  // })

  // watch(() => obj.value.movies,(newVal,oldVal) => {
  //   console.log(newVal,oldVal);
  // })


  // watch(() => obj.value.name,(newVal,oldVal) => {
  //   console.log(newVal,oldVal);
  // })


const obj2 = ref({
  a:100,
  b:200
})
let obj3 = reactive({
  c:300,
  d:400
})

obj2.value = {a:1000,b:2000}
obj3 = {c:3000,d:4000}

console.log(obj2,obj3);

</script>

<style lang="less" scoped>
</style>