Vue计算属性

1. 当我们需要重复对模板中的属性进行相同的计算后并调用的时候，我们就应该使用计算属性。比如，将字符串进行翻转

   <div id="example1">
           <p>原始字符串"{{ message }}"</p>
           <p>翻转后的字符串"{{ reversedMessage }}"</p>
       </div>

var vm = new Vue({
    el: '#example1',
    data: {
        message: 'Hello'
    },
    computed: {
        // 计算属性的 getter
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
})

结果：

这意味着当我们修改message时，reversedMessage的值也会跟着变化，可以打开浏览器的console控制台进行属性的修改

1. 计算属性与方法

我们也可以通过对模板添加方法来达到以上的效果

method:{
        reversedMessage:function () {
            return this.message.split('').reverse().join('')
        }  
    }

它们的区别是，多次访问计算属性，在相关响应式的依赖发生变化之前不会再次执行函数，而是会返回之前的函数的计算结果。

例如，在计算属性中添加一个函数：

<p>{{now}}</p>

now:function () {
            return Date.now();
        }

当初次渲染后，界面如下

在控制台输入语句修改message的值后，时间并没有变化，因为该函数并不是响应式依赖

而相比之下，方法则会在每次修改属性后都会重新执行一次函数。

1. 计算属性与监听属性

当我们的某些数据需要随着其他数据变动而变动，我们可以使用监听属性

例如，当按按钮导致属性改变时，使另外一个属性也随之改变

<div id="example2">
        <table>
            <tr><th><input type="button" value="0" v-on:click="nums(0)"/></th><th><input type="button" value="/" v-on:click="flags('/')"></th><th><input type="button" value="*" v-on:click="flags('*')"></th><th><input type="button" value="-" v-on:click="flags('-')"></th></tr>
            <tr><th><input type="button" value="7" v-on:click="nums(7)"></th><th><input type="button" value="8" v-on:click="nums(8)"></th><th><input type="button" value="9" v-on:click="nums(9)"></th><th><input type="button" value="+" v-on:click="flags('+')"></th></tr>
            <tr><th><input type="button" value="4" v-on:click="nums(4)"></th><th><input type="button" value="5" v-on:click="nums(5)"></th><th><input type="button" value="6" v-on:click="nums(6)"></th></tr>
            <tr><th><input type="button" value="1" v-on:click="nums(1)"></th><th><input type="button" value="2" v-on:click="nums(2)"></th><th><input type="button" value="3" v-on:click="nums(3)"></th></tr>
        </table>
        <p>{{result}}</p>
    </div>

var ca=new Vue({
    el:'#example2',
    data: {
        flag:' ',
        num:0,
        result:0
    },
    methods: {
        nums:function(val){
            if (this.flag===' '){
                this.result=val;
                this.num=val;
            }else {
                this.num=val;
            }
        },
        flags:function (val) {
            this.flag=val;
        }
    },
    watch:{
        num:function () {
            switch (this.flag) {
                case "+": this.result+=this.num;break;
                case "-": this.result-=this.num;break;
                case "*": this.result*=this.num;break;
                case "/": this.result/=this.num;break;
                default:break;
            }
        }
    }
});

可以进行简单的计算

1. 计算属性的getter

   <div id="example3">
       <p>{{name}}</p>
       <p>{{na}}</p>
       <p>{{me}}</p>
   </div>

var na=new Vue({
   el:'#example3',
   data:{
       na:'leg',
       me:'roft'
   },
    computed: {
       name:{
           get:function () {
               return this.na+this.me;
           },
           set:function (newValue) {
               let names = newValue.split(' ');
               this.na=names[0];
               this.me=names[names.length-1];
           }
       }
    }
});

当在控制台修改name时na与me也会改变