一个关于vue计算属性的小实验

<template>
  <div class="hello">

    <p>{{ message }}</p>
    <botton @click="handleClick">改变message</botton>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
   
    firstName: String
  },
  data() {
    return {  
      message: "文本"
    };
  },
  computed: {
    fullName() {
      return this.firstName + this.message;  // 第 23 行
    },
  },
  methods: {
    handleClick() {
      this.message = "14";  
   
    },
  }
};
</script>

这种情况是不会走到第23行的，因为虽然重新走render了， 但是计算属性fullName在模版里没有用到，也就不会重新取值，也就走不到第23行。

<template>
  <div class="hello">

    <p>{{ message }}</p>
    <botton @click="handleClick">改变message</botton>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
   
    firstName: String
  },
  data() {
    return {  
      message: "文本"
    };
  },
  computed: {
    fullName() {
      return this.firstName + this.message;  // 第 23 行
    },
  },
  methods: {
    handleClick() {
      this.message = "14";
      this.fullName;  // 显性的读一下计算属性的值
   
    },
  }
};
</script>

显性的读一下计算属性的值，后变会走到第23行，而且message的值已经变成了"14"

总结，1、只有读到计算属性了，才会调用到对应的计算

            2、如果依赖的值没有改变，也不会调用到对应的计算