Vue 中计算属性和侦听器

Admin
Admin
Admin
52
文章
6
评论
2020年10月22日11:12:16 评论 258 2540字阅读8分28秒

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属性和侦听器来优化代码逻辑。

计算属性

计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。

1、基本用法

  1. <div id="app">
  2.     <p>Original message: "{{ message }}"</p>
  3.     <p>Computed reversed message: "{{ reversedMessage }}"</p>
  4. </div>
  5. var vm = new Vue({
  6.     el: '#app',
  7.     data: {
  8.         message: 'Hello'
  9.     },
  10.     computed: {
  11.         // 计算属性的 getter
  12.         reversedMessage: function () {
  13.             // `this` 指向 vm 实例
  14.             return this.message.split('').reverse().join('')
  15.         }
  16.     }
  17. })

计算属性会基于响应式依赖进行缓存,只有原值 message 发生变化时,才会重新进行计算,否则会立即返回之前的计算结果。

2、计算属性缓存 vs 方法

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

  1. // 在组件中
  2. methods: {
  3.     reversedMessage: function () {
  4.         return this.message.split('').reverse().join('')
  5.     }
  6. }

3、计算属性的 setter

计算属性默认只有 getter,当 fullName 为一个对象时,可为其设置 setter

  1. var vm = new Vue({
  2.     el: '#app',
  3.     data: {
  4.         firstName: 'Foo',
  5.         lastName: 'Bar'
  6.     },
  7.     computed: {
  8.         fullName: {
  9.             // getter
  10.             get: function () {
  11.                 return this.firstName + ' ' + this.lastName
  12.             },
  13.             // setter
  14.             set: function (newValue) {
  15.                 var names = newValue.split(' ')
  16.                 this.firstName = names[0]
  17.                 this.lastName = names[names.length - 1]
  18.             }
  19.         }
  20.     }
  21. })

运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstNamevm.lastName 也会相应地被更新。

侦听属性

侦听属性 watch 中可以执行代码逻辑,如函数节流,Ajax 异步获取数据,甚至操作 DOM

1、基本用法

  1. var vm = new Vue({
  2.     el: "#app",
  3.     data: {
  4.         firstName: "Jack",
  5.         lastName: "Ma",
  6.         fullName: "Jack Ma",
  7.         age: "18"
  8.     }
  9.     watch: {
  10.         firstName: function(val) {
  11.             console.log("触发一次,来自侦探器")
  12.             this.fullName = val + " " + this.lastName;
  13.         },
  14.         lastName: function(val) {
  15.             console.log("触发一次,来自侦探器")
  16.             this.fullName = this.firstName + " " + val;
  17.         }
  18.     }
  19. })

2、watch 属性的深度监听和立即调用

使用 watch 来监听数据变化的时候除了常用到 handler 回调,其实其还有两个参数。

deep 为了发现对象内部值的变化,可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

  1. vm.$watch('someObject', callback, {
  2.     deep: true
  3. })
  4. vm.someObject.nestedValue = 123
  5. // callback is fired

immediate 在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调。

  1. vm.$watch('a', callback, {
  2.     immediate: true
  3. })
  4. // 立即以 `a` 的当前值触发回调

总结

computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用;watch 一个对象,键是需要观察的表达式,值是对应回调函数,主要用来监听某些特定数据的变化。

除此之外,有点很重要的区别是:计算属性不能执行异步任务,计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务,就交给侦听属性,watch 也可以检测 computed 属性。

最后 computed 能做的 watch 都能做,反之则不行,能用 computed 的尽量用 computed

时间是一个好东西,记录的是学习的证据

继续阅读
Admin
  • 本文由 发表于 2020年10月22日11:12:16
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
Vue-Router + Webpack 路由懒加载实现 前端开发

Vue-Router + Webpack 路由懒加载实现

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: