【VUE】VUE计算属性(computed)

最新推荐文章于 2023-04-16 18:39:35 发布

死亦何哀

最新推荐文章于 2023-04-16 18:39:35 发布

阅读量316

点赞数

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

本文链接：https://blog.csdn.net/qq_35724512/article/details/104995237

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是计算属性(computed)

当你有一些数据需要随着其它数据变动而变动时,这个时候可以使用计算属性来绑定你的数据。当然，watch和计算属性效果是完全一致的。
但是因为计算属性的重复读取，并不会重新计算，只会读取缓存中数据，所以计算属性相对于watch的效率更高。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="vm">
			<!-- 计算属性 -->
			<!-- 对于任何复杂逻辑，你都应当使用计算属性。便于维护和处理 -->
			<p>原始属性：{{message}}</p>
			<!-- 计算属性 -->
			<p>反转后的属性：{{messageRverse}}</p>
			<!-- 方法 -->
			<p>反转后的属性：{{messageRverseM()}}</p>
			<!-- 侦听属性 -->
			<p>{{fullName}}</p>


			<!-- 计算属性缓存vs方法 -->
			<!-- 计算属性是基于它们的响应式依赖进行缓存的。只有在相关响应式依赖变化的时候它们才会重新求值 -->
			<!-- 这意味着多次访问 messageRverse不会重新进行计算-->
			<!-- 但是如果换成方法的话，每次访问都会进行计算 -->
			<!-- 如果不希望有缓存的话，就使用方法 -->

			<!-- 计算属性vs侦听属性 -->
			<!-- Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。-->
			<!-- 当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。 -->
			<!-- 然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。 -->

			<!-- 计算属性的setter -->
			<!-- 计算属性默认只有getter，不过在需要时可以设置一个setter -->

		</div>
	</body>
	<script src="../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../vue/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			//todos
			el: '#vm',
			data: {
				message: "this is a message",
				firstName: "Foo",
				lastName: "Bar",
				// fullName:"Foo Bar"
			},
			computed: {
				messageRverse: function() {
					return this.message.split('').reverse('').join('')
				},
				fullName: {
					//getter
					get: function() {
						return this.firstName + " " + this.lastName
					},
					//setter
					set: function(newValue) {
						var names = newValue.split('')
						this.firstName = names[0]
						this.lastName = names[names.length-1]
					}
				}
			},
			methods: {
				messageRverseM: function() {
					return this.message.split('').reverse('').join('')
				}
			},
			watch: {
				// firstName: function(val) {
				// 	this.fullName = val + "" + this.lastName 
				// },
				// lastName: function(val){
				// 	this.fullName = this.firstName + "" + val 
				// }
			}
		})
	</script>
</html>

需要注意的地方

计算属性也可以绑定除 data 以外的数据，如 window，this.$store等里面的数据。

死亦何哀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【VUE】VUE计算属性(computed)

什么是计算属性(computed)当你有一些数据需要随着其它数据变动而变动时,这个时候可以使用计算属性来绑定你的数据。当然，watch和计算属性效果是完全一致的。但是因为计算属性的重复读取，并不会重新计算，只会读取缓存中数据，所以计算属性相对于watch的效率更高。示例：<!DOCTYPE html><html> <head> <meta ...
复制链接

扫一扫