Vue —— 计算属性 & 监听属性

一、计算属性

计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。

1. 使用计算属性反转字符串

	<div id='app'>
        <p>原始字符串 {
    
    {
    
    msg}}</p>
        <p>计算后的字符串 {
    
    {
    
    reverseMsg}}</p>
    </div>
	
	var vm = new Vue({
    
    
        el: '#app',  
        data:{
    
    
            msg:'Hello world!'
        },
        computed:{
    
    
        	// 计算属性的 getter
            reverseMsg: function(){
    
    
            	// `this` 指向 vm 实例
                return this.msg.split('').reverse().join('')
            }
        }
    })

计算属性 reversedMsg。
提供的函数将用作属性 vm.reverseMsg 的 getter 。
vm.reverseMsg 依赖于 vm.msg，在 vm.msg 发生改变时，vm.reverseMsg 也会更新。

2. computed 和 methods 的比较

1. 可以使用 methods 来替代 computed，效果上两个都是一样的。
2. 但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
3. 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
4. 使用 computed 在调用时不同加 ()，而使用 methods 在调用时需要加 ()

	<div id='app'>
        <p>原始字符串: {
    
    {
    
     message }}</p>
        <p>计算后反转字符串: {
    
    {
    
     reversedMessage }}</p>
        <p>计算后反转字符串: {
    
    {
    
     reversedMessage }}</p>
        <p>使用方法后反转字符串: {
    
    {
    
     reversedMessage2() }}</p>
        <p>使用方法后反转字符串: {
    
    {
    
     reversedMessage2() }}</p>
    </div>

	var cnt=1;
    var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            message: 'Runoob!'
        },
        computed: {
    
    
            // 计算属性的 getter
            reversedMessage: function () {
    
    
            // `this` 指向 vm 实例
            cnt+=1;
            return cnt+this.message.split('').reverse().join('')
            }
        },
        methods: {
    
    
            reversedMessage2: function () {
    
    
            cnt+=1;
            return cnt+this.message.split('').reverse().join('')
            }
        }
    })

二、监听属性

可以通过 watch 来响应数据的变化。

1. 通过 watch 实现计数器

	<div id='app'>
        <p>计数器: {
    
    {
    
     counter }}</p>
        <button @click = "counter++">点我</button>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            counter: 1
        },
        watch:{
    
    
            counter: function(nval, oval){
    
    
                alert(oval + '变为' + nval)
            }
        }
    })

2. 千米 和 米 之间的换算

	<div id='app'>
        千米：<input type="text" v-model = 'kilometers'>
        米：<input type="text" v-model = 'meters'>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            kilometers: 0,
            meters: 0
        },
        watch:{
    
    
            kilometers: function(val){
    
    
                this.kilometers = val
                this.meters = this.kilometers * 1000
            },
            meters: function(val){
    
    
                this.kilometers = val / 1000
                this.meters = val
            }
        }
    })

1. 以上代码中创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。
2. watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。
3. 当在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

不积跬步无以至千里 不积小流无以成江海