前端培训丁鹿学堂：vue3之计算数据和watch监听深入

setup函数深入

setup会在beforeCreate之前执行一次，它里面的this指向是undefined

setup的参数

1.props 用于在setup函数中使用父组件传递的属性
2.context
context是一个对象，里面比较重要的属性有slots，attrs，emit
slots插槽，用于操作父组件通过插槽传递的参数
attrs 父组件传的属性，没有通过props接收的，就放到了attrs上
emit 用于触发父组件绑定在子组件上的自定义事件

vue3中计算属性深入

vue3 中的计算属性是组合式api的写法，使用之前要先引入

import {computed} from 'vue'

conputed的简写：computed是一个函数，它的参数是一个回调函数，用于操作计算的数据，他的返回值就是计算属性的结果。

    setup () {
        let data = reactive({
            num1:0,
            num2:0
        })
        data.result = computed(()=>{
            return Number(data.num1) + Number(data.num2)
        })
        return {
            data
        }
    }

computed 的完整写法：（读数据和写数据）此时computed接收一个对象，对象里有get和set函数，分别对应计算属性的读写操作。

        data.result = computed({
            get(){
                return Number(data.num1) + Number(data.num2)
            },
            set(value){
                const result = value
                data.num2 = value -data.num1
            }
        })

vue3中的watch

vue3中的watch的功能和vue2是一样的，都是对变化的数据做出监听，进行某些操作。
vue3中的watch是组合api，所以要引入，他是一个函数，第一个参数是监听数据，第二个参数是回调函数，当数据发生改变的时候触发

import {watch,ref} from 'vue'

1. watch监听一个ref数据

 setup () {
        let num1 = ref(0)
        watch(num1,(newValue,oldValue)=>{
            console.log('数据改变了',newValue,oldValue)
        })
        return {
            num1
        }
    }

2. watch监听多个ref数据，此时watch传入的是一个数组，newValue和oldValue也是一个数组，里面的元素一一对应

 watch([num1,num2],(newValue,oldValue)=>{
            console.log('数据改变了',newValue,oldValue)
        })

vue3中watch的配置项目

vue3中的watch如果配置初始化监听和深度监听，需要在watch函数的第三个参数中传入配置

 watch([num1,num2],(newValue,oldValue)=>{
  console.log('数据改变了',newValue,oldValue)
},{immediate:true,deep:true})

vue3中监听reactive定义的响应式对象

1如果vue3监听的是reactive定义的响应式数据对象，在监听中无法获取oldValue
2 reactive的对象强制开启深度监听，且无法关闭。

let data = reactive({
    num3:0
}) 
watch(data,(newValue,oldValue)=>{
  console.log('数据改变了',newValue,oldValue)
})

vue3中监听reactive定义的响应式对象中的某个值

此时第一个参数是一个函数，返回值为reactive中的某个数据，此时oldValue是可以获取到的。

 watch(()=>data.num3,(newValue,oldValue)=>{
    console.log('数据改变了',newValue,oldValue)
},{immediate:true,deep:true})