计算属性与侦听器

计算属性

如果插值表达式内放入了过多复杂的逻辑,可以通过计算属性,将逻辑提取出来

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ msg.split('').reverse().join('') }}
    <p>{{ reversedMessage }}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        },
        computed: {
            reversedMessage: function(){
                return this.msg.split('').reverse().join('');
            }
        }
    })
</script>

对Hello字符串进行一个反转,如果不使用计算属性,这个反转字符串的逻辑,全部写在表达式内。

而使用计算属性,只需要添加一个computed,然后再其中写入一个叫做reversedMessage的计算属性,然后再表达式中调用它

同时计算属性具有依赖性,例如reversedMessage就中就依赖msg,如果再浏览器中的控制台使用vm.msg='World' 页面会发生同步改变

计算属性缓存和方法的区别

计算机属性具有缓存的功能,只要第一次调用过计算属性,有返回值后。后面再进行调用,计算属性无需再执行一次,只要把返回的值直接填进去就好。

如果使用方法,则没有缓存功能,当逻辑和运算很大的时候,重复执行,如果导致性能下降。

<div id="app">
    <p>{{ reversedMessage }}</p>
    <p>{{ reversedMessage }}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        },
        computed: {
            reversedMessage: function(){
                console.log('Final')
                return this.msg.split('').reverse().join('');
            }
        }
    })
</script>

虽然使用了两次计算属性,但是计算属性只执行了一次,可以看到只返回过一次Final

侦听器(watch属性)

侦听器和计算属性的区别就是,侦听器是一种更加通用的方式响应Vue实例上的数据变动,同时也应用于数据变化时执行异步或者开销较大的操作

<div id="app">
    <span>姓:
        <input type="text" v-model='firstname'>
    </span>
    <span>名:
        <input type="text" v-model='lastname'>
    </span>
    <p>{{ fullname }}</p>

</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: 'Foo',
            lastname: 'Bar',
            fullname: 'Foo Bar'
        },
        watch: {
            firstname: function(val) {
                this.fullname = val+' '+this.lastname;
            },
            lastname: function(val) {
                this.fullname = this.firstname+' '+val;
            }
        }
    })
</script>

git-1

使用计算属性也可以达到同样的效果

computed: {
	fullname: function() {
		return this.firstname+this.lastname;
	}
   }