vue中的计算属性、方法和侦听器

骑猪看日落 2022-08-28 05:40 193阅读 0赞

## 1、为什么使用计算属性 ##

模板内的表达式非常便利，但是设计他们的初衷是用于简单运算的。在模板中放入太多的逻辑，会使模板变得太重难以维护。所以对于任何复杂的逻辑，都应该使用计算属性。

## 2、计算属性和方法  ##

可以通过在表达式中调用方法来达到同样的效果。

两种方式的最终结果是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时，它们才会重新求值。这位就意味找着：只要message还没有发生改变，多次访问 reverseMessage计算属性会立即返回之前的结果，不必再次执行计算。

...html
        <div id="app">
            <p>{
       {message}}</p>
            <p>reverse {
       {reverseMessage}}</p>
            <p>reverse {
       {getMessage}}</p>
        
        </div>
    ...
    ...js
    var vm = new Vue({
        el:'#app',
        data:{
            message:'Hello'
        },
        computed:{
            reverseMessage:function(){
                return this.message.split('').reverse().join('')
            }
        },
        method:{
            getMessage(){
                return this.message.split('').reverse().join('')
            }
        }
    })
    ...

## 3、计算属性中的set/get ##

计算属性中的方法可以写成 set和get形式，上述代码的计算属性中的方法可以写成如下，结果是一样的

var vm = new Vue({
        el:'#app',
        data:{
            message:'Hello'
        },
        computed:{
            //reverseMessage:function(){
            //    return this.message.split('').reverse().join('')
            //}
            reverseMessage:{
                get:function(){
                    return this.message.split('').reverse().join('')
                },
                set:function(val){
                    
                }
            }
        }

## 4、计算属性computed和侦听器watch ##

vue中的computed主要用于同步对数据的处理，watch项主要用于数据的派发，可异步；

两者可以达到同样的效果，但是基于它们的特点，使用场景会有所区别

computed 拥有缓存属性，只有当依赖的数据发生变化时，关联的数据才会发生变化，适用于计算或者格式化数据的场景

watch 监听数据，有关联没有依赖，只要有一些数据发生变化，就可以处理一些数据或者派发数据并同步

<body>
        <div id="app">
    		<input type="text" v-model="Amount">
    	</div>
    <script>    
    	var vm = new Vue({
    		el:"#app",
    		data:{
    			Amount:100
    		},
    		watch:{
    			Amount:function(newVal,oldVal){
    				if(newVal > 5000){
    					alert('最大额度可借5000元')
    					this.Amount = 5000
    				}
    			}
    		}
    	})
    </script>