Vue - 计算属性

翻转字符串

<div id="app">
  <p>初始值：{{msg}}</p>
  <p>反转值：{{msg.split('').reverse().join('')}}</p>
</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'Hello World!'
    }
  });
</script>

简单的这样写并没有问题，但是在复杂的工程里面，一个一个的列式调用会非常复杂，那我们抽取成函数就可以了

<div id="app">
  <p>初始值：{{msg}}</p>
  <p>反转值：{{msg.split('').reverse().join('')}}</p>
  <p>函数调用：{{reverseStr()}}</p>
</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'Hello World!'
    },
    methods:{
      reverseStr(){
        return this.msg.split('').reverse().join('');
      }
    }
  });
</script>

但是，标题已经很明显了，讲的并不是这些，而是计算属性，那就从代码来看看

<div id="app">
  <p>初始值：{{msg}}</p>
  <p>反转值：{{msg.split('').reverse().join('')}}</p>
  <p>计算属性：{{reverse}}</p>
</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'Hello World!'
    },
    // 注意：计算选项
    computed:{
      // get 方法
      reverse(){
        return this.msg.split('').reverse().join('');
      }
    }
  });
</script>

计算属性和Methods的区别

• 计算属性：当页面的重新渲染（不是刷新）的时候，计算属性不会改变，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；
• Methods：在页面重新渲染的时候（页面元素的data变化，页面就会重新渲染），都会重新调用method

setter：不经常使用

<div id="app">
  <p>{{fullName}}</p>
  <button @click="deal()">调用计算属性的setter方法</button>
</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      firstName: '张',
      lastName: '三丰'
    },
    methods:{
      deal(){// 调用fullName的setter方法
        this.fullName = '张 无忌'
      }
    },
    // 注意：计算选项
    computed:{
      fullName:{
        get(){
          return this.firstName + ' ' + this.lastName;
        },
        set(str){
          let nameArr = str.split(' ');
          this.firstName = nameArr[0];
          this.lastName = nameArr[1];
        }
      }
    }
  });
</script>