计算属性与侦听器

最新推荐文章于 2023-07-17 11:43:07 发布
最新推荐文章于 2023-07-17 11:43:07 发布
阅读量230 收藏
点赞数 2
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59359854/article/details/126021707
版权

计算属性的基本使用

  1. 使用Mastache语法拼接<h2>{{firstName+ " " + lastName}}</h2>
  2. 使用方法methods<h2>{{getFullName()}}</h2>
  3. 使用计算属性computed<h2>{{fullName}}</h2>

例子中计算属性computed看起来和方法似乎一样，只是方法调用需要使用()，而计算属性不用，方法取名字一般是动词见名知义，而计算属性是属性是名词，但这只是基本使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>您的firstname:{{firstName}}</h2>
			<h2>您的lastname:{{lastName}}</h2>
			<h2>您的fullname是从计算属性中得到:{{fullName}}</h2>
			<h2>您的fullname是从方法中得到:{{getFullName()}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						firstName:'zhang',
						lastName:'san'
					}
				},
				methods:{
					getFullName(){
						return this.firstName + this.lastName
					}
				},
				computed:{//计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
					fullName(){
						return this.firstName + this.lastName
					}
				}
			})
		</script>
	</body>
</html>

 

 

计算属性的复杂使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>您的总价:{{totalPrice}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						books: [{
								id: 110,
								name: "JavaScript从入门到入土",
								price: 119
							},
							{
								id: 111,
								name: "Java从入门到放弃",
								price: 80
							},
							{
								id: 112,
								name: "编码艺术",
								price: 99
							},
							{
								id: 113,
								name: "代码大全",
								price: 150
							},
						]
					}
				},
				computed: {
					/* totalPrice() {
						let total = 0
						for (let i = 0; i < this.books.length; i++) {
                              total += this.books[i].price
						}
						return total
					} */
					
					/* totalPrice() {
						let total = 0
						for (let index in this.books) {
							total += this.books[index].price
						}
						return total
					} */
					
					/* totalPrice() {
						let total = 0;
						for(let item of this.books){
							total += item.price
						}
						return total
					} */
					
					/* totalPrice() {
						let total = 0;
						this.books.forEach(item=>{
							total += item.price
						})
						return total
					} */
					
					/* map */
					/* totalPrice() {
						let total = 0;
						this.books.map(item=>{
							total += item.price
						})
						return total
					} */
					
					/* filter */
					/* totalPrice() {
						let total = 0;
						this.books.filter(item=>{
							total += item.price
						})
						return total
					} */
					
					/* reduce */
					/* totalPrice() {
						return this.books.reduce((total,item)=>{
							 return total + item.price 
						},0)
					} */
					
					/* totalPrice() {
						return this.books.reduce((total,item)=>total + item.price,0)
					} */
					
					/* some */
					totalPrice() {
						let total = 0;
						this.books.some(item=>{
							total += item.price
						})
						return total
					}
					
				}
			})
		</script>
	</body>
</html>

 

 

计算属性中的getter和setter

计算属性一般没有set方法，只读属性，只有get方法，但是上述中newValue就是新的值，也可以使用set方法设置值，但是一般不用

通过这种方式，我们可以在改变计算属性值的同时也改变和计算属性相关联的属性值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="firstName"/>
			<input type="text" v-model="lastName"/>
			<input type="text" v-model="fullName"/>
			<!-- v-model实现数据的双向绑定 -->
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						firstName: 'zhang',
						lastName: 'san'
					}
				},
				computed: { //计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
					/* fullName(){
						return this.firstName + this.lastName
					} */

					 fullName: {
						get: function() {
							return this.firstName +','+ this.lastName
						},
						set:function(val){
							var list = val.split(',')
							console.log(list);
							this.firstName = list[0]
							this.lastName = list[1]
						}
					} 
				}
			})
		</script>
	</body>
</html>

 

 

计算属性和methods的对比

计算属性有缓存，在this.firstName + " " + this.lastName的属性不变的情况下，methods调用了四次，而计算属性才调用了一次，性能上计算属性明显比methods好。而且在改动firstName的情况下，计算属性只调用一次，methods依然要调用4次。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>您的fullname是从计算属性中得到:{{fullName}}</h2>
			<h2>您的fullname是从计算属性中得到:{{fullName}}</h2>
			<h2>您的fullname是从计算属性中得到:{{fullName}}</h2>
			<h2>您的fullname是从计算属性中得到:{{fullName}}</h2>
			
			<h2>您的fullname是从方法中得到:{{getFullName()}}</h2>
			<h2>您的fullname是从方法中得到:{{getFullName()}}</h2>
			<h2>您的fullname是从方法中得到:{{getFullName()}}</h2>
			<h2>您的fullname是从方法中得到:{{getFullName()}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						firstName:'zhang',
						lastName:'san'
					}
				},
				methods:{
					getFullName(){
						console.log('这里调用了方法getFullName');
						return this.firstName + this.lastName
					}
				},
				computed:{//计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
					fullName(){
						console.log('这里调用了计算属性fullName');
						return this.firstName + this.lastName
					}
				}
			})
			
			/* 总结:计算属性的性能是优于方法的 因为计算属性是具有缓存特性的 */
		</script>
	</body>
</html>

 

 

侦听器watch的用法1

监听器中有两个参数 一个是newval新的值 一个是oldval是老值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{firstName}}</h3>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						firstName: "zhang",
						lastName: "san",
						watchFullName: "zhangsan",
						age: 18,
					}
				},
				watch: {
					/* firstName(newval,oldval){
						//监听器中有两个参数 一个是newval新的值 一个是oldval是老值
						console.log(newval);
						console.log(oldval);
					} */

					firstName: "change"
				},
				methods: {
					change(newval, oldval) {
						console.log(newval);
						console.log(oldval);
					}
				}

			})
		</script>
	</body>
</html>

 

 

侦听器watch的用法2

handler方法就相当于普通侦听器触发的事件，从结果可以看到，组件初始化的时候，侦听器并没有handler方法 ，所以fullName是没有值的

当修改以上代码，加上immediate: true，immediate:true代表watch里面声明了之后会立马执行handler里面的函数。执行相应的逻辑。组件初始化的时候，侦听器会立马（immediate）触发handler方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>FullName: {{person.fullname}}</p>
            <p>FirstName: <input type="text" v-model="person.firstname"></p>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						person: {
							firstname: 'Menghui',
							lastname: 'Jin',
							fullname: ''
						}
					}
				},
				watch: {
                    /* fullname(newval,oldval){
						 console.log(newval);
						 console.log(oldval);
					 } */
					 
					/* person(newval,oldval){
						 console.log(newval);
						 console.log(oldval);
					 } */
					 
					 person:{
						 handler(n,o){
							 console.log(n);
							 console.log(o);
							 this.person.fullname = n.firstname + this.person.lastname
						 },
						 immediate:true,//刷新即加载
						 deep:true//深度监听0
					 }
					 
					 
				}

			})
		</script>
	</body>
</html>

 

 

侦听器watch的用法3

当在输入框中输入数据时， 可以发现fullName的值并没有随之改变 这是因为vue无法检测到对象内部属性值的变化，比如person.firstname的变化

所以此时 需要用到vue的深度监听（deep）

此时加上代码 deep: true

可以发现 每次输入框数据变化 fullname随之改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>FullName: {{person.fullname}}</p>
            <p>FirstName: <input type="text" v-model="person.firstname"></p>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						person: {
							firstname: 'Menghui',
							lastname: 'Jin',
							fullname: ''
						}
					}
				},
				computed:{
					person2(){
						return JSON.parse(JSON.stringify(this.person));//深拷贝
					}
				},
				watch: { 
					 person2:{
						 handler(n,o){
							 console.log(this.person);
							 console.log(n.firstname);
							 console.log(o.firstname);
						 },
						 deep:true//深度监听
					 }
					 
					 
				}

			})
		</script>
	</body>
</html>

 

 

北风吹画州
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
计算属性和侦听器
zl13015214442的博客
02-20 368
计算属性–computed 官网对于计算属性的解释是用于简化模板中放入冗杂的计算逻辑而设计的，也就是说当要显示的变量要经过逻辑运算后再显示后，不推荐在模板中进行计算，都应当使用计算属性。下面通过一个例子来实现： &lt;body&gt; &lt;div id="root"&gt; 姓：&lt;input v-model="firstName"&gt; 名：&lt;input v-mod...
计算属性、方法和侦听器
学会改变的博客
07-02 189
计算属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性、方法和侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="root"> {{ful
【vue2】计算属性(computed)与侦听器(watch)详解
热门推荐
嗨，朋友你好！我是前端领域的工作者
01-08 1万+
【vue2】计算属性(computed)与侦听器(watch)详解。 计算属性两种写法：①默认get()类型②get()与set()类型搭配使用 侦听属性的两种写法：①值类型②引用类型 计算属性与侦听属性的总结对比
记录---计算属性(computed)与侦听器(watch)的用法
weixin_46162592的博客
07-17 444
计算属性和侦听器的用法和区别
Vue中的 watch监听属性
最爱喝怡宝的博客
12-02 2162
在Vue 中，computed计算属性用来监听多个数据；watch 监听单个数据； 首先要确认 watch是一个对象，要当成对象来使用。 键：就是那个，你要监听的那个家伙； 值：可以是函数，当你监控的家伙发生变化时，需要执行的函数，这个函数有两个形参 第一个是当前值（新的值），第二个是更新前的值（旧值） 值也可以是函数名：不过这个函数名要用单引号来包裹。 值是包括选项的对象：选项包括有三个。 1.第一个 handler：其值是一个回调函数。即监听到变化时应该执行的函数。 2.第二个是 deep：
6、计算属性与侦听器（conputed、watch）
weixin_45065754的博客
04-11 201
1、计算属性（computed） 2、侦听器（watch） 3、区别（首选计算属性）
Vue学习笔记之计算属性与侦听器用法
10-15
在Vue.js框架中，计算属性（Computed Properties）和侦听器（Watchers）是两个关键特性，用于实现数据的动态响应和复杂逻辑处理。这两者都是Vue数据绑定系统的重要组成部分，有助于提高应用性能和代码可维护性。 1....
Vue基础：计算属性 与 侦听器
01-20
#### 2.2 计算属性与侦听器的对比 - **使用场景**：计算属性适合于计算一个新属性并将其挂载到Vue实例上，而侦听器则用于监听已经存在的数据变化，包括计算属性和其他数据。 - **执行时机**：计算属性在依赖变更时...
深入浅析Vue.js计算属性和侦听器
10-18
在Vue.js中，计算属性和侦听器是两个重要的概念，它们帮助我们处理数据的复杂逻辑和响应性。让我们深入探讨这两个特性。 **一、计算属性** 计算属性是Vue.js中用于处理和组合现有数据的便捷方式。它们提供了一个在...
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
Vue计算属性与方法跟侦听器区别详解 Vue框架中，计算属性、方法和侦听器是三个常见的概念，但它们都有其特点和适用场景，下面我们将详细介绍它们的区别和使用场景。 一、计算属性（Computed Properties） 计算...
计算属性和侦听器的区别
bai101724的博客
01-06 1412
6：侦听器可以通过设置immerdiate为true，也可以像计算属性一样立即执行一次。1：功能不同，计算属性用于解决模板语法冗余问题。侦听器侦听data中某一个数据变化。5：计算属性只要使用了就会立即执行一次，侦听器默认只有当数据第一次执行才会执行。4：计算属性可以给vue新增属性，侦听器必须是data中已有属性。3：计算属性不支持异步操作，侦听器支持异步操作。2:计算属性有缓存机制，侦听器没有缓存机制。
Vue入门-计算属性和侦听器
压缩疯雷的博客
10-19 158
计算属性和侦听器计算属性基础例子计算属性缓存 vs 方法计算属性 vs 侦听属性计算属性的 setter侦听器 计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻
vue基础教学（3）
Taojia9958的博客
05-24 187
一、计算属性的基本使用 <body> <div id="app"> <p>{{firsrName}}-{{lastName}}</p> <p>{{getFullName()}}</p> <p>{{fullName}}</p> </div> <script src="../../vue.js" type="text/javascript" charset="utf
Vue计算属性和侦听器
weixin_61562639的博客
08-07 305
这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。上data: {},{//所有计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果}}})
Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
const_ly的博客
03-12 6199
1 . 相信有很多人都认为computed能实现的功能methods一样能实现, 对吧?其实确实是这样, computed能现实的methods确实能是现实,但是显示的过程可以有很大的差别的, 我就大家在这举一个列子来说明: 假设现象一下购物车结算场景，用户选中商品的总金额是根据商品数量、选中商品种类数 和商品单价来变化的。 我们直接这样就可以算出选中金额的总数: computed:{ ...
计算属性和侦听器区别
最新发布
09-09
计算属性和侦听器是Vue.js中用于监测数据变化并响应的两种方式，它们在实现的方式和用途上有所不同。 计算属性是一种在模板中声明的属性，它的值是根据其他数据计算得出的，可以将一些复杂的逻辑计算放在计算属性中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值