vue Watch和Computed的使用总结

我来为你详细讲解“vue Watch和Computed的使用总结”的完整攻略。

什么是vue Watch和Computed

在Vue.js开发中，数据的状态更新非常频繁，因此需要工具来监听并响应数据变化。Vue Watch和Computed都是解决Vue数据变化监听的两个方案。

Watch是一种对数据进行监听并做出相应的方案，当监听的数据发生变化时，会立即触发一个回调函数。而Computed是一种通过计算衍生出新的数据，当依赖的数据改变时才会触发重新计算。

Watch的使用

Watch是Vue的一个实例方法，我们可用在这个方法中观察一个数据的变化。其实，我们最常用的情况就是监听某个具体的，需要改变应用状态的数据的变化。

// 组件
export default {
  data() {
    return {
      count: 0,
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count 的值从 ${oldValue} 变成了 ${newValue}`);
    }
  }
}

在组件实例上定义了一项名叫 count 的数据，然后在 watch 中观察 count 数据的变化。当 count 数据变化时， Vue 会自动调用回调函数。在回调函数中会传入新值和旧值，我们可以在这里做出进一步的处理。

Computed的使用

Computed是Vue的一个计算属性，它可以依赖已有的数据计算出新的数据，当依赖的数据改变时，它也会跟着更新。

<template>
  <div>
    <p>员工姓名：{{userInfo.name}}</p>
    <p>员工年龄：{{userInfo.year}}</p>
    <p>员工性别：{{userInfo.sex}}</p>
    <p>员工级别：{{userInfo.level}}</p>

    <hr>
    <p>该员工是否升职：{{isPromote}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '小明',
      year: 28,
      sex: '男',
      level: 5
    }
  },
  computed: {
    userInfo() {
      return {
        name: this.name,
        year: this.year,
        sex: this.sex,
        level: this.level
      }
    },
    isPromote() {
      return this.level >= 5 ? '是' : '否'
    }
  }
}
</script>

在该示例中，我们定义了一个名叫 userInfo 的计算属性，它依赖了组件中的多个 data 数据。最后我们将该计算属性在模板中渲染出来，当某个依赖数据发生改变时，该计算属性会重新计算并渲染到页面上。

总结

Watch和Computed都是用于解决Vue数据变化监听的方案，Watch是对具体的数据进行监听并做出相应的方案，而Computed是通过计算生成衍生的新数据，并且能够依赖其他数据的变化做出响应。下面是使用 build-in component 的 demo

<template>
  <div>
    <input v-model="msg">
    <br>
    {{ counter }}
    <br>
    {{ reversedMsg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello',
      counter: 1
    }
  },
  watch: {
    msg: function (newVal, oldVal) {
      console.log(newVal, oldVal, 'msg changed')
      this.counter++
    }
  },
  computed: {
    reversedMsg: function () {
      console.log('reversedMsg')
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

在这个示例中，我们使用 watch 监视了 msg 的变化，并将其同步到计数器 counter 上，同时，我们还使用了计算属性 reversedMsg 生成了基于 msg 的一个衍生数据，在msg改变时完整触发了计算和更新，实现了 watch 和 computed 的使用。