Vue.js侦听器

new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    count: 0,
    user: {
      name: '张三',
      age: 25
    }
  },
  watch: {
    // 监听简单数据类型
    message: function(newVal, oldVal) {
      console.log('message从"' + oldVal + '"变为"' + newVal + '"');
    },

    // 监听数字变化
    count: function(newVal, oldVal) {
      console.log('count从' + oldVal + '变为' + newVal);
    },

    // 监听对象属性变化（需要深度监听）
    'user.name': function(newVal, oldVal) {
      console.log('用户名从"' + oldVal + '"变为"' + newVal + '"');
    }
  }
});
                                

// 浅层监听 - 只监听对象引用变化
watch: {
  user: function(newVal, oldVal) {
    console.log('用户对象引用变化');
    // 当 user = { name: '新名字' } 时会触发
    // 当 user.name = '新名字' 时不会触发
  }
}

// 深度监听 - 监听对象内部所有属性变化
watch: {
  user: {
    handler: function(newVal, oldVal) {
      console.log('用户对象或内部属性变化');
      // 当 user = { name: '新名字' } 时会触发
      // 当 user.name = '新名字' 时也会触发
    },
    deep: true  // 关键选项
  }
}

// 监听特定属性（更高效）
watch: {
  'user.name': function(newVal, oldVal) {
    console.log('用户名变化:', oldVal, '→', newVal);
    // 只监听user.name的变化，效率更高
  }
}
                                

new Vue({
  el: '#app',
  data: {
    formData: {
      title: '',
      content: '',
      tags: []
    },
    lastSaved: null,
    isSaving: false
  },
  watch: {
    // 深度监听表单数据变化
    formData: {
      handler: debounce(function(newVal) {
        this.autoSave(newVal);
      }, 1000), // 延迟1秒后保存
      deep: true
    }
  },
  methods: {
    autoSave(formData) {
      this.isSaving = true;

      // 模拟API请求
      setTimeout(() => {
        console.log('自动保存:', formData);
        this.lastSaved = new Date().toLocaleTimeString();
        this.isSaving = false;
      }, 500);
    }
  }
});
                                

// 适合使用侦听器的场景：
// 1. 数据变化时执行异步操作（如API请求）
watch: {
  searchTerm: function(newVal) {
    this.searchAPI(newVal);
  }
}

// 2. 数据变化时执行复杂逻辑
watch: {
  counter: function(newVal, oldVal) {
    if (newVal > 10) {
      alert('计数器超过10！');
      this.counter = 10; // 重置为10
    }
  }
}

// 3. 监听路由变化
watch: {
  '$route': function(to, from) {
    this.fetchData(to.params.id);
  }
}

// 适合使用计算属性的场景：
// 1. 计算购物车总价
computed: {
  totalPrice() {
    return this.items.reduce((sum, item) => {
      return sum + item.price * item.quantity;
    }, 0);
  }
}

// 2. 过滤列表
computed: {
  filteredItems() {
    return this.items.filter(item => {
      return item.name.includes(this.searchTerm);
    });
  }
}

// 3. 格式化日期
computed: {
  formattedDate() {
    return new Date(this.timestamp).toLocaleDateString();
  }
}

// 两者结合使用
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
watch: {
  fullName: function(newVal) {
    // 当全名变化时，更新用户资料
    this.updateUserProfile(newVal);
  }
}
                                

// 创建Vue实例
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    count: 0
  }
});

// 使用$watch方法添加侦听器
var unwatch = vm.$watch(
  'message', // 要监听的表达式
  function(newVal, oldVal) {
    console.log('message变化:', oldVal, '→', newVal);
  },
  {
    deep: false,      // 是否深度监听
    immediate: false  // 是否立即执行
  }
);

// 取消侦听器
unwatch(); // 调用返回的函数取消侦听

// 监听函数返回值
var unwatch2 = vm.$watch(
  function() {
    // 返回要监听的值
    return this.count * 2;
  },
  function(newVal, oldVal) {
    console.log('count*2变化:', oldVal, '→', newVal);
  }
);