🌟VUE watch：监听器的奇妙之旅

在Vue的世界里，`watch`是一个强大的工具，用于监听数据的变化。但你是否注意到，当`watch`被创建时，默认并不会立即执行？这可能让你困惑，比如希望在组件初始化时就触发一次监听逻辑。这时，一个小技巧就能解决你的烦恼——通过给监听属性设置一个初始值或直接调用一次即可！✨

举个栗子：

```javascript

watch: {

myData(newVal) {

console.log('监听到变化：', newVal);

}

}

```

默认情况下，`myData`发生变化时才会触发回调。但如果想让它一进入页面就执行，可以这样写：

```javascript

data() {

return {

myData: '初始值' // 设置初始值

};

},

watch: {

myData(newVal) {

console.log('首次监听：', newVal);

}

}

```

或者利用`immediate: true`选项：

```javascript

watch: {

myData: {

handler(newVal) {

console.log('立即执行：', newVal);

},

immediate: true // 立即执行一次

}

}

```

这样，无论是通过初始值还是配置项，都能让`watch`在组件加载时就完成使命！💪

Vue 前端开发 技术分享