vue中watch和computed的区别与使用方法

下面我就给您详细讲解“Vue中watch和computed的区别与使用方法”。

Watch和Computed的区别

Vue中的Watch和Computed都是Vue.js中的计算属性，但是两者是不同的。

Watch的作用是监听数据的变化，当数据变化时执行相应的操作，类似于Observer模式的实现，通常用于监听某个值的变化并执行异步操作或复杂逻辑。

Computed的作用是根据已有的数据进行计算，生成新的值作为计算结果，这种计算属性会使用缓存，只有当依赖的数据发生变化时，才会重新计算，通常用于复杂数据关联的计算，以及大量简单数据的计算重用。

Watch的使用方法

Watch的定义方式包括两种，一种是简单的Watcher函数，另一种是对象Watch。

简单的Watcher函数

Watcher函数会接收到两个参数：newVal和oldVal，当监听的数据变化时，Watcher函数会被调用。

watch: {
  data: function(newVal, oldVal) {
    // 数据变化的操作
    console.log(newVal, oldVal);
  }
}

对象Watch

对象Watch可以监听到多个key的变化，这是使用Watcher函数无法实现的。

watch: {
  // 监听data、config的变化
  'data, config': {
    handler: function(val, oldVal) {
      console.log(val, oldVal)
    },
    deep: true //确保对象内部所有的变化都被监听到
  }
}

Computed的使用方法

Computed属性定义时，需要一个函数和一个return语句，函数中处理要计算的逻辑，计算完成后，返回结果作为计算属性的值，并且这个值会被计算属性缓存，只有当计算属性依赖的数据发生变化时，才会重新计算。

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

Watch和Computed的示例说明

Watch的示例

我们可以通过Watch监听到组件props的变化，并在变化时用新值渲染组件。

  props: ['content'],
  watch: {
    'content': function(newVal, oldVal) {
      this.render()
    }
  },
  methods: {
    render: function() {
      //渲染组件
    }
  },

Computed的示例

我们可以使用Computed计算一段文字中的字数，并在模板中动态绑定这个计算的结果。

  data: {
    text: 'Hello World!'
  },
  computed: {
    wordCount: function () {
      return this.text.length
    }
  },

模板中的绑定方式：

  <div>{{ text }}</div>
  <div>{{ wordCount }} words</div>

这种实现方式，wordCount只会在text的值发生改变时更新其值，避免了频繁更新。