vue watch与computed区别

作者：翔龙天下发布日期:2026-02-10 浏览:47

// Vue 实例中使用 watch 和 computed 的示例

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!',
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    // 计算属性：当依赖的数据发生变化时，计算属性会自动更新
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    // 监听器：当特定数据发生变化时，执行相应的逻辑
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    }
  }
});

/*
解释说明：
1. computed（计算属性）：fullName 是一个计算属性，它依赖于 firstName 和 lastName。当这两个属性中的任何一个发生变化时，Vue 会自动重新计算 fullName 的值。
2. watch（监听器）：watch 可以用来监听 message 属性的变化。当 message 发生变化时，watch 中定义的回调函数会被触发，并且可以访问到新旧值。
*/

上一篇：vue 单选框

下一篇：vue使用websocket