Vue基础之计算属性

定义:

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

原理:

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

get函数执行时机:

(1)初次读取时会执行一次。
(2)当依赖的数据发生改变时会被再次调用。

优势:

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

备注:

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

Demo:

	<body>
		<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>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			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]
					}
				}
			}
		})
	</script>

当计算属性只有getter时,可简写

computed:{
				fullName(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					}
				}
			}
### Vue2 中计算属性的使用方法 #### 定义与基本概念 在 Vue 实例中的 `computed` 选项内定义计算属性,这些属性能够基于其他数据属性自动生成并返回一个值。每当依赖的数据发生变化时,计算属性也会相应地更新[^2]。 #### 对比插值语法、methods 和计算属性 - **插值语法**:直接通过双大括号 {{ }} 来显示变量或表达式的值,在模板中适合简单的展示逻辑[^1]。 - **methods 方法**:可以在事件处理函数或其他地方调用的方法来执行更复杂的操作;但是每次触发都会重新运行整个方法,即使依赖项未改变也如此。 - **计算属性**:相比 methods 更高效,因为只有在其所依赖的数据发生变动时才会被重新求值,并缓存结果直到再次变化为止。 #### 计算属性的具体实现方式 当不需要区分 getter/setter 场景下可以直接简化为仅有一个函数的形式: ```javascript new Vue({ computed:{ fullName(){ return this.firstName + '-' + this.lastName; } } }); ``` 这段代码展示了如何创建名为 `fullName` 的计算属性,该属性由两个独立的数据字段组合而成[^3]。 #### 示例案例分析 考虑如下 HTML 结构以及对应的 JavaScript 初始化部分: ```html <div id="app"> <h1>{{title}}</h1> <h1>{{index}}</h1> <h1>{{fullname}}</h1> <!-- 注意这里拼写错误应改为 fillname --> </div> <script> const vm = new Vue({ el: "#app", data: { title: "学习vue", index: "计算属性" }, computed: { fillname() { // 正确书写应该是 fillname 而不是 fullname return this.title + this.index; } } }); console.log(vm); </script> ``` 此示例说明了如何利用计算属性动态生成页面上的文本内容。需要注意的是,在实际应用中应当保持命名的一致性和准确性,比如上述代码片段中存在的拼写差异应该修正过来以确保功能正常工作[^4]。 #### 另一实例解析 另一个更加直观的例子是将名字分为姓氏 (`firstName`) 和 名字(`lastName`) 并合成完整的姓名作为计算属性输出: ```javascript var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName; } } }) ``` 这表明可以通过定义多个基础数据属性并通过计算属性轻松构建复杂的信息表示形式[^5]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值