天天看点

计算属性 侦听者和方法

##字符串截取操作

(1)substring

作用:用于提取字符串中介于两个指定下标之间的字符

语法:substring(start,end)

语法解析:start开始和end结束的位置,从零开始的索引,包头不包尾

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为正整数(包头包尾)

计算属性简介

什么是计算属性?

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

计算属性 侦听者和方法

计算属性缘由:

模板内的表达式是非常便利的,但是它们实际上只用于简单的运算,如果在模板里放入太多的逻辑会让模板过于臃肿且难以维护。

例如将“xiaoming”首字母大写

计算属性 侦听者和方法
计算属性 侦听者和方法

计算属性缘由:

上述案例里,将业务逻辑代码写入了模板里,写法本身没有错误,也能够实现相应功能,但是这样会导致代码过于累赘,不简洁,难以维护

因此在这里引入了计算属性computed来解决此问题。

这里注意:计算属性相关代码需要写到computed选项中。

计算属性 侦听者和方法

计算属性的三部曲

1.调用

2.computed方法

3.方法返回值

代码如下

计算属性 侦听者和方法

注意事项:

1、this—在构造函数中,访问本身方法时,需要利用this代表自身,去指向对应的方法和数据。

2、写法上类似于函数,调用时类似于属性,所以起名为计算属性

computed vs methods

除了计算属性,可以通过在表达式中调用方法来达到同样的效果:

计算属性 侦听者和方法

结果:

计算属性 侦听者和方法

由此可见到达的效果是一样的但区别在哪呢 来 往下看:

计算属性 侦听者和方法

结果

计算属性 侦听者和方法

计算属性缓存VS方法

1、计算属性是基于他们的依赖进行缓存的

2、计算属性只有在它的相关依赖发生改变时才会重新计算(改变才会重新计算,如果不改变情况下连续多次调用时,会发现不会再次调用该方法)

3、同个方法在不同界面可能调用多次,如果使用方法调用,则每次调用都会将复杂算法执行一次,浪费性能;

计算属性缓存VS方法

使用 methods 来替代 computed,效果上两个是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

可以说使用 computed 性能会更好,但是如果不希望缓存,可以使用 methods 属性。

小结:相比之下,每当触发重新渲染时,调用方法将总会再次执行函数

为什么需要缓存?

假设有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。

然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A !如果不希望有缓存,可以用方法来替代。

综上所述,计算属性更高效一些,因为是基于依赖进行缓存。
           

小编也觉得计算机缓冲比较效率高点

侦听器 属性

什么是侦听器?

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

通俗理解:

当vue实例数据发生变动,watch属性可以快速检测到改变的数据

接下来结合具体案例了解下watch侦听器属性。

接下来咱们来结合购物车的属性来了解下看实例:

首先写个基本的文档结构

计算属性 侦听者和方法

只需改动一项,总价都会发生更改。

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

计算属性 侦听者和方法

逻辑分析及监听验证:

当发现到单价和数量任意一个发生改变时,总价才会发生变动。

所以首先需要检测数据的变动,此时便可以用到watch侦听器属性。例如要监听单价price,则如下所示

计算属性 侦听者和方法

侦听器VS计算属性

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

前言:

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

计算属性 侦听者和方法

分析:

因为计算属性在计算完毕后会进行依赖缓存,直到值发生改变时才会再次重新计算。

所以每次单价和数量任意一个发生更改时,即根据依赖而定,只要依赖(单价及数量)改变,总价的计算属性computedSum都会重新计算。

计算属性 侦听者和方法

计算属性setter与getter

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

计算属性 侦听者和方法

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

setter:

注意:计算属性默认只有getter,不过在需要时也可以使用setter

案例验证:

计算属性 侦听者和方法

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

计算属性 侦听者和方法

计算属性有两个实用的小技巧/特点

①计算属性可以依赖其他计算属性;

②计算属性不仅可以依赖当前vue实例的数据,还可以依赖其他实例数据

计算属性 侦听者和方法

在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,最终返回计算后的结果。

除了上例简单的用法,计算属性还可以依赖多个Vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。

小结

(1)使用计算属性还是methods取决于是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存。

(2)因为侦听器watch相对繁琐,大多情况下推荐用计算属性computed选项处理即可。

有任何问题可以随时联系小编