首先，我们必须明白一个概念，缓存，

这在Vue中无论是优化还是解决问题，都是很有效的轮子，关于缓存，就不得不提到一个东西计算属性computed与属性监听器watch

首先，我们先来看 computed

<template>
  <p>
    新消息:{{rangerText.split('').join().toString()}}
  </p>
</template>

<script>
export default {
    data(){
      return {
        rangerText:'我是即将赋值的字符串'
      }
    }
}
</script>

首先我们看，这样的操作data值当然是可以的，但是会有什么问题，如果将来项目需要维护修改规则，那必定是灾难，这时候我们的computed就可以派上用场，我们看另一段代码对比一下

<template>
  <p>
    新消息:{{newTips}}
  </p>
</template>

<script>
export default {
    computed:{
      newTips(){
        return this.rangerText.split('').join().toString() //我们把规则定义在这里统一处理修改会很方便，并且computed的改变依赖于this.rangerText,会有缓存，只有依赖值改变才改变
      }
    }
}
</script>

我们看下一位也就是watch，watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。在这里就稍微说下他监听属性的功能吧。

<template>
  <div>
    <p>{{ this.number }}</p>
  </div>
</template>
 
<script>
export default {
  name: 'test1',
  data () {
    return {
      number: 1
    }
  },
  created () {
    setTimeout(() => {
      this.number = 100
    }, 2000)
  },
  watch: {
    number (newVal, oldVal) {
      console.log('number has changed: ', newVal)
    }
  }
}
</script>

上面的代码中，我们在watch中监听了number属性，并且在实例创建后2s执行对number属性的值的更改。我们可以在控制台中看到2s后打印了新的number值

大概总结一下，computed和watch的使用场景并不一样，computed的话是通过几个数据的变化，来影响一个数据，而watch，则是可以一个数据的变化，去影响多个数据。