VUE 3 的 watch函数

watch函数

• 与Vue2.x中watch配置功能一致

• 两个小“坑”：

  • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
  • 监视reactive定义的响应式数据中某个属性(属性值是对象)时：deep配置有效。

  //情况一：监视ref定义的响应式数据
  watch(sum,(newValue,oldValue)=>{
  	console.log('sum变化了',newValue,oldValue)
  },{immediate:true})
  
  //情况二：监视多个ref定义的响应式数据
  watch([sum,msg],(newValue,oldValue)=>{
  	console.log('sum或msg变化了',newValue,oldValue)
  }) 
  
  /* 情况三：监视reactive定义的响应式数据
  			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
  			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
  */
  watch(person,(newValue,oldValue)=>{
  	console.log('person变化了',newValue,oldValue)
  },{immediate:true,deep:false}) //此处的deep配置不再奏效
  
  //情况四：监视reactive定义的响应式数据中的某个属性
  watch(()=>person.job,(newValue,oldValue)=>{
  	console.log('person的job变化了',newValue,oldValue)
  },{immediate:true,deep:true}) 
  
  //情况五：监视reactive定义的响应式数据中的某些属性
  watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
  	console.log('person的job变化了',newValue,oldValue)
  },{immediate:true,deep:true})
  
  //特殊情况
  watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的job变化了',newValue,oldValue)
  },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数

import { createApp } from 'vue'

import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)

const app = createApp(App)

//挂载

app.mount('#app')

 App.vue

<template>

    <Demo/>

</template>

<script>

    import Demo from './components/Demo'

    export default {

        name: 'App',

        components:{Demo},

    }

</script>

components\Demo.vue

<template>

    <h2>当前求和为：{{sum}}</h2>

    <button @click="sum++">点我+1</button>

    <hr>

    <h2>当前的信息为：{{msg}}</h2>

    <button @click="msg+='！'">修改信息</button>

    <hr>

    <h2>姓名：{{person.name}}</h2>

    <h2>年龄：{{person.age}}</h2>

    <h2>薪资：{{person.job.j1.salary}}K</h2>

    <button @click="person.name+='~'">修改姓名</button>

    <button @click="person.age++">增长年龄</button>

    <button @click="person.job.j1.salary++">涨薪</button>

</template>

<script>

    import {ref,reactive,watch} from 'vue'

    export default {

        name: 'Demo',

        setup(){

            //数据

            let sum = ref(0)

            let msg = ref('你好啊')

            let person = reactive({

                name:'张三',

                age:18,

                job:{

                    j1:{

                        salary:20

                    }

                }

            })

            //情况一：监视ref所定义的一个响应式数据

            /* watch(sum,(newValue,oldValue)=>{

                console.log('sum变了',newValue,oldValue)

            },{immediate:true}) */

            //情况二：监视ref所定义的多个响应式数据

            /* watch([sum,msg],(newValue,oldValue)=>{

                console.log('sum或msg变了',newValue,oldValue)

            },{immediate:true}) */

            /*

                情况三：监视reactive所定义的一个响应式数据的全部属性

                        1.注意：此处无法正确的获取oldValue

                        2.注意：强制开启了深度监视（deep配置无效）

            */

            /* watch(person,(newValue,oldValue)=>{

                console.log('person变化了',newValue,oldValue)

            },{deep:false}) //此处的deep配置无效 */

            //情况四：监视reactive所定义的一个响应式数据中的某个属性

            /* watch(()=>person.name,(newValue,oldValue)=>{

                console.log('person的name变化了',newValue,oldValue)

            })  */

            //情况五：监视reactive所定义的一个响应式数据中的某些属性

            /* watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{

                console.log('person的name或age变化了',newValue,oldValue)

            })  */

            //特殊情况

            /* watch(()=>person.job,(newValue,oldValue)=>{

                console.log('person的job变化了',newValue,oldValue)

            },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效 */

 

            //返回一个对象（常用）

            return {

                sum,

                msg,

                person

            }

        }

    }

</script>