vue.js基础学习（计算属性和方法的区别）

基础入门：vue.js计算属性和方法的区别

1、计算属性的使用及methods的区别

• methonds：程序每次运行都会执行一次；
• computed：计算属性，依赖不变，每次调用不会重新计算，大大提高执行性能。

源代码：

<script>
  export default{
    data(){
      return{
        massage:'你好，世界！',
        age:0
      }
    },
    computed:{//计算属性，依赖不变，不会重新计算，大大提高执行性能
      reverseMsg:function(){
        console.log('计算属性');
        return this.massage.split('').reverse().join('')
      }
    },
    methods:{
      reverseMssag:function(){
        console.log('methods');
        return this.massage.split('').reverse().join('')
      }
    }
  }

</script>

<template>
  <p>{{massage}}</p>
  <span></span>
  <!-- 用js表达式 -->
  <p>{{massage.split('').reverse().join('')}}</p>
  <p>{{massage.split('').reverse().join('')}}</p>
  <p>{{massage.split('').reverse().join('')}}</p>
  <!-- 用计算属性 -->
  <p>{{reverseMsg}}</p>
  <p>{{reverseMsg}}</p>
  <p>{{reverseMsg}}</p>
  <!-- 调用方法 -->
  <p>{{reverseMssag()}}</p>
  <p>{{reverseMssag()}}</p>
  <p>{{reverseMssag()}}</p>
  <button @click="massage='志在成功'">改变依赖值</button>
</template>

<style>

</style>

源代码运行情况：

2、计算属性中get和set的区别

• get：随着计算属性的调用而被调用；
• set：在设置或更改计算属性时被调用；

源代码： 

<script>
  export default{
    data(){
      return{
        massage:'你好，世界',
        age:0
      }
    },
    computed:{//计算属性，依赖不变，不会重新计算，大大提高执行性能
      //简写
      // reverseMsg:function(){
      //   console.log('计算属性');
      //   return this.massage.split('').reverse().join('')
      // }
      //完整写法
      reverseMsg:{
        set:function(newValue){//在设置或更改计算属性时调用
          console.log('newValue');
          this.massage=newValue
        },
        get:function(){
          return this.massage.split('').reverse().join('')
        }
      }
    },
    methods:{
      reverseMssag:function(){
        console.log('methods');
        return this.massage.split('').reverse().join('')
      }
    }
  }

</script>

<template>
  <p>{{massage}}</p>
  <span></span>
  <!-- 用js表达式 -->
  <p>{{massage.split('').reverse().join('')}}</p>
  <p>{{massage.split('').reverse().join('')}}</p>
  <p>{{massage.split('').reverse().join('')}}</p>
  <!-- 用计算属性 -->
  <p>{{reverseMsg}}</p>
  <p>{{reverseMsg}}</p>
  <p>{{reverseMsg}}</p>
  <!-- 调用方法 -->
  <p>{{reverseMssag()}}</p>
  <p>{{reverseMssag()}}</p>
  <p>{{reverseMssag()}}</p>
  <button @click="massage='志在成功'">改变依赖值</button>
  <button @click="reverseMsg='成功'">改变reverseMsg</button>
</template>

<style>

</style>

源代码运行情况：