Vue之计算属性与侦听器

最新推荐文章于 2022-05-30 10:21:21 发布

·Mr.zuo

最新推荐文章于 2022-05-30 10:21:21 发布

阅读量503

点赞数

CC 4.0 BY-SA版权

分类专栏： vue计算属性 vue javascript 文章标签： Vue

本文链接：https://blog.youkuaiyun.com/zuomengjia/article/details/102521530

vue 同时被 3 个专栏收录

27 篇文章

订阅专栏

javascript

15 篇文章

订阅专栏

vue计算属性

13 篇文章

订阅专栏

字符串截取操作

js中字符串方法操作有很多:concat、indexOf….
等等，本节主要介绍两种经常混淆的字符串截取方法:substring和substr
（1）substring
作用：用于提取字符串中介于两个指定下标之间的字符
语法：substring(start,end)
语法解析：start开始和end结束的位置，从零开始的索引，包头不包尾
定义：提取指定字符串中介于两个指定参数下标之间的字符
参数描述：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191012163505252.png

（1）substring验证

1、只有一个参数（自动输出后面所有字符）
在这里插入图片描述
2、start > end

当读取位置大于结束位置的时候，substring会自动调整位置

3、start = end
在这里插入图片描述
4、start<0 或者 end<0

5、正常取值start<end（包头不包尾）

（2）substr

定义：返回字符串的一个子串，传入参数是起始位置和长度
注意：substr是根据长度取值
语法：substr(start,length)
语法解析：返回从start位置开始length长度的字串，参数描述

substr验证
1、只有一个参数，正整数（自动输出后面所有字符）

2、只有一个参数，正整数且start为负数
如果start为负数，则start=str.length+start

3、两个参数，length 为 0 或负数
在这里插入图片描述

返回一个空字符串

4、两个参数，length为正整数（包头包尾）
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="demo">
			{{name}}
		</div>
	</body>
	<script type="text/javascript">
		
		var name= 'ergou'
		console.log(name.substring(1,3))
		/*两个参数一个开始位置一个结束位置*/
		console.log(name.substring(0,2))
		/*两个参数一个开始位置一个截取长度  包头不包尾*/
		var demo = new Vue({
			
		})
	</script>
</html>

什么是计算属性？

通过之前章节，已经可以搭建一个简单的Vue应用，在模板里双向绑定一些数据或者表达式。

计算属性缘由：
模板内的表达式是非常便利的，但是它们实际上只用于简单的运算，如果在模板里放入太多的逻辑会让模板过于臃肿且难以维护。
例如将“xiaoming”首字母大写
上述案例里，将业务逻辑代码写入了模板里，写法本身没有错误，也能够实现相应功能，但是这样会导致代码过于累赘，不简洁，难以维护
因此在这里引入了计算属性computed来解决此问题。
这里注意：计算属性相关代码需要写到computed选项中。

案例2：表达式如果过长或者逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护，比如
这里的表达式包含3个操作，并不是很清晰，所以在遇到复杂逻辑时应该使用计算属性，使用计算属性对上例进行改写。

步骤：3部曲

注意：
1、this—在构造函数中，访问本身方法时，需要利用this代表自身，去指向对应的方法和数据。
2、写法上类似于函数，调用时类似于属性，所以起名为计算属性

计算属性缓存VS方法

除了计算属性，可以通过在表达式中调用方法来达到同样的效果：
但是接下来再看个案例，将两者调用两次（如下所示），看下区别。

计算属性缓存VS方法

1、计算属性是基于他们的依赖进行缓存的
2、计算属性只有在它的相关依赖发生改变时才会重新计算（改变才会重新计算，如果不改变情况下连续多次调用时，会发现不会再次调用该方法）
3、同个方法在不同界面可能调用多次，如果使用方法调用，则每次调用都会将复杂算法执行一次，浪费性能；
使用 methods 来替代 computed，效果上两个是一样的，但是 computed
是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。
小结：相比之下，每当触发重新渲染时，调用方法将总会再次执行函数

为什么需要缓存？

假设有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A ！如果不希望有缓存，可以用方法来替代。
综上所述，计算属性更高效一些，因为是基于依赖进行缓存。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="demo">
			<!-- 1.调用 -->
			<h2>我的名字叫-----{{myName}}我的虚岁是------{{myAge}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		var demo = new Vue({
			el:'#demo',
			data:{
				name:'xiaoming',
				age:18
			},
			computed:{
				/*2.注册*/
				myName:function(){
					/*toUpperCase() 将截取奥的字母变成大写*/
					/*3、返回值、显示到模板信息里*/
					return this.name.substring(0,1).toUpperCase()+this.name.substring(1)
				},
				myAge:function(){
					return this.age+1
				}
			}
		})
	</script>
</html>

侦听器

简介：

除了计算属性，Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性/器。

通俗理解：

当vue实例数据发生变动，watch属性可以快速检测到改变的数据
接下来结合具体案例了解下watch侦听器属性。
接下来结合购物车案例了解下
首先写个基本的文档结构

需求：只要改动任意一项，总价都会发生更改。

分析：

这里首先需要获取输入框的值，此时需要用到双向数据绑定指令v-model，双向数据绑定指令也是VUE框架MVVM设计模式最为明显的一个特征“双向数据绑定”。

逻辑分析及监听验证：
当发现到单价和数量任意一个发生改变时，总价才会发生变动。
所以首先需要检测数据的变动，此时便可以用到watch侦听器属性。例如要监听单价price，则如下所示
当在页面改动单价price值时，便会发现监听到了price值的改动

watch监听器属性参数1：

newValue为改动后的新数值

此时便可以监测到值发生改动，并且获取改动后的数值大小。

改动后重新计算总价：
在这里插入图片描述
注意：

只要监听名字对应上，即可监听任意数据的改动。

接下来利用计算属性实现总价的动态更改，对比计算属性与侦听器watch属性区别。
前言：

计算属性可以将一些复杂的逻辑封装进去，直接调用属性即可进行计算，且计算完毕后会进行依赖缓存，直到值发生改变时才会再次重新计算

在这里插入图片描述

侦听器VS计算属性

分析：

因为计算属性在计算完毕后会进行依赖缓存，直到值发生改变时才会再次重新计算。
所以每次单价和数量任意一个发生更改时，即根据依赖而定，只要依赖（单价及数量）改变，总价的计算属性computedSum都会重新计算。
在这里插入图片描述

计算属性setter与getter

目前为止，可以发现计算属性并不像方法那样灵活，因为方法使用可以随意传参，如下所示

但计算属性主要用法为获取值，即getter。但没有办法进行传值，但其实也是支持传值的，即setter。

setter：

注意：计算属性默认只有getter，不过在需要时也可以使用setter
案例验证：

setter案例：
setter写法上稍微有所不同，对象里包含get和set两部分

setter案例：
接下来打开控制台，在控制台动态更改年纪，会发现除了读取getter外，也可以进行设置setter

计算属性有两个实用的小技巧/特点
①计算属性可以依赖其他计算属性；
②计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例数据

计算属性用法

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回计算后的结果。
除了上例简单的用法，计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
例如：下面实例展示的是在购物车内两个包裹的物品总价（01.html）
01.html案例

01.html案例解析：

当package1或者package2中的商品有任何变化，比如购买数量变化或者删除商品时，计算属性money就会自动更新，视图中的总价也会自动变化。

getter与setter

计算属性包含getter和setter，上面实例都是计算属性默认用法，只是利用getter读取。此外也可以用setter函数，当手动修改计算属性的值就像修改普通数据时，便会触发setter函数，执行一些自定义操作（02.html、03.html）
02.html案例：
该案例也是计算属性的默认用法，只是利用getter读取。

03.html案例：
getter与setter结合

02.html案例解析：

该案例也是计算属性的默认用法，只是利用getter读取。

03.html案例解析：

当执行demo.fullName = 'Albert
Einstein’时，setter就会被调用，数据firstName和lastName都会相对更新，视图也会相应更新。
一般用默认的getter方法来读取计算属性，直接使用默认写法，不必将getter和setter都声明。
计算属性除了上述简单的文本插值外，还常用于动态设置元素样式名称class和内联样式style，此外使用组件时，计算属性也常用来动态传递props，这些都在之后课程讲解。

04.html案例解析：

这里创建了两个实例demo1和demo2，在demo2的计算属性reverseName中，依赖的是demo1的数据name，当name变化时，实例demo2的计算属性也会变化。
这样的写法在后面的组件和组件化也会用到，尤其在多人协同开发时常用，因为你写的一个组件所用数据可能需要依赖其他人的组件提供。之后会做讲解。