[vue] Vue计算属性, 姓名小案例

最新推荐文章于 2023-12-13 12:03:06 发布

533_

最新推荐文章于 2023-12-13 12:03:06 发布

阅读量650

点赞数

分类专栏： # vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_14993591/article/details/121102808

版权

vue 专栏收录该内容

175 篇文章

订阅专栏

本文深入解析Vue中的计算属性概念，包括其定义、工作原理、执行时机等，并对比methods实现方式的优势，最后通过具体案例展示了不同实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.定义：

要用的属性不存在，要通过已有属性计算得来。

2.原理：

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

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

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

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

4.优势：

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

5.备注：

计算属性最终会出现在vm上，直接读取使用即可。
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

6.姓名案例

效果：

在这里插入图片描述

插值语法实现

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{{firstName}}-{{lastName}}</span>
</div>

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三'
	}
})

在这里插入图片描述

methos实现

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{{fullName()}}</span>
</div>

new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三'
	},
	methods: {
		fullName(){
			console.log('@---fullName')
			return this.firstName + '-' + this.lastName
		}
	},
})

在这里插入图片描述

计算属性实现

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{{fullName}}</span> <br/><br/>
</div>

const vm = new Vue({
	el:'#root',
	data:{
		firstName:'张11111',  //1
		lastName:'三',   //2
	},

	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){  // 1-2
				console.log('set',value)
				const arr = value.split('-')
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		}
	}
})

在这里插入图片描述

计算属性简写

在这里插入图片描述

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{{fullName}}</span> <br/><br/>
</div>

const vm = new Vue({
	el:'#root',
	data:{
		firstName:'张11111',  //1
		lastName:'三',   //2
	},

	computed:{
		fullName:{
			//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
			//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
			get(){
				console.log('get被调用了')
				// console.log(this) //此处的this是vm
				return this.firstName + '-' + this.lastName
			}
		}
	}
})

只有get的时候，可以简写

const vm = new Vue({
	el:'#root',
	data:{
		firstName:'张11111',  //1
		lastName:'三',   //2
	},

	computed:{
		//简写
		fullName(){
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		}
	}
})

计算属性适用场景：

在这里插入图片描述

监视属性实现

[vue] 监视属性，天气小案例

 <div id="root">
      姓：<input type="text" v-model="firstName"> <br /><br />
      名：<input type="text" v-model="lastName"> <br /><br />
      全名：<span>{{fullName}}</span> <br /><br />
  </div>

 const vm = new Vue({
     el: '#root',
     data: {
         firstName: '张',
         lastName: '三',
         fullName: '张-三'
     },

     watch: {
         firstName(val) {
             this.fullName = val + '-' + this.lastName
         },
         lastName(val) {
             this.fullName = this.firstName + val + '-'
         },

     }
 })