Vue基础之计算属性

最新推荐文章于 2024-09-27 02:07:10 发布

原创最新推荐文章于 2024-09-27 02:07:10 发布 · 652 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue浅谈专栏收录该内容

7 篇文章

订阅专栏

Vue基础之计算属性

定义：
原理：
get函数执行时机：
优势：
备注：
Demo:

定义：

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

原理：

底层借助了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
					}
				}
			}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MoshMode

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 计算属性

很酷的站长的博客

01-21

263

本节介绍计算属性的使用方法。包括什么是计算属性，计算属性的特点，还有计算属性和方法在实际使用中的区别。其中重点掌握计算属性和方法的区别，了解它之后，才能在日常工作中灵活使用计算属性和方法。

深入理解Vue 3：计算属性与侦听器的艺术

05-30

1205

Vue.js作为当今流行的前端框架之一，以其响应式数据绑定和组件化架构著称。随着技术的不断演进，Vue3带来了许多令人期待的新特性，这些特性不仅使得Vue.js更加高效和灵活，也为开发者提供了更好的开发体验。Composition API：Vue 3引入了Composition API，它是对原有Options API的补充，使得代码更加模块化和可复用。通过组合式API，开发者可以更方便地组织和重用逻辑。

1 条评论您还未登录，请先登录后发表或查看评论

Vue之计算属性

Ming_xm的博客

07-24

4296

原字符串：{{str}}新字符串：{{newstr}}new Vue({data: {},//对字符串进行分割并重新连接},})

Vue的计算属性

qq_50260510的博客

06-07

4890

Vue的计算属性

Vue计算属性

韩旭不会敲代码吧的博客

07-20

4382

1、计算属性的基本使用 (1)当模板{{ }} 里面的插值比较麻烦时，可以将数据放到计算属性，然后用该计算属性。 (2)计算属性是放在vue实例的computed中定义，与methods类似，都是定义函数。 (3)计算属性定义在computed中，调用时使用mustache语法调用且后面不跟() <div id="app"> <h2>{{firstName+ ' ' + lastName}}</h2> <h2>{{firstName}} {{las

Vue基础：计算属性与侦听器

01-20

在Vue中，有两类特殊的属性用于处理数据的计算和响应式变化：计算属性（computed）和侦听器（watch）。这两个概念是Vue开发中不可或缺的部分，帮助开发者高效地管理复杂的业务逻辑。 ### 1. 计算属性（computed） ...

vue computed 计算属性

carbonzhao的专栏

06-04

1009

官方:当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回一个结果,计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新,适用于。计算属性基于它们的依赖进行缓存的，只有相关依赖发生改变的时候才会重新求值，一般为响应式依赖。下的数据，是每次都会进行计算的。

Vue中的计算属性与监听器

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-27

607

在其众多特性中，计算属性(computed properties)和监听器(watchers)是两个非常重要的概念，它们可以帮助开发者有效地管理复杂的应用状态，并优化应用性能。通过合理的使用这两个特性，可以有效地管理复杂的状态，并提高应用的性能。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。让我们从一个简单的例子开始，创建一个Vue实例，其中包含一个计算属性来展示用户的名字和姓氏的全名。的值发生变化时，监听器就会触发，并打印出变化的信息。

【Vue3】计算属性

又言又语

07-20

431

本文介绍 Vue3 中计算属性的用法。计算属性是根据其他数据的变化自动计算其关联的衍生值，且具备缓存机制，即只有依赖的数据发生变化时才会重新计算。

Vue - 计算属性

热门推荐

小海的博客

11-01

5万+

1.vue计算属性-computed 一个数据, 依赖另外一些数据计算而来的结果场景: 一个变量的值, 需要用另外变量计算而得来语法: computed: { "计算属性名" () { return "值" } } 注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同注意2: 函数内变量变化, 会自动重新计算结果返回例子: 需求: 需求1: 求2个数的和显示到页面上需求2: 字符串翻转 <template> &l

Vue之计算属性（computed）

浩泽学编程的博客

06-30

3万+

计算属性以上就是计算属性的大致讲解。

Vue——计算属性

AYBBZXY的博客

01-21

2017

文章目录计算属性computed 计算属性 vs methods 方法计算属性完整写法综合案例：成绩案例计算属性概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算语法: ①声明computed配置项中，一个计算属性对应一个函数 ②使用起来和普通属性一样使用{{ 计算属性名 }} (平时声明属性是往data中放的，现在要往对应的computed中放👇) <script> computed:{ 计算属性名 () { 基于现有数据，编写求职逻辑 return 结

vue计算属性

qq_52963857的博客

06-15

2441

vue计算属性，1.1 computed1.2 缓存1.3 vue计算属性-完整写法1.4 案例-小选影响全选1.5 案例-全选影响小选1.6 案例-反选2. vue侦听器2.1 watch2.2 深度侦听和立即执行2.3 案例-品牌管理(数据缓存)

Vue中的计算属性（全面）

零碎@流年絮语的博客

01-23

649

计算属性引入通过插值语法显示一些data中的数据，但有的时候需要提高性能，因此使用计算属性。计算属性是写在实例的computed选项中的案例见如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

vue 计算属性

wngzhem的博客

11-15

3139

在这里我觉得讲 computed 和methods放在一起讨论更便于理解。 computed：{{comput1}} var vm = new Vue({ el: '#example', data: { message: 10 }, computed: { comput1: function () { return this.message

vue2的计算属性使用

最新发布

02-22

### 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>  </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]。