关于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>