Vue watch和computed快速上手

<template>
  <div class="home">
    <div>计算的属性{{watchNuber}}</div>
    <div>{{watchNuberAfter}}</div>
    <img src="@/assets/images/wxy.jpg" alt srcset @click="handleWatchClick" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
// import returnValue from "@/assets/json/reset.js"
export default {
  name: "home",
  components: {
    HelloWorld
  },
  data() {
    return {
      watchNuber: 1 
    };
  },
  watch: {
    watchNuber(newVal, oldVal) {
      this.watchNuber = newVal;
    }
  },
  computed: {
    watchNuberAfter: function() {
      // `this` 指向 vm 实例
      return `计算后的属性${this.watchNuber * 2}`;
    }
  },
  methods: {
    handleWatchClick() {
      this.watchNuber++;
    }
  }
};
</script>

watch 可以监听到data中的数据，

  data() {
    return {
      watchNuber: 1
    };
  }
   watch: {
   // 监听的值要和data中的值一样，可以监听返回它的更新完以前的值和更新完以后的值
    watchNuber(newVal, oldVal) {
      this.watchNuber = newVal;
    }
  },
  computed: {
    //如果data中的默认值是1,那么当你进入这个页面的时候，计算属性会立刻计算当前的值就是watchNuberAfter = 2
    watchNuberAfter: function() {
      // `this` 指向 vm 实例
      return `计算后的属性${this.watchNuber * 2}`;
    }
  },

1.它可以用来监测Vue实例上的数据变动。
2.在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。