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

最新推荐文章于 2022-04-24 22:42:28 发布

little little

最新推荐文章于 2022-04-24 22:42:28 发布

阅读量204

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/songlf521/article/details/120821604

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文探讨了Vue.js中计算属性的使用，对比了与方法的区别，强调了计算属性的缓存特性，以及它与watch的区别，适合在处理复杂逻辑和数据同步时应用。同时介绍了计算属性的get和set方法，并举例说明在实际开发中的应用场景。

摘要由CSDN通过智能技术生成

1、为什么使用计算属性

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

2、计算属性和方法

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

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

...html
    <div id="app">
        <p>{{message}}</p>
        <p>reverse {{reverseMessage}}</p>
        <p>reverse {{getMessage}}</p>
    <!--以上两个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>