watch 监听事件的变化，一有变化，立刻执行！

可以监听数据的实时变化，设一个data, 一个temp，监听temp。将会有变化的数据赋值给temp，监听到变化，会立刻赋值给data。这样可以达到实时渲染数据的目的。

<template>
  <div>
    ++{{ data.id }}--{{ data.body }}++
  </div>
</template>

<script>
  export default {
    name: "Testwatch",
    data() {
      return {
        data: {id:1, body:'hello'},
        temp:{},
      }
    },
    watch:{
        temp(){
          this.data = this.temp
        }
    }
  }
</script>

computer对于任何复杂逻辑，你都应当使用计算属性。所有的计算属性都是以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    show: function () {
    return show = true;
    },
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})