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 也会更新。

  1. computedmethods 的比较
  1. 可以使用 methods 来替代 computed,效果上两个都是一样的。
  2. 但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。
  3. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
  4. 使用 computed 在 {{}} 里面调用时不同加 (),而使用 methods 在 {{}} 调用时需要加 ()
  5. 在标签内调用时,conputed 和 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('')
            }
        }
    })

Vue —— 计算属性 & 监听属性_第1张图片

二、监听属性

可以通过 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)
            }
        }
    })

Vue —— 计算属性 & 监听属性_第2张图片

  1. 千米 之间的换算
	<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 会实时监听数据变化并改变自身的值。

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

你可能感兴趣的:(Web,javascript,html,前端,vue.js)