watch

侦听一个数据

【例1: watch侦听ref基础类型的数据】

const app = Vue.createApp({
    setup() {
        const { ref,watch } = Vue;
        const name = ref('LeBrown')
        
        watch(name,(currentVal,preVal) => {
            console.log(currentVal,preVal);
        })
        
        return {name}
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
        </div>
    `
})

const vm = app.mount('#root')

【例2: watch侦听reactive类型的数据】

const app = Vue.createApp({
    setup() {
        const { reactive,watch,toRefs} = Vue;
        const nameObj = reactive({name:'LeBrown'})
        watch(()=> nameObj.name,(currentVal,preVal) => {
            console.log(currentVal,preVal);
        })
        
        const {name} = toRefs(nameObj)
        
        return {name}
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
        </div>
    `
})

const vm = app.mount('#root')

【备注】

• watch具备一定的惰性 lazy (wath侦听器首次加载不会执行，只有数据发生变化才会执行)
• watch中的参数可以拿到原始值(回调函数的第一个参数)和当前值(回调函数的第二个参数)
• watch可以侦听ref基础类型的数据，也可以对reactive类型的数据进行监听(watch的第一个参数要写成函数的形式，函数里面写要监听值或对象的属性)

侦听多个数据

【例1】

const app = Vue.createApp({
    setup() {
        const { reactive,watch,toRefs} = Vue;
        const nameObj = reactive({name:'LeBrown',englishname:'James'})
        watch([()=> nameObj.name,()=> nameObj.englishname],([curName,curEng],[prevName,prevEng]) => {
            console.log(curName,curEng);
            console.log(prevName,prevEng);
        })
        
        const {name,englishname} = toRefs(nameObj)
        
        return {name,englishname}
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
          <div>
            EnglishName: <input v-model="englishname"/>
          </div>
          <div>
            Name is: {{englishname}}
          </div>
        </div>
    `
})
  const vm = app.mount('#root')

【备注】

• watch可以侦听多个数据的变化(watch的第一个参数是一个数组，第二个参数是一个函数，函数的参数是数组)，用一个侦听器承载

watchEffect

【例1】

 const app = Vue.createApp({
    setup() {
        const { reactive,  watchEffect, toRefs } = Vue;
        const nameObj = reactive({ name: 'LeBrown', englishname: 'James' })

        watchEffect(()=>{
            console.log(nameObj.name);
        })

        const { name, englishname } = toRefs(nameObj)

        return { name, englishname }
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
          <div>
            EnglishName: <input v-model="englishname"/>
          </div>
          <div>
            Name is: {{englishname}}
          </div>
        </div>
    `
})

const vm = app.mount('#root')

【运行结果】

【备注】

• watchEffect 会立即执行 immediate，没有惰性(wath侦听器首次加载就执)
• watchEffect发现侦听器中的代码对外部有依赖，就会对其进行侦听，如果依赖的值发生变化，就会执行侦听器中的代码，也就是说它不需要传递你要侦听的内容,自动会感知代码依赖，不需要传递很多参数，只需要传递一个回调函数
• watchEffect只能获取到当前的值，不能获取到之前的值

【总结】

• watch和watchEffect 都是具备侦听能力的语法，但是在使用时还是有区别的。比如：在代码中要写ajax请求的时候，一般不会用到之前的数据，只会用到当前的数据，结合当前的数据发送请求，这种情况下使用watchEffect来发送ajax就比较合适

• setup是纯函数，给固定的输入就会有固定的输出，但是涉及到异步请求或者定时器，输出和输入就不是纯函数，导致它不是纯函数的异步请求叫Effect(副作用)，因此从名字上看在处理异步的操作的时候，最好使用watchEffect

其他

取消侦听器

const app = Vue.createApp({
    setup() {
        const { reactive,  watchEffect, toRefs } = Vue;
        const nameObj = reactive({ name: 'LeBrown', englishname: 'James' })

        const stop = watchEffect(()=>{
            console.log(nameObj.name);
            console.log(nameObj.englishname);
            setTimeout(() => {
                // 取消侦听器
                stop()
            }, 3000);
        })

        const { name, englishname } = toRefs(nameObj)

        return { name, englishname }
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
          <div>
            EnglishName: <input v-model="englishname"/>
          </div>
          <div>
            Name is: {{englishname}}
          </div>
        </div>
    `
})


const vm = app.mount('#root')

取消watch侦听器也是一样

让watch变成非惰性

watch的第三个参数可以通过{immediate: true}对侦听器进行配置，这样wath侦听器就变成非惰性了