vue计算属性computed方法内传参方式

目录
  • vue计算属性computed方法内传参
  • 计算属性computed与method的区别
    • 什么是计算属性?
    • computed实例
    • computed与method的区别
    • 关于传参问题

vue计算属性computed方法内传参

遇到头疼的vue计算属性传参问题

经过各种资料查找,亲测有效

index.vue
<van-circle
      v-model="Ratedata[index].currentRate"
         color="#2462E8"
         fill="#fff"
         layer-color="#E6E6E6"
         :rate="Ratedata[index].rate"
         :text="text(index)"
         :speed="60"
         :clockwise="true"
         :stroke-width="40"
 />

computed中text方法传递index,利用了闭包传值

computed: {
          text() {
              return function (index) {
                  return this.Ratedata[index].currentRate.toFixed(0) + '%';
              }
          }
        },

计算属性computed与method的区别

目前工作中,很多公司都把vue作为自己的前端框架,vue的开发者和研究者也越来越多;不知道有多少人在研究使用vue的时候,对computed和methods到底有什么区别都不是特别明白。因为我们发现,想要实现一个需求,我们使用两种方式中的任何一个,基本上都可以实现,那么我们平时应该用什么更好呢?

什么是计算属性?

提到计算属性,就不得不先提一下Vue中的另一个内容,它就是插值表达式。话不多说,先上一个案例,来见识一下何为插值表达式:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{msg}}</p>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        msg:"vue的绑定语法,学名叫插值语法",
      }
    })
  </script>
</body>
</html>

运行结果:

上面这个案例就是一个Vue插值表达式的实例,通过这个例子,我们不难看出,插值表达式的语法相当简洁,使用起来也很方便。但是也不免暴露出它的一些缺点,最典型的就是无法进行复杂逻辑运算。所以,Vue才会自带计算属性的功能。

话说到这里,大家应该也就了解了,计算属性的本质就是辅助插值表达式来进行复杂逻辑运算的

computed实例

下面,我们通过一段代码来具体看一下Vue中计算属性的实际应用:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{msg}}</div>
      <div>{{reverseString}}</div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "大家好,我是儒雅的烤地瓜,请多多指教",
        },
        methods: {},
        computed: {
          // 也可以使用对象方法的简写:reverseString(){...}
          reverseString: function () {
            return this.msg.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

运行结果:

上面这个案例就是一个computed的实例演示,我们通过代码不难看出:第一个p标记中的插值表达式显示的是原文,而第二个p标记中,显示的则是经过一系列API处理之后的文本内容。

其中,所有的API操作都放在了computed中的reverseString方法中来实现,而最终插值表达式,只是将computed中处理完毕的属性绑定给自己即可。这也从另一个侧面证实了computed只负责进行复杂逻辑运算的特点

computed与method的区别

在Vue中,有computed和methods两个模块,且这两个模块都可以进行方法的编写。那么问题来了,二者之间到底有何区别?

首先,计算属性是基于它们的依赖进行缓存的,只有在依赖发生改变的时候,它们才会重新计算,否则,它们是不变的。换句话说,就是每次访问计算属性时,如果依赖没有发生改变,它们可以立即返回结果,而不需要进行复杂的逻辑运算。而methods中的方法,只要被触发,被调用的方法就会立即执行对应函数,重新进行渲染。

其次,计算属性是具有缓存性质的,而methods中的方法,则不具备缓存的能力,下面通过一个代码片段来进行演示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 原始属性输出的结果 -->
      <p>{{msg}}</p>
      <!-- methodDome方法输出的结果 -->
      <p>{{methodDome()}}</p>
      <!-- 计算属性输出的结果 -->
      <p>{{computedDome}}</p>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue"
        },
        methods: {
          // 也可以使用对象方法的简写:methodDome(){...}
          methodDome:function(){
            return this.msg.split(' ').reverse().join("===");
          }
        },
        computed: {
          // 也可以使用对象方法的简写:computedDome(){...}
          computedDome:function(){
            return this.msg.split(' ').reverse().join("===");
          }
        },
      });
    </script>
  </body>
</html>

运行结果:

通过上面这个案例,我们可以看出,computed和methods在输出的结果上是一致的,只不过在计算结果这个过程中,有所不同。一个是利用依赖关系进行缓存,只要依赖不变,值就不变;一个是被调用,重新执行函数。 

再举一个类似例子,如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{reverseString}}</div>
      <div>{{reverseMessage()}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
      /* 计算属性与方法的区别:计算属性是基于依赖进行缓存的,而方法不缓存 */
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Nihao",
          num: 100,
        },
        computed: {
          reverseString: function () {
            console.log("computed");
            // return this.msg.split('').reverse().join('');
            var total = 0;
            for (var i = 0; i <= this.num; i++) {
              total += i;
            }
            return total;
          },
        },
        methods: {
          reverseMessage: function () {
            console.log("methods");
            return this.msg.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

运行结果: 

关于传参问题

用过methods的同学一定知道,methods中定义的所有方法都是可以进行参数传递的,但是computed中的方法可以进行参数传递吗?

其实,我们如果仔细看一下Vue的官方文档,就会发现,官方文档说明中,并不支持的在computed中进行传参操作。那么问题来了,假如现在就想在computed中进行传参操作该怎么做呢?

其实也很简单,在JavaScript语言中,我们提到过闭包这种设计,它的主要作用,不就是用来访问其他函数内部的变量,然后返回操作结果。所以,我们可以利用闭包来实现。

:data="closure(item,itemName,blablaParams)"

computed: {
   closure(){
      return function(a,b,c){
        // do something
        return data
      }
    }
}

总结:通过上面概述我们不难发现,Vue的computed主要是用来进行组件复杂逻辑运算的,辅助插值表达式来简化结构性代码,让开发人员更专注与数据层的操作。

同时,对于一些运算复杂,且依赖变化较小的功能块,也可以从methods中移到computed中,来提高代码的运行速度,在方法传参方面,可以利用JavaScript的闭包设计来完成传参。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue computed计算属性详细讲解

    目录 一.计算属性computed 1.1.什么是计算属性computed 1.2.复杂数据的处理-computed 1.3.计算属性的缓存 1.4.计算属性computed的setter和getter 一.计算属性computed 1.1.什么是计算属性computed computed 是基于它的依赖缓存,只有在它的相关依赖发生改变时才会进行更新.官方文档是这样说的:对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性 1.2.复杂数据的处理-computed 拼接字符串.分数是否及格.m

  • Vue3 计算属性computed的实现原理

    目录 computed 的函数签名 computed 的实现 ComputedRefImpl 类 总结 版本:3.2.31 computed 的函数签名 // packages/reactivity/src/computed.ts // 只读的 export function computed<T>( getter: ComputedGetter<T>, debugOptions?: DebuggerOptions ): ComputedRef<T> // 可写的 ex

  • Vue3 computed初始化获取设置值实现示例

    目录 computed 用法 computed 实现 computed 初始化 computed 获取值的实现 值的展示 缓存功能 computed 设置值实现 computed 用法 本文给大家带来的是vue3 中 computed API的实现. 大家看过vue3的官网,应该都知道,在vue3 的组合式API中,computed这个功能与以往的有所不同了. 以往vue2 的 computed 用法: export default { components: { }, computed: {

  • Vue Computed底层原理深入探究

    今天面了家小公司,上来直接问 computed 底层原理,面试官是这样问的,data 中定义了 a 和 b 变量.computed 里面定义了 c 属性,c 的结果依赖与 a 和 b,模板中使用了变量 c.假设改变了 a,请问底层是如何收集依赖,如何触发更新的? <div>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{ c }}</div> data(){ return { a: 'foo', b: 'bar' } }

  • vue中的computed 和 vm.$data 原理解析

    目录 官方一个最简单的例子如下 先看看 initData 这条线 我们具体看看defineReactive的源代码 在初始化computed时,有2个地方需要去关注 我们看看Watcher的构造函数 使用vuex中store中的数据,基本上离不开vue中一个常用的属性computed. 官方一个最简单的例子如下 var vm = new Vue({   el: '#example',   data: {     message: 'Hello'   },   computed: {     //

  • Vue 中的 computed 和 watch 的区别详解

    目录 computed 注意 应用场景 watch 总结 computed computed 看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取 computed 的值时才会重新调用对应的 getter 来计算. 1)下面是一个比较经典简单的案例 <template> <div class="hello"> {{ful

  • 关于vue中计算属性computed的详细讲解

    目录 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 附:计算属性的 getter 与 setter 总结 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新 2.用法 一般情况下,computed默认使用的是getter属性 3.computed的响应式依赖(缓存) 1. computed的每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新.下面代码中,

  • vue计算属性computed方法内传参方式

    目录 vue计算属性computed方法内传参 计算属性computed与method的区别 什么是计算属性? computed实例 computed与method的区别 关于传参问题 vue计算属性computed方法内传参 遇到头疼的vue计算属性传参问题 经过各种资料查找,亲测有效 index.vue <van-circle       v-model="Ratedata[index].currentRate"          color="#2462E8&qu

  • Vue + Axios 请求接口方法与传参方式详解

    目录 一.Get请求: 二.Post请求: 三.拓展补充 使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法. 一.Get请求: Get请求比较简单,通常就是将参数拼接到url中 用? &连接或者用下面这种方式: this.axios.get(this.getWxQyUserInfoUrl, { params: { agentid: this.doLoginParams.agentid, code: this

  • 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 计算属性 computed

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

  • 详解vue 计算属性与方法跟侦听器区别(面试考点)

    计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于任何复杂逻辑

  • vue项目中form data形式传参方式

    目录 vue中form data形式传参 vue文件提交 FormData方式 前驱知识 FormDate FormData的使用 URL 实操 vue中form data形式传参 vue项目中form data形式传参,需要在headers中添加如下代码 headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } 接口请求如下: export function subFaq (params) {

  • vue计算属性computed、事件、监听器watch的使用讲解

    一.计算属性(computed) <template> <div class="box"> <h1>计算属性</h1> <hr> <!-- 直接渲染得到数据 --> <p><input type="text" v-model="message"></p> <!-- 对data的数据进行简单的操作 这样有一个不好的地方就是后期对页面数据

  • vue中计算属性computed理解说明包括vue侦听器,缓存与computed的区别

    一.计算属性(computed) 1.vue computed 说明 当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护 computed主要的作用: 分离逻辑(模板和数据分离) 缓存值 双向绑定(getter,setter) 2.语法格式 格式 computed:{ [key:

  • vue中计算属性和方法的区别及说明

    目录 vue计算属性和方法区别 区别 vue向计算属性传递参数 vue计算属性和方法区别 当我们实现翻转字符串的业务逻辑时,使用插值表达式打码如下: <div id="app"> <div>{{msg}}</div> <div>{{msg.split('').reverse().join('')}}</div> </div> 为了将复杂了业务逻辑便于管理,使得不显得杂乱无章,我们使用计算属性: <div id

随机推荐