学会使用computed计算属性与watch监听(小白学习笔记)
1. 使用不同方法实现 姓名案例
需求: 根据data中 firstName 和 lastName 的值 来动态地展示全名
1.1. 插值语法
如果只使用学过的插值语法 那可以在模板中直接使用两个变量 . 但是如果需要对数据进行计算等处理 就需要在插值语法里写复杂的js表达式. 这样就违背了vue风格指南中"模板中使用简单表达式"的原则.
1.2. methods 方法
如果使用学过的 methods 方法 ,那么代码如下图所示 模板中的表达式看起来不复杂. 但是 vue的特性是 只要数据值改变 那么模板就会重新解析. 将用到该数据的所有地方重新计算展示 一旦 firstName 和 lastName 中任意值发生变化 所有用到fullName的地方都需要重新调用 会影响性能.
methods中的函数如何拿到data中的数据? 这里methods配置项中的 普通函数由vue管理 其内部的this指向组件实例或vm. 又因为vm身上有data中的所有属性 所以可以在methods中使用this拿到data中的两个属性值
1.3. 计算属性computed
使用计算属性 可以把 根据firstName 和 lastName 计算得到的结果 命名为fullName 将其写成对象的形式 在该对象里面配置 getter和 setter 函数 分别用于读取fullName属性 和设置fullName属性
str.split(delim) 方法。它通过给定的分隔符 delim 将字符串分割成一个数组。
arr.join(glue) 与 split 相反。它会在它们之间创建一串由 glue 粘合的 arr 项。
读取 计算属性 fullName 即读取其内部getter函数return的返回值 又因为返回值依赖其他属性值 所以会通过计算得到结果 并且该结果会有缓存, 只要依赖的数据即 firstName和 lastName 不变化 无论fullName被使用多少次 都可以直接使用缓存的值 不需要重复调用. 节省性能.
该计算属性 会直接放到vue实例上 属性值是getter函数的返回值 我们可以在vue模板中直接使用.如下图所示:
注意 getter和setter 必须写成普通函数的形式(非箭头) 这样其内部this指向的就是组件实例或Vm 方便使用实例身上的属性来进行计算.
1.4. 使用计算属性小结
(1) 什么时候使用计算属性? 要用到的属性值不存在 需要依赖已有属性计算得来.
(2) 底层原理是什么? 底层借助了Object.defineproperty方法提供的getter和setter.
(3) gettr和setter函数分别在什么时候执行?
getter 执行: ① 第一次读取计算属性值的时候 ② 所依赖的数据发生变化的时候 getter会被再次调用,将新值更新到页面中.
setter 执行: 当对计算属性进行赋值时执行 (注意setter内部 要引起计算时依赖的数据发生变化 )
( 依赖的数据发生了 对应的改变 ---> 读取计算属性时 其结果才会和赋值相同 如下图所示 当全名fullName被更改为张-三 在set函数中将其firstName和lastName进行相应更改( 张 三 ) 读取fullName时 getter函数才会返回新值 张-三)
(4) 计算属性的优势: 与methods相比 计算属性内部具有缓存机制(方便复用), 效率更高 调试方便.
(5)计算属性的简写形式
如果fullName计算属性 只会被读取 而不可能被赋值(修改). 那么不需要再写成对象里面包含getter和setter的格式,只需要写成 名为fullName的函数 返回计算的结果即可. VUE就会将 fullName和返回的结果 放在vue实例上方便读取.
2. 使用不同方法实现 天气案例
需求: 点击按钮切换天气.
2.1. 使用计算属性实现
使用计算属性实现 根据data中isHot的值 --> 计算出展示信息即 info的值
2.2. 使用监听属性实现
使用监听属性的两种写法 ①new vue时传入的配置项watch ②vm身上的$watch方法. 如下图所示:
当监听的 isHot属性(监听的可以是已有的data属性也可以是已有的计算属性) 值发生变化时.其内部配置的handler函数就会被调用.并且该函数可以接收 监听属性改变后的新值 和改变前的旧值.
注意: 监听的属性 必须先存在 才能举行监听.
2.3. 立即监听 深度监听与 watch监听的简写形式
深度监听: 如果监听的数据指向一个对象 ,那么默认监听的是该对象的引用地址. 如果想监听对象内部的属性 需要开启深度监听.
立即监听: 页面初始化时 就调用handler函数(数据无需改变)
监听属性的简写形式
如果监听属性时 只需要配置handler函数(无需立即调用与深度监听) 可以使用简写属性.
① watch配置项的简写
不再写成对象形式, 直接使用 监听的属性名 写成函数形式, 参数同样可以接收 newValue oldValue.
② vm上调用 $watch的简写
不再写成对象形式 而是直接写成匿名函数.
注意: new Vue时 传入的配置项里的函数 都是由vue进行管理的函数 都要写成普通函数(非箭头×)的形式.这样函数内部的this才会指向vue实例.
3. 计算属性与监听属性的区别
3.1. 使用监听属性实现 姓名案例
需要分别监听已有属性 firstName 和 lastName的变化 并且额外创建 fullName属性 当监听到改变时使 fullName属性发生对应的变化.
3.2. 两者的区别
watch监听 函数内部可以使用定时器 实现 1s之后修改对应属性值的效果.
但是 计算属性 依靠return 来改变属性值 所以无法使用定时器. 定时器中箭头函数的return是定时器内部的
不是 fullName函数的返回值. 所以无法使用定时器来改变计算属性的返回值
所以 当需要进行异步计算的时候 需要使用watch.
computed 能完成的功能 ---> watch 一定可以完成(只是没有缓存). 但是watch能完成的功能 ,computed不一定能完成( 不方便拿到newValue 和 oldValue 也不能异步操作 )
注意 : 下图中 定时器内部必须写箭头函数 因为定时器是js引擎调用的 定时器内部如果是普通函数 其this 指向 window. 只有写成箭头函数 它没有自身的this 继承其包含上下文的this 即firstName函数的this 才能指向vm 才能拿到vm身上的firstName和lastName属性值.
以上就是计算属性computed 和监听属性watch的基础使用方法.
------------------------------文章内容整理自禹神 Vue2 前端课程------------------------------------------------------