关于vue.js:P4-vue3-计算属性和侦听器

计算属性

<script>
export default{data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{ // 计算属性，只有依赖值不变就不会从新计算。reverseMsg:function (){console.log("计算属性")
      return this.test57.split('').reverse().join('')
    }
  },
  methods:{reverseMessage:function (){console.log("methods")
      return this.test57.split('').reverse().join('')
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>---- 下方为计算属性 ---</p>
<!--    连（）都不须要加 -->
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>---- 下方为 methods----</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>


  </div>

</template>



<style>
  #d1{color: red;}
  #d2{color: blue;}
  .d1{font-size: 50px;}


</style>

computed 只执行 1 次（只有依赖值不变，就不会从新计算而冲缓存中获取）
methods 执行 3 次

计算属性批改原始值

<script>
export default{data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{ // 计算属性，只有依赖值不变就不会从新计算。reverseMsg:function (){console.log("计算属性")
      return this.test57.split('').reverse().join('')
    }
  },
  methods:{reverseMessage:function (){console.log("methods")
      return this.test57.split('').reverse().join('')
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>---- 下方为计算属性 ---</p>
<!--    连（）都不须要加 -->
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>---- 下方为 methods----</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <button @click="test57='hellokugou'"> 扭转 test57</button>


  </div>

</template>



<style>
  #d1{color: red;}
  #d2{color: blue;}
  .d1{font-size: 50px;}


</style>

computed 会比 methods 进步了性能

计算属性 Setter

<script>
export default{data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{ // 计算属性，只有依赖值不变就不会从新计算。// reverseMsg:function (){//   console.log("计算属性")
    //   return this.test57.split('').reverse().join('')
    // }
    reverseMsg:{ // 每一个计算属性中都一个 getter，setter, 下面为简写，上面为完整版, 计算属性为只读属性。set:function (newValue){ // 设置或更改计算属性时使, 个别没有 set 办法
        console.log(newValue)

      },
      get:function (){return this.test57.split('').reverse().join('')
      }
    }
  },
  methods:{reverseMessage:function (){console.log("methods")
      return this.test57.split('').reverse().join('')
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>---- 下方为计算属性 ---</p>
<!--    连（）都不须要加 -->
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>---- 下方为 methods----</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <button @click="test57='hellokugou'"> 扭转 test57</button>
    <button @click="reverseMsg='hellokugou'"> 扭转 reverseMessage</button>


  </div>

</template>



<style>
  #d1{color: red;}
  #d2{color: blue;}
  .d1{font-size: 50px;}


</style>

给 setter 赋值

<script>
export default{data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{ // 计算属性，只有依赖值不变就不会从新计算。// reverseMsg:function (){//   console.log("计算属性")
    //   return this.test57.split('').reverse().join('')
    // }
    reverseMsg:{ // 每一个计算属性中都一个 getter，setter, 下面为简写，上面为完整版, 计算属性为只读属性。set:function (newValue){ // 设置或更改计算属性时使, 个别没有 set 办法
        console.log(newValue);
        this.test57=newValue
      },
      get:function (){return this.test57.split('').reverse().join('')
      }
    }
  },
  methods:{reverseMessage:function (){console.log("methods")
      return this.test57.split('').reverse().join('')
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>---- 下方为计算属性 ---</p>
<!--    连（）都不须要加 -->
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>---- 下方为 methods----</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <button @click="test57='hellokugou'"> 扭转 test57</button>
    <button @click="reverseMsg=' 你好酷狗 '"> 扭转 reverseMessage</button>


  </div>

</template>



<style>
  #d1{color: red;}
  #d2{color: blue;}
  .d1{font-size: 50px;}


</style>