Vue-计算属性

殊序

已于 2024-09-09 16:55:16 修改

阅读量493

点赞数 9

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-09-07 21:56:54 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63563047/article/details/142004929

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

计算属性是什么？

在 Vue.js 中，计算属性（computed properties）是基于它们的依赖进行缓存的属性。计算属性的值会根据其依赖的响应式数据自动更新。与方法不同，计算属性会在其依赖的数据发生变化时重新计算，而在依赖未改变的情况下，它会返回之前的计算结果，从而提高性能。

计算属性的特点

计算属性的特点：

基于依赖的缓存：计算属性会根据其依赖的响应式数据进行缓存，只有当依赖的数据发生变化时，计算属性才会重新计算，使得计算属性在性能上比方法更优。
声明式：计算属性是声明式的，可以直接在模板中使用它们，就像使用普通的数据属性一样。
可以是 getter 和 setter：计算属性可以定义 getter 和 setter，允许在计算属性被访问或赋值时执行特定的逻辑。

示例

new Vue({  
  el: '#app',  
  data: {  
    firstName: 'John',  
    lastName: 'Doe'  
  },  
  computed: {  
    fullName: function() {  
      return this.firstName + ' ' + this.lastName;  
    }  
  }  
});

以下从插值语法，methods方法，计算属性三种方法实现姓名案例

插值语法实现姓名案例

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8" />

		<title>demo</title>

		<!-- 引入Vue -->

		<script type="text/javascript" src="./js/vue.js"></script>

	</head>

	<body>

		<!-- 准备好一个容器-->

		<div id="app">

			姓：<input type="text" v-model="firstName"> <br/><br/>

			名：<input type="text" v-model="lastName"> <br/><br/>

			全名：<span>{{firstName}}-{{lastName}}</span>

		</div>

	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    
    	new Vue({
    		el:'#app',
    		data:{
    			firstName:'张',
    			lastName:'三'
    		}
    	})
    </script>

</html>

methods方法实现姓名案例

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8" />

		<title>demo</title>

		<!-- 引入Vue -->

		<script type="text/javascript" src="./js/vue.js"></script>

	</head>

	<body>

		<!-- 准备好一个容器-->

		<div id="app">

			姓：<input type="text" v-model="firstName"> <br/><br/>

			名：<input type="text" v-model="lastName"> <br/><br/>

			全名：<span>{{fullName()}}</span>

		</div>

	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    
    	new Vue({
    		el:'#app',
    		data:{
    			firstName:'张',
    			lastName:'三'
    		},
    		methods: {
    			fullName(){
    				console.log('@---fullName')
    				return this.firstName + '-' + this.lastName
    			}
    		},
    	})
    </script>

</html>

计算属性实现姓名案例

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8" />

		<title>demo</title>

		<!-- 引入Vue -->

		<script type="text/javascript" src="./js/vue.js"></script>

	</head>

	<body>

		<!-- 

			计算属性：

					1.定义：要用的属性不存在，要通过已有属性计算得来。

					2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

					3.get函数什么时候执行？

								(1).初次读取时会执行一次。

								(2).当依赖的数据发生改变时会被再次调用。

					4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

					5.备注：

							1.计算属性最终会出现在vm上，直接读取使用即可。

							2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

		 -->

		<!-- 准备好一个容器-->

		<div id="app">

			姓：<input type="text" v-model="firstName"> <br/><br/>

			名：<input type="text" v-model="lastName"> <br/><br/>

			测试：<input type="text" v-model="x"> <br/><br/>

			全名：<span>{{fullName}}</span> <br/><br/>

			<!-- 全名：<span>{{fullName}}</span> <br/><br/>

			全名：<span>{{fullName}}</span> <br/><br/>

			全名：<span>{{fullName}}</span> -->

		</div>

	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    
    	const vm = new Vue({
    		el:'#app',
    		data:{
    			firstName:'张',
    			lastName:'三',
    			x:'你好'
    		},
    		methods: {
    			demo(){
    				
    			}
    		},
    		computed:{
    			fullName:{
    				//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
    				//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
    				get(){
    					console.log('get被调用了')
    					// console.log(this) //此处的this是vm
    					return this.firstName + '-' + this.lastName
    				},
    				//set什么时候调用? 当fullName被修改时。
    				set(value){
    					console.log('set',value)
    					const arr = value.split('-')
    					this.firstName = arr[0]
    					this.lastName = arr[1]
    				}
    			}
    		}
    	})
    </script>

</html>

综合来看，这个案例计算属性的性能更优。

计算属性的简写

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8" />

		<title>demo</title>

		<!-- 引入Vue -->

		<script type="text/javascript" src="./js/vue.js"></script>

	</head>

	<body>

		<!-- 准备好一个容器-->

		<div id="app">

			姓：<input type="text" v-model="firstName"> <br/><br/>

			名：<input type="text" v-model="lastName"> <br/><br/>

			全名：<span>{{fullName}}</span> <br/><br/>

		</div>

	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    
    	const vm = new Vue({
    		el:'#app',
    		data:{
    			firstName:'张',
    			lastName:'三',
    		},
    		computed:{
    			//完整写法
    			/* fullName:{
    				get(){
    					console.log('get被调用了')
    					return this.firstName + '-' + this.lastName
    				},
    				set(value){
    					console.log('set',value)
    					const arr = value.split('-')
    					this.firstName = arr[0]
    					this.lastName = arr[1]
    				}
    			} */
    			//如果计算属性需要 setter（即同时需要定义 getter 和 setter），则不能使用简写形式，必须使用完整的对象形式来定义
    			fullName(){
    				console.log('get被调用了')
    				return this.firstName + '-' + this.lastName
             //
    			}
    		}
    	})
    </script>

</html>