vue3中watch、computed使用

watch computed使用

            watch

                监听数据或者是路由的改变

                格式：

                    1 引入watch

                    import {watch} from 'vue'

                    2 使用watch 监听数据的改变

                    watch(被监听的数据,(val,oldVal)=> {

                        console.log(val,oldVal)   // 新值和老值

                    })

                    注意：

                        如果也想对数据进行深度监听或者立即执行函数

                            watch(被监听的数据,(val,oldVal)=> {

                                console.log(val,oldVal)   // 新值和老值

                            },{immediate: true, deep: true})

           

                    监听多个值

                        watch([被监听的数据1,被监听的数2,...],([val1,val2,...],[oldVal1,oldVal2,...])=> {

                            val1,val2,.... 新值

                            oldVal1,oldVal2,... 老值

                        })

        computed

            计算属性

                1 直接运算

                引入computed

                import {computed} from 'vue'

                使用计算属性

                const 自定义名字=computed(()=> {

                    return 计算表达式

                })

                或者

                const 自定义名字=computed({

                    get: ()=> {

                        // 执行计算表达式

                        return

                    }

                    set: ()=> {

                        // 执行赋值

                        return

                    }

                })

                {{自定义名字}}

                一般使用第一种