3、计算属性

方法调用总是会在重渲染发生时再次执行函数,计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

计算属性可以减少性能消耗。

<script>
export default {
  data() {
    return {
      message:"hellworld",
      age:0
    }
  },
  computed:{ //计算属性，只要依赖值不变，那边不会重新计算，计算属性将基于它们的相应依赖关系缓存
    // reverMessage:function (){
    //   return this.message.split('').reverse().join('')
    // }
    //每一个计算属性都有一个getter和setter，setter基本不会用到
    reverMessage:{
      //计算属性一般是没有set方法，计算属性是只读属性
      set:function(newValue){
        console.log(newValue);

      },
      get:function (){
        return this.message.split('').reverse().join('');

      }
    }

  },
  methods:{
    reverMessageMethod:function (){
      return this.message.split('').reverse().join('');
    }

  },

}

</script>

<template>
  <div>
    <p>{
   
   {message}}</p>
<!-- 方式一：   js表达式-->
    <p>{
   
   {message.split('').reverse().join('')}}</p>
<!--方式二：    计算属性-->
    <p>{
   
   {reverMessage}}</p>
<!--方式三：    使用方法-->
    <p>{
   
   {reverMessageMethod()}}</p>



  </div>


</template>

<style scoped>



</style>