Vue基础教程（64）使用监听器：深度分析Vue监听器：让你的数据变化无处可逃！

最新推荐文章于 2025-09-30 08:37:32 发布

原创

最新推荐文章于 2025-09-30 08:37:32 发布 · 257 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

一、前言：为什么我们需要一个“数据侦探”？

朋友们，不知道你们有没有遇到过这种场景：用户在搜索框里打字，你希望每输入一个词就自动搜索，而不是等他点“搜索”按钮；或者表单里选了“省份”，你要自动更新“城市”下拉框的选项。

这时候你可能会想：“我能不能盯着这个数据，它一变我就干点啥？”恭喜你，你想要的正是Vue的监听器——watch！

watch就像是给你的数据请了个私人保镖，24小时不眨眼地盯着它，一旦数据有风吹草动，立马执行你安排的任务。相比之下，计算属性像是数据的“美容师”，它根据现有数据给你返回个美化后的结果，但不会主动去“做事情”。

二、 watch基础：你的第一个数据保镖

2.1 最简单的watch用法

先来看个最基础的例子，想象你有个用户名输入框，想实时显示用户输入的长度：

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名">
    <p>用户名长度：{
  
  { nameLength }}</p>
    <p v-if="warning" style="color:red">{
  
  { warning }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      nameLength: 0,
      warning: ''
    }
  },
  watch: {
    // 最简单形式的watch
    username(newVal, oldVal) {
      this.nameLength = newVal.length;
      
      if(newVal.length < 3) {
        this.warning = '用户名太短了，至少3个字符！';
      } else if(newVal.length > 10) {
        this.warning = '用户名太长啦，别超过10个字符！';
      } else {
        this.warning = '';
      }
      
      console.log(`用户名从"${oldVal}"变成了"${newVal}"`);
    }
  }
}
</script>

这个例子中，watch就像个忠诚的门卫，死死盯着username。用户每按一个键，它都会：

更新名字长度显示
根据长度给出提示
在控制台记录变化历史

2.2 立即触发！不想等第一次变化？

有时候，你希望在页面加载时就执行一次watch，而不是等数据第一次变化。比如，你想从本地存储读取用户设置：

export default {
  data() {
    return {
      userSettings: {}
    }
  },
  watch: {
    userSettings: {
      handler(newVal) {
        // 把设置保存到本地存储
        localStorage.setItem('settings', JSON.stringify(newVal));
      },
      immediate: true // 页面加载时立即执行一次
    }
  },
  mounted() {
    // 从本地存储加载设置
    const saved = localStorage.getItem('settings');
    if(saved) {
      this.userSettings = JSON.parse(saved);
    }
  }
}

加上immediate: true