computed计算属性

Krismile S

已于 2023-05-11 09:17:09 修改

阅读量224

点赞数

分类专栏： vue2单个知识点文章标签： javascript vue.js ecmascript

于 2023-05-10 11:39:23 首次发布

本文链接：https://blog.csdn.net/m0_73894967/article/details/130596085

版权

vue2单个知识点专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章介绍了Vue.js中计算属性的概念，它用于创建基于已有数据的新属性。计算属性有两种形式：函数形式（只在获取时使用）和对象形式（支持获取和设置）。计算属性依赖于其他响应式数据，并具有缓存机制，只有依赖变化时才会更新。同时强调了计算属性不应使用箭头函数，以保证正确的`this`指向。

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

1.概念:需要的属性本身不存在,需要依赖data中的数据计算后产生一个新的值

2.两种展示形式:

a, 函数-----只在获取值时使用

<div id="app">
	<input type="text" placeholder="请输入大名" v-model="dm">
	<input type="text" placeholder="请输入小名" v-model="xm">
	<p>{{zhm}}</p>
</div>

			new Vue({
				el:"#app",
				data:{
					dm:"",
					xm:""
				},
				// 计算属性 -- 选项 
				computed:{
					zhm(){
						return this.dm + this.xm
					}
				}
			})

b,对象-----获取值和设置值时时使用

<div id="app">
			<input type="text" placeholder="请输入大名" v-model="dm">
			<input type="text" placeholder="请输入小名" v-model="xm">
			<input type="text" v-model="zhm">
</div>


        new Vue({
				el:"#app",
				data:{
					dm:"",//123
					xm:""//456
				},
				computed:{
					// zhm(){
					// 	return this.dm +"-" +this.xm
					// }
					zhm:{
						get(){
							return this.dm +"-" +this.xm
						},
						set(value){
							console.log(value)
							let arr = value.split("-")
							console.log(arr)
							this.dm = arr[0]
							this.xm = arr[1]
						}
					}
				}
			})

3.computed计算属性

a.自身需要依赖另一个值得改变而使当前所在dom更新

b.计算属性不可以与data中的数据重名

c.计算属性的方法不需要添加括号调用,方法需要单独加括号调用,因为计算属性不属于方法,属于属性

d.计算属性有缓存机制:当计算属性第一次获取到响应式数据时,会缓存,在后期渲染时,会观察响应式数据是否改变,如果改变就会调用计算属性,如果没有改变会读取存储的数据,方法只用更新就会重新调用

c.当获取计算属性时会触发getter,当设置修改计算属性时会触发setter

注意:计算属性不可以使用箭头函数,否则this不会指向这个组件的实例