Vue 2.0学习笔记之Vue中的computed属性

Vue中的 computed 属性称为 计算属性 。在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算。也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护。咱们先来看一个示例:

<div id="app">
  <h1>{{ message.split('').reverse().join('') }}</h1>
</div>

在这个示例中,模板不再简单和清晰。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

这就是对于任何复杂逻辑,你都应当使用 计算属性 的原因。接下来咱们一起来学习Vue中的计算属性。

计算属性可用于快速计算视图( View )中显示的属性。这些计算将被缓存,并且只在需要时更新。

在Vue中有多种方法为视图设置值:

  • 使用指令直接将数据值绑定到视图
  • 使用简单的表达式对内容进行简单的转换
  • 使用过滤器对内容进行简单的转换

除此之外,我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

计算属性

计算属性允许我们对指定的视图,复杂的值计算。这些值将绑定到依赖项值,只在需要时更新。

例如,我们可以在数据模型中有一个 results 数组:

data () {
  return {
    results: [
      {
        name: 'English',
        marks: 70
      },
      {
        name: 'Math',
        marks: 80
      },
      {
        name: 'History',
        marks: 90
      }
    ]
  }
}

假设我们想要查看所有主题的总数。我们不能使用 filters 或 expressions 来完成这个任务。

  • filters :用于简单的数据格式,在应用程序的多个位置都需要它
  • expressions :不允许使用流操作或其他复杂的逻辑。他们应该保持简单

这个时候,计算属性就可以派上用场。我们可以向模型中添加一个计算值,如下:

computed: {
  totalMarks: function () {
    let total = 0
    let me = this
    for (let i = 0; i < me.results.length; i++) {
      total += parseInt(me.results[i].marks)
    }
    return total
  }
}

totalMarks 计算属笥使用数组 resultes 的 marks 计算出总值。它只是循环遍历值并返回子总数。

然后,我们可以在视图中显示计算值:

<div id="app">
  <div v-for="subject in results">
    <input v-model="subject.marks">
    <span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
  </div>
  <div>
    Total marks are: {{ totalMarks }}
  </div>
</div>

效果如下:

计算属性 vs 方法

我们可以使用Vue中的 method 计算出学科的总分,最终得到的总数结果是相同的。

在上例的基础上,我们把 computed 区块中的 totalMarks 函数整体移到 methods 中。同时在模板中将 {{ totalMarks }} 替换成 {{ totalMarks() }} 。 你最终看到的结果是一样的,如下所示:

let app = new Vue({
 el: '#app',
 data () {
  return {
   results: [
    {
     name: '英语',
     marks: 70
    },
    {
     name: '数学',
     marks: 80
    },
    {
     name: '历史',
     marks: 90
    }
   ]
  }
 },
 methods: {
  totalMarks: function () {
   let total = 0
   let me = this
   for (let i = 0; i < me.results.length; i++) {
    total += parseInt(me.results[i].marks)
   }
   return total
  }
 }
})

虽然这两种方式输出的结果是相同的,但是性能将遭受毁灭性的打击。使用这种方法, totalMarks() 方法在每次页面渲染时都被执行一次(例如,使用每一个 change )。

如果我们有一个计算属性,那么Vue会记住计算的属性所依赖的值(在我们这个示例中,那就是 results )。通过这样做,Vue只有在依赖变化时才可以计算值。否则,将返回以前缓存的值。这也意味着 只要 results 还没有发生改变,多次访问 totalMarks 计算属性会立即返回之前的计算结果,而不必再次执行函数。

上面两个示例也说明,在Vue中 计算属性是基于它们的依赖进行缓存的,而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。

这也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下,每当触发重新渲染时,方法的调用方式将总是再次执行函数。因此,函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。

那么我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A ,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter !如果你不希望有缓存,请用方法来替代。

计算属性的 setter

计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

效果如下:

你在输入框中输入一个 fullName ,然后点击 set 按钮,可以看到对应的效果。你现在再运行 app.fullName="Airen liao" 时,计算属性的 setter 会被调用, app.firstName 和 app.lastName 也相应地会被更新。如下图所示:

观察者

虽然计算属性在大多数情况下更合适,但有时候也需要一个自定义的 watcher 。这是为什么Vue通过 watch 选项提供一个更通用的方法,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

Vue确实提供了一种更通用的方式来观察和响应Vue实例上的数据变动: watch 属性 。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch 。然而,通常更好的想法是使用计算属性而不是命令式的 watch 回调。比如下面的示例:

<div id="app">
  {{ fullName }}
</div>

let app = new Vue({
  el: '#app',
  data () {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代码是命令式的和重复的。将它与计算属性的版本进行比较:

let app = new Vue({
  el: '#app',
  data () {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

在Vue中使用异步计算属性

Vue中的计算属性非常好。它们允许你执行复杂的操作或数据格式,同时最大限度地执行依赖项计算的性能,只在依赖更改时更新视图。但遗憾的是,它们完全是同步的。

值得庆幸的是,有一个插件。使用vue-async-computed包可以通地将一个 promise 的值绑定到组件属性来创建和使用组件中的异步计算属性。

我们可以在项目的根目录下通过 yarn 或 npm 来安装 vue-async-computed 插件:

# Yarn
$ yarn add vue-async-computed
# NPM
$ npm i vue-async-computed --save

接下来在你的项目中开启这个插件:

// main.js
import Vue from 'vue';
import AsyncComputed from 'vue-async-computed'
import App from 'App.vue';

Vue.use(AsyncComputed);

new Vue({
  el: '#app',
  render: h => h(App)
});

如果你和我一样,对Vue的构建工具不是很熟悉的话,我建议你使用Vue官方提供的构建工具 Vue CLI 。默认情况,它提供了五种模板,你可以根据自己喜欢的方式选择自己需要的模板即可。

确认在项目中引用 vue-async-computed 之后,咱们就可以开始使用这个插件了。使用如何使用这个插件之前,先来简单的了解一些概念。

在Vue中标准计算属性和异步属性之间有一些区别:

  • 异步属性不能有 setter
  • 直到 promise 的 resolve 为止,除非 default 被设置,否则该值为 null

在大多数情况下,你可以将它们视为返回 promise 的计算属性。

<!-- MyComponent.vue -->
<template>
  <!-- 在一两秒后 myResolvedValue将变成"*Fancy* Resolved Value" -->
  <h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template>

<script>
  export default {
    asyncComputed: {
      myResolvedValue () {
        return new Promise((resolve, reject) => {
          setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
        })
      }
    }
  }
</script>

使用ES7 / ES2016的 async / await ,这将变得更简单:

<!-- MyComponent.vue -->
<template>
  <!-- 在一两秒后 myResolvedValue将变成"*Fancy* Resolved Value" -->
  <h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template>

<script>
  function fancinessComesLater () {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
    })
  }

  export default {
    asyncComputed: {
      async myResolvedValue() {
        return await fancinessComesLater()
      }
    }
  }
</script>

有关于vue-async-computed更详细的使用和介绍,可以阅读其 官网提供的相关介绍。

总结

今天主要学习了Vue中的计算属性。在Vue中的计算属性可以让我们很好的监听多个数据或者一个数据来维护返回一个状态值,只要其中一个或多个数据发生变化,则会重新计算整个函数体,重新皇家马德里回状态值,从而更新对应的视图(View)。其次,计算属性具有缓存,相比Vue中的方法而言,性能更佳。但Vue中的计算属性都是同步的,如果需要异步我们得依赖于vue-async-computed

由于自己是Vue的初学者,对Vue的计算属性也只是停留在表面层上的理解,如果从深层面上看,还是会存在一定问题。希望各咱大婶能指正或提供自己的经验。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • vue学习之mintui picker选择器实现省市二级联动示例

    本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下: Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:https://mint-ui.github.io/docs/#/zh-cn2/popup Picker选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/picker Datetime picker日期选择器介绍:https://

  • 浅谈vue路径优化之resolve

    通过vue-cli来创建vue+webpack的项目时,已经有很多都配置好了,但是路径方面为了方便开发,还可以优化. 1. resolve.extensions 在webpack.base.conf.js中,我们可以看到resolve配置,其中的extengsions是一个数组,如下所示: extensions: ['.js', '.vue', '.json'], 通过这样的配置,我们在组件中过着路由中应用组件时,就可以更为方便的应用,比如: import Hello from '@compon

  • Vue中之nextTick函数源码分析详解

    1. 什么是Vue.nextTick()? 官方文档解释如下: 在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2. 为什么要使用nextTick? <!DOCTYPE html> <html> <head> <title>演示Vue</title> <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"&

  • Vue 2.0入门基础知识之内部指令详解

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-

  • vue mintui-Loadmore结合实现下拉刷新和上拉加载示例

    mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里只用了Loadmore功能实现移动端的上拉分页刷新,下拉加载数据,废话不说上代码. <template> <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}"> <v-loadmore :top-method="loadTop" :bott

  • 如何在ASP.NET Core应用程序运行Vue并且部署在IIS上详解

    前言 从.NET Core 1.0开始我们就将其应用到项目中,但是呢我对ASP.NET Core一些原理也还未开始研究,仅限于会用,不过园子中已有大量文章存在,借着有点空余时间,我们来讲讲如何利用ASP.NET Core结合Vue在IIS上运行. ASP.NET Core结合Vue部署于IIS 关于安装Vue和Webpack则不再叙述,我们直接来创建ASP.NET Core应用程序或者通过dotnet new mvc创建ASP.NET Core应用程序 接下来在上述应用程序下通过如下命令创建Vu

  • vue中axios处理http发送请求的示例(Post和get)

    本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip

  • Vue 2.0学习笔记之Vue中的computed属性

    Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}

  • Vue 2.0学习笔记之使用$refs访问Vue中的DOM

    通过前面对Vue的学习,到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法.首先要了解的是$refs属性.但是在深入到JavaScript部分之前,我们先看看模板. <div id="app"> <h1>{{ message }}</h1> <button @click="clickedButton">点击偶</button> </div> let app = new Vue({ e

  • 从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解

    本文实例讲述了从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记.分享给大家供大家参考,具体如下: 用tp3.2.3做了不少项目,但是毕竟要与时代接轨,学习一些新的框架,比如tp5 以下记录一些学习中遇到的问题及解决办法,还有tp3.2和tp5.0的一些区别,适合给用过tp3没用过tp5的童鞋做个参考. 随着学习不断更新...... +++++++++++++++++++++++分割线总是要有的+++++++++++++++++++++++ 首先到tp官网下载了一个最新的Think

  • ng2学习笔记之bootstrap中的component使用教程

     前序: 现在angular2已经除了集成的angular-cli,建议大家可以基于这个来快速开发ng2的项目,不用自己再搭建环境: 相关内容请前往:https://angular.cn/docs/ts/latest/cli-quickstart.html 正文: 以图片轮播组件carousel为例: 首先安装好ng2-bootstrap,bootstrap npm install ng2-bootstrap bootstrap --save 在需要用到的模块中导入 import { Carou

  • Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解

    本文实例讲述了Python GUI编程学习笔记之tkinter中messagebox.filedialog控件用法.分享给大家供大家参考,具体如下: 相关内容: messagebox 介绍 使用 filedialog 介绍 使用 首发时间:2018-03-04 22:18 messagebox: 介绍:messagebox是tkinter中的消息框.对话框 使用: 导入模块:import tkinter.messagebox 选择消息框的模式: 提示消息框:[返回"ok"] tkint

  • 学习笔记编写vue的第一个程序

    目录 1.编写一个html,第一个vue程序 注意视图模板和数据 判断循环 事件 787原则 el属性 data属性 template属性 methods属性 render属性 computed属性 watch属性 这里使用官方文档的cdn <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 1.编写一个html,第一个vue程序 <!DOCTYPE html>

  • Vue中的computed属性详解

    目录 插值表达式 methods computed 总结 今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签,span标签中的内容为两个输入框中的值,span标签中的内容随着输入框中的内容变化而变化 插值表达式 我们先用插值表达式的方法来实现这一效果 <body> <div id="app"> 姓: <input type="text&

  • jQuery学习笔记[1] jQuery中的DOM操作

    DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML

  • vue学习笔记之Vue中css动画原理简单示例

    本文实例讲述了Vue中css动画原理.分享给大家供大家参考,具体如下: 当transition包裹了一个元素之后,vue会自动分析元素的css样式,构建动画流程. so,我们需要定义style. vue中的css动画,其实就是某一个时间点,给元素再增加了一个css样式体现的. v-if.v-show.动态组件 都可以实现过渡效果. 如果没有给transition定义name,vue中默认是.v-enter..v-leave-to. <!DOCTYPE html> <html lang=&

  • JavaScript的MVVM库Vue.js入门学习笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写

随机推荐

其他