计算属性与侦听器

最新推荐文章于 2023-01-08 09:41:55 发布
最新推荐文章于 2023-01-08 09:41:55 发布
阅读量231 收藏
点赞数 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
    评论
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 306
这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。上data: {},{//所有计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果}}})
【vue2】计算属性(computed)与侦听器(watch)详解
热门推荐
嗨，朋友你好！我是前端领域的工作者
01-08 1万+
【vue2】计算属性(computed)与侦听器(watch)详解。 计算属性两种写法：①默认get()类型②get()与set()类型搭配使用 侦听属性的两种写法：①值类型②引用类型 计算属性与侦听属性的总结对比
计算属性和侦听器的区别
bai101724的博客
01-06 1423
6：侦听器可以通过设置immerdiate为true，也可以像计算属性一样立即执行一次。1：功能不同，计算属性用于解决模板语法冗余问题。侦听器侦听data中某一个数据变化。5：计算属性只要使用了就会立即执行一次，侦听器默认只有当数据第一次执行才会执行。4：计算属性可以给vue新增属性，侦听器必须是data中已有属性。3：计算属性不支持异步操作，侦听器支持异步操作。2:计算属性有缓存机制，侦听器没有缓存机制。
计算属性和侦听器
wanglingli95的博客
03-20 1063
一、计算属性 1.1 什么是计算属性 首先通过一个示例来介绍计算属性，需求是把一个字符串倒序显示，具体代码如示例1所示： <template> <div class="hello"> <h1>{{msg}}转为{{msg.split('').reverse().join('')}}</h1> </div> </template> <script> export default { name: 'H
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） 计算...
VueJs(7)---计算属性和侦听器
a8892117的博客
05-02 223
计算属性和侦听器 一、 概述 计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再是简单的声明式逻...
Vue.js（五）计算属性、方法和侦听器
OneFine的技术博客
05-13 495
官方文档： https://cn.vuejs.org/v2/guide/computed.html 一个栗子： <div id="root"> <div>{{firstName + " " + lastName}}</div> </div> <script> var vm = new Vue({ el:...
Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
const_ly的博客
03-12 6201
1 . 相信有很多人都认为computed能实现的功能methods一样能实现, 对吧?其实确实是这样, computed能现实的methods确实能是现实,但是显示的过程可以有很大的差别的, 我就大家在这举一个列子来说明: 假设现象一下购物车结算场景，用户选中商品的总金额是根据商品数量、选中商品种类数 和商品单价来变化的。 我们直接这样就可以算出选中金额的总数: computed:{ ...
Vue 教程（4）—— 计算属性和侦听器
读万卷书，行万里路
06-01 3027
1 计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： &lt;div id="example"&gt; {{ message.split('').reverse().join('') }} &lt;/div&gt; 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 mess...
侦听器watch及其和计算属性、methods方法的总结
qq_53841687的博客
07-30 705
!计算属性方法侦听器watch年龄age{{age}}el"#app","zhang","san",age18,}},{console.log("调用了fullName2,使用了一次方法")}},{console.log("调用了fullName,计算了一次属性")}},watch{初始化缓存功能https。
计算属性和侦听器区别
最新发布
09-09
计算属性和侦听器是Vue.js中用于监测数据变化并响应的两种方式，它们在实现的方式和用途上有所不同。 计算属性是一种在模板中声明的属性，它的值是根据其他数据计算得出的，可以将一些复杂的逻辑计算放在计算属性中，以便在模板中直接使用。计算属性会根据它所依赖的数据进行缓存，只有当依赖的数据发生变化时，才会重新计算。这样可以提高性能，避免不必要的计算。计算属性适合用于需要进行复杂计算或者有依赖关系的场景。 侦听器是一种在Vue实例中声明的方法，用于观察和响应数据的变化。当被侦听的数据发生改变时，侦听器会自动执行相应的操作。侦听器可以用来监听一个或多个数据的变化，并在数据变化时执行一些异步或复杂的操作，比如发送请求、更新UI等。侦听器适合用于需要对数据变化做出特定响应的场景。 总结来说，计算属性适用于需要根据其他数据计算得出结果的场景，能够提高代码的可读性和性能；而侦听器适用于需要对数据变化做出特定响应的场景，能够处理一些异步或复杂的操作。两者在使用上有所不同，根据具体的需求选择合适的方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值