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

目录
  • vue计算属性和方法区别
    • 区别
  • vue向计算属性传递参数

vue计算属性和方法区别

当我们实现翻转字符串的业务逻辑时，使用插值表达式打码如下：

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

为了将复杂了业务逻辑便于管理，使得不显得杂乱无章，我们使用计算属性：

<div id="app">
    <div>{{msg}}</div>
        计算属性：<div>{{resverString}}</div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"happy"
            },
            computed:{
                resverString:function(){
                    console.log('computed');
                    return this.msg.split('').reverse().join('');
                }
            }
        })
    </script>

效果如下图：

对比使用methods方法：

	<div id="app">
        <div>{{msg}}</div>
        计算属性：<div>{{resverString}}</div>
        计算属性：<div>{{resverString}}</div>
        方法属性：<div>{{resv()}}</div>
        方法属性：<div>{{resv()}}</div>
    </div>

			computed:{
                resverString:function(){
                    console.log('computed');
                    return this.msg.split('').reverse().join('');
                }
            },
            methods:{
                resv:function(){
                    console.log('methods');
                    return this.msg.split('').reverse().join('');
                }
            }

结果如下图：

如图，控制台的结果说明，在相同的依赖（data中的数据）下，计算属性只会执行一次逻辑，而方法每次调用都会执行，所以：计算属性在一定条件下进行了一定的性能优化。

区别

计算属性是基于依赖进行缓存的，而方法则不缓存。

vue向计算属性传递参数

{{componentVal('input')}}
componentVal () {
 return (val) => {
    return 'el-' + val
  }
}

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

赞 (0)

相关推荐

  • 关闭Vue计算属性自带的缓存功能方法

    使用Vue的小伙伴都会知道,vue的计算属性.这个是这个样子解释的,当某些依赖值发生变化的时候,其自身的值也会发生变化,与之先关的DOM也会发生变化,通常呢,这个计算属性里面都会有两个方法:get和set可以使用. 这里我只分析一下,如何关闭计算属性的缓存,获取最新数据,如下实例: HTML代码 <div id="mess"> <div>{{exapm}}</div> </div> JS代码: var vue2 = new Vue({ e

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

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

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

  • vue中动态参数与计算属性的使用方法

    vue中动态参数与计算属性的使用方法

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

  • 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 计算属性之姓名案例的三种实现方法

    Vue 计算属性之姓名案例的三种实现方法

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

  • Vue计算属性与监视属性实现方法详解

    目录 一.计算属性 1.插值语法实现 2.通过方法实现 3.通过计算属性 二.监视属性 三.深度监视 一.计算属性 在开发中,可以有这样的需求,在属性(date)中,有fistName和lastName两个属性,需要将两个属性拼接起来,这种需求也很简单,有以下实现方式 1.插值语法实现 直接在body中将两个数据拼接 <div id="root"> 姓:<input type="text" v-model="fistName"&

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

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

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

  • vue中计算属性（computed）、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

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

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

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

  • Vue中计算属性computed的示例解读

    计算属性 表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题. computed原理 computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage属性对应 cacheReversedMessage的值是根据其绑定的data中的message来决定的

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

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

  • vue计算属性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 更改计算属性后select选中值不更改的问题

    先上代码: //... <body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <span>{{selected}}</span>

  • Vue中监视属性和计算属性区别解析

    Vue中监视属性和计算属性区别解析

    目录 计算属性 需求 使用watch实现 准备工作 测试 测试 在computed当中书写 总结 计算属性 顾名思义,计算属性就是计算出来的属性,英文名儿computed这里要和data和methods里的东西区分,data里的属性,methods里的函数,你写的都会原封不动放到vm里,但是computed里面的东西写的是对象,最后放到vm里的是这个对象的名,值是get里的返回值. 下面看下Vue中监视属性和计算属性区别. 需求 我们将计算属性的案例使用watch写一遍 需求一揽 两个输入框 下

  • Vue中computed和watch有哪些区别

    计算属性computed: 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 如果computed属性属性值是函数,那么默认会走get方法:函数的返回值就是属性的属性

  • vue中使用TypeScript的方法

    vue中使用TypeScript的方法

    引言 近几年前端对 TypeScript的呼声越来越高,Typescript也成为了前端必备的技能.TypeScript 是 JS类型的超集,并支持了泛型.类型.命名空间.枚举等特性,弥补了 JS 在大型应用开发中的不足. 在单独学习 TypeScript时,你会感觉很多概念还是比较好理解的,但是和一些框架结合使用的话坑还是比较多的,例如使用 React.Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍,需要去查看框架提供的.d.ts的声明文件中一些复杂类型的定义.组件的书写

随机推荐