vue计算属性及函数的选择

2024-10-08 04:07:01

一、计算属性

使用场景

从已有的数据A中计算等到的新的数据B，使用计算属性。

如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。

定义格式

在vue实例中，补充computed配置项

普通写法

{
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return
        }
    }
}

computed是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。

属性名称： 计算属性的名称
属性的值：计算属性的素材函数
- 对需要依赖的数据，进行逻辑上的处理
- 处理完毕后，需要return出去，返回的值就是计算属性的值

使用格式

在两个地方使用：

模板
- 用插值表达式 {{计算属性名}}
- 用其它指令
在实例内
- this.计算属性名

示例 —— 数组求和

<template>
  <div id="app">
    <p>求和:{{ sum1 }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [1,2,3,4]
    }
  },
  computed: {
    sum1(){
      // 对依赖的数据进行处理，且进行return
      return this.arr.reduce((sum, item)=>sum + item, 0)
    }
  }
}
</script>

在模板中使用计算属性，和使用data的方式是一样的。

虽然在计算属性中声明的是函数，但是在模板是使用，当做的数据来使用。不需要加括号。

小结：

什么时间用：需要对数据进行复杂的逻辑加工，产生新的数据时。
定义： 就是一个特殊的配置项computed。其中有多个函数。
使用：计算属性的使用方式与data中的数据项一致；
计算属性-计算：这个值是对原数据进行计算之后得到的新的数据
计算属性-属性：它的使用方法与原数据一样。this.计算属性名,{{计算属性名}}
执行的时机：如果计算属性中依赖的数据项变化时，它会自动调用。

computed有缓存

示例：

<template>
  <div id="app">
    <p>求和:{{ sum1 }}</p>
    <p>求和:{{ sum1 }}</p>
    <p>求和:{{ sum1 }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [1,2,3,4]
    }
  },
  computed: {
    sum1(){
      // 求arr的和，并返回
      // 如果arr变化了，计算属性会重新计算
      console.log('计算属性被调用了')
      return this.arr.reduce((sum, item)=>sum + item, 0)
    }
  }
}
</script>

结果：

从上面的示例中可以看到，计算属性在模板中被调用了三次，但控制台只打印了一次，这是因为计算属性执行前会先从缓存中查找有没有这个数据，如果有就不会执行。
计算属性的执行机制就像我们查字典一样
- 如果要计算的数据在缓存中能找到，就不会再执行函数，而是直接拿取数据。

二、总结

当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：

计算属性
函数

如何选择：

methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。
- 计算属性会做缓存，提高渲染的性能。

到此这篇关于vue计算属性及函数的选择的文章就介绍到这了,更多相关vue计算属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue.js中的计算属性、监视属性与生命周期详解

前言本章节咱们来说一下Vue中两个非常重要的计算属性.监视属性和生命周期,不废话直接上干货计算属性计算属性介绍在模板中可以直接通过插值语法显示一些data中的数据,有些情况下我们需要对数据进行转化或者计算后显示,我们可以使用computed选项来计算,这时有些小伙伴可能就会问,我直接定义函数再调用不就行了,为什么还要整一个计算属性呢?这个问题在下边再做解释,我们先来看一下计算属性怎么用! 入门案例需求将人的姓和名拼接在一起代码 <!DOCTYPE html> <html&g
Vue中的计算属性介绍

目录 1.什么是计算属性 2.计算属性的语法 3.举例 1.什么是计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 例如: <div id="app"> { { message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.而是在插值表达式中直接反转字符串,如果你在多处用到该反转字符串时,这样写就
Vue中computed计算属性和data数据获取方式

目录 computed计算属性和data数据获取解决方法一解决方法二 computed计算属性取对象的值,第一次报错undefined 报错和打印值解决方案 computed计算属性和data数据获取获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"> <h1 class="detailHead">{{ActiveData.tit
Vue中的计算属性与监听属性

目录一.为什么要使用计算属性什么是计算属性二.计算属性和方法的区别 1.区别 2.计算属性使用场景三.修改计算属性的值总结四.监听属性 1.监听普通属性 2.监听属性和计算属性的区别 3.监听复杂对象一.为什么要使用计算属性什么是计算属性计算属性:可以理解为能够在里面写一些计算逻辑的属性.具有如下的作用: 减少模板中的计算逻辑. 数据缓存.当我们的数据没有变化的时候,不会再次执行计算的过程. 依赖固定的数据类型(响应式数据),不能是普通的传入的一个全局数据. 在数据量比较大的时
vue中动态参数与计算属性的使用方法

一,动态参数从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数: <a v-bind:[attributeName]="url"> - 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用.例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:hr
vue计算属性及函数的选择

目录一.计算属性使用场景定义格式普通写法使用格式示例 —— 数组求和 computed有缓存二.总结一.计算属性使用场景从已有的数据A中计算等到的新的数据B,使用计算属性. 如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 定义格式在vue实例中,补充computed配置项普通写法 { data(){}, methods: {} // 声明计算属性 computed: { //属性名字(计算属性名称) //属性
vue计算属性和监听器实例解析

基本实例 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello'
Vue计算属性的学习笔记

本文为大家分享了Vue计算属性的学习笔记,供大家参考,具体内容如下 ①模板内的表达式实际上只用于简单的运算,对于复杂逻辑,使用计算机属性. ②基础例子: <div id = "example"> <p>Original message:"{{message}}"</p> <p>Computed reversed message:"{{reversedMessage}}"</p> <
vue计算属性及使用详解

一.什么是计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理. 二.计算属性的用法在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调
vue计算属性computed的使用方法示例

本文实例讲述了vue计算属性computed的使用方法.分享给大家供大家参考,具体如下: computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码,一定记得return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
vue 计算属性和侦听器的使用小结

1. 计算属性和侦听器 1.1 计算属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"
Vue 计算属性 computed

目录 1.基础例子 2.计算属性缓存 vs 方法 3.计算属性的 setter 前言: 一般情况下属性都是放到data中的,但是有些属性可能是需要经过一些逻辑计算后才能得出来,那么我们可以把这类属性变成计算属性. 比如以下: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message
vue计算属性+vue中class与style绑定(推荐)

vue计算属性在模板中放入大量的逻辑会让模板过重且难以维护计算属性下所有函数可以放到computed中 class与style绑定原始写法 v-bind:class 缩写 :class class绑定的三种形式 style的三种绑定形式属性值为true显示,false不显示第一种绑定方式: 第二种绑定方式: 第三种绑定方式: style修改方式1: 方式2: 方式三: ps:下面通过代码介绍下计算属性计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部
Vue 计算属性之姓名案例的三种实现方法

目录一.姓名案例-插值语法实现二.姓名案例-methods实现三.姓名案例-计算属性实现四.计算属性简写效果: 一.姓名案例-插值语法实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue初识</title> <script type="text/javascript&qu
Vue计算属性与侦听器和过滤器超详细介绍

目录 1. 计算属性 1.1 使用方法 1.2 案例-购物车合计使用计算属性 2. 侦听器 3. 过滤器 1. 计算属性 1.1 使用方法概述: 模板中放入太多的逻辑会让模板过重且难以维护,使用计算属性可以让模板变得简洁易于维护.计算属性是基于它们的响应式依赖进行缓存的,计算属性比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化. 计算属性定义在Vue对象中,通过关键词computed属性对象中定义一个个函数,并返回一个值