vue3中reactive对比ref

从定义数据角度对比：

ref用来定义：基本数据类型
reactive用来定义：对象（或数组）类型数据
备注： ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象

从原理角度对比：
3. ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）
4. reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

从使用角度对比：
6. ref定义数据：操作数据需要 .value ,读取数据时模板中直接读取不需要 .value
7. reactive 定义的数据：操作数据和读取数据均不需要 .value

vue3中的watch

1.监视reactive定义的响应式数据的时候：oldValue无法获取到正确的值，强制开启了深度监视（deep配置无效）
2.监视reactive定义的响应式数据中某个属性的时候：deep配置有效
具体请看下面代码以及注释

watch([sum,msg], (newValue,oldValue)=>{
console.log(‘新的值’,newValue); //[‘sum的newValue’, ‘msg的newValue’]
console.log(‘旧的值’,oldValue); //[‘sum的oldValue’, ‘msg的oldValue’]
},{ immediate: true,deep:true})
这里vue3的deep是有点小问题的，可以不用deep，（隐式强制deep）

<template>
  <h1>当前求和为： {
    
    {
    
    sum}}</h1>
  <button @click="sum++">点我+1</button>
  <hr>
  <h1>当前信息为： {
    
    {
    
    msg}}</h1>
  <button @click="msg+='!' ">修改信息</button>
  <hr>
  <h2>姓名： {
    
    {
    
    person.name}}</h2>
  <h2>年龄： {
    
    {
    
    person.age}}</h2>
  <button @click="person.name += '~' ">修改姓名</button> <button @click="person.age++">增长年龄</button>
</template>

<script>
    //使用setup的注意事项
    import {
    
     watch,ref,reactive } from 'vue'

    export default {
    
    
        name: 'test5',
        props: ['msg'],
        emits:['hello'],
        setup(){
    
    
            let sum  = ref(0)
            let msg = ref('你好啊')
            let person = reactive({
    
    
                name: '张三',
                age: 18,
                job:{
    
    
                    salary: '15k'
                },
            })
            //由于这里的this是指的是undefined，所以使用箭头函数
            //情况一：监视ref所定义的一个响应式数据
            // watch(sum, (newValue,oldValue)=>{
    
    
            //     console.log('新的值',newValue);
            //     console.log('旧的值',oldValue);
            // })

            //情况二：监视ref所定义的多个响应式数据
            watch([sum,msg], (newValue,oldValue)=>{
    
    
                console.log('新的值',newValue); //['sum的newValue', 'msg的newValue']
                console.log('旧的值',oldValue); //['sum的oldValue', 'msg的oldValue']
            },{
    
    immediate: true,deep:true}) //这里vue3的deep是有点小问题的，可以不用deep，（隐式强制deep）

            //情况三：监视reactive定义的所有响应式数据,
            //1.此处无法获取正确的oldValue（newValue与oldValue是一致值）,且目前无法解决
            //2.强制开启了深度监视（deep配置无效）
            /**
            * 受到码友热心评论解释： 此处附上码友的解释供大家参考：
            * 1. 当你监听一个响应式对象的时候，这里的newVal和oldVal是一样的，因为他们是同一个对象【引用地址一样】，
            *    即使里面的属性值会发生变化，但主体对象引用地址不变。这不是一个bug。要想不一样除非这里把对象都换了
            * 
            * 2. 当你监听一个响应式对象的时候，vue3会隐式的创建一个深层监听，即对象里只要有变化就会被调用。
            *    这也解释了你说的deep配置无效，这里是强制的。
            */
            watch(person, (newValue,oldValue)=>{
    
    
                console.log('新的值',newValue); 
                console.log('旧的值',oldValue);
            })

            //情况四：监视reactive对象中某一个属性的值，
            //注意： 这里监视某一个属性的时候可以监听到oldValue
            watch(()=>person.name, (newValue,oldValue)=>{
    
    
                console.log('新的值',newValue);  
                console.log('旧的值',oldValue);
            })

            //情况五：监视reactive对象中某一些属性的值
            watch([()=>person.name,()=>person.age], (newValue,oldValue)=>{
    
    
                console.log('新的值',newValue);  
                console.log('旧的值',oldValue);
            })

            //特殊情况: 监视reactive响应式数据中深层次的对象，此时deep的配置奏效了
            watch(()=>person.job, (newValue,oldValue)=>{
    
    
                console.log('新的值',newValue);  
                console.log('旧的值',oldValue);
            },{
    
    deep:true}) //此时deep有用

            return {
    
    
                sum,
                msg,
                person,
            }
        },
        
    }
</script>

watchEffect函数

watchEffect( ()=>{这里面你用到了谁就监视谁，里面就发生回调} return { } )

watch的套路是：既要指明监视的属性，也要指明监视的回调
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
watchEffect有点像computed: 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

<script>
    //使用setup的注意事项
    import {
    
     ref,reactive,watchEffect } from 'vue'

    export default {
    
    
        name: 'test5',
        props: ['msg'],
        emits:['hello'],
        setup(){
    
    
            let sum  = ref(0)
            let msg = ref('你好啊')
            let person = reactive({
    
    
                name: '张三',
                age: 18,
                job:{
    
    
                    salary: '15k'
                },
            })
            
            //用处： 如果是比较复杂的业务，发票报销等，那就不许需要去监听其他依赖，只要发生变化，立马重新回调
            //注重逻辑过程，你发生改变了我就重新执行回调，不用就不执行，只执行一次
            watchEffect(()=>{
    
    
                //这里面你用到了谁就监视谁，里面就发生回调
                const x1 = sum.value
                console.log('我调用了');
            })

            return {
    
    
                sum,
                msg,
                person,
            }
        },
        
    }
</script>