Vue中的Watch是定义在vue实例中的一个属性,用来监听一些数据的变化,当变化时,可以做出响应的处理,例如更新视图或者执行一些操作。Vue提供了一个选项可以定义Watch(通过watch选项或者$watch API),它可以是一个对象,也可以是一个函数,当它是一个对象时,它应该有被监听的键和对应的处理函数,当它是一个函数时,它接收两个参数,第一个是新值,第二个是旧值,第一个位置代表的是最新值,第二个位置代表的旧值。
Vue的watch默认情况下是在下一次事件循环时(即在下一个tick)才会执行监听的处理函数,这是基于Vue的异步更新策略而决定的。但是,在某些情况下,我们希望在数据变化时立即执行监听处理函数,而不是等到下一个tick。
Vue提供了一个可选选项immediate,设置为true,表示在定义watch时就立即执行处理函数,并且会传递当前值作为第一个参数,这时还没有旧值。同时,在后面的变化中,也会自动调用一次处理函数。immediate也可以是一个函数,这个函数将在watch被创建时立即执行,并且接收watch的初始值作为参数。
// immediate为true时,立即执行处理函数 watch: { name: { immediate: true, handler(newVal, oldVal) { console.log(`newValue: ${newVal}, oldValue: ${oldVal}`) } } } // immediate为函数时,立即执行函数 watch: { name: { immediate() { console.log('watcher created') return true }, handler(newVal, oldVal) { console.log(`newValue: ${newVal}, oldValue: ${oldVal}`) } } }
使用immediate选项时需要注意几点,一是immediate选项只在定义watch时第一次执行处理函数,之后的值变化也不会再传递第一个参数;二是当immediate是个函数时,需要在函数中返回一个值,如果返回false,不会执行处理函数。
总的来说,Vue中的watch提供了很方便的数据监听机制,通过immediate选项,可以更加精确的控制watch的执行过程,使得数据变化时可以做出更加及时、更加灵活的响应。