为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。

我们来看一个例子:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script src="javascript/vue.min.js"></script>

</head>

<body>

<div id="app">

//直接在模板中绑定表达式

<p>{{message.split('').reverse().join('')}}</p>

//运用计算属性

<p>message反转之后的结果:{{reverseMessage}}</p>

</div>

<script>

var vm=new Vue({

el:"#app",

data:{

message:"hello"

},

computed:{

reverseMessage:function(){

return this.message.split('').reverse().join('');

}

}

})

</script>

</body>

</html>

在上面这种情况下,模板不再简单和清晰。在意识到这是反向显示 message 之前,你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候,问题会变得更糟糕。这就是对于任何复杂逻辑,你都应当使用计算属性的原因。

下面我将运用method与computed进行比较:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script src="javascript/vue.min.js"></script>

</head>

<body>

<div id="app">

<p>{{message}}</p>

//直接在模板中绑定表达式

<p>{{message.split('').reverse().join('')}}</p>

//运用计算属性

<p>{{reverseMessage}}</p>

//运用methods方式

<p>{{methodMessage()}}</p>

</div>

<script>

var vm=new Vue({

el:"#app",

data:{

message:"hello"

},

computed:{

reverseMessage:function(){

return this.message.split('').reverse().join('');

}

},

methods:{

methodMessage:function () {

return this.message.split('').reverse().join('');

}

}

})

</script>

</body>

</html>

我在将这二种方式进行了比较。返回的结果是一样的,写但在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用,必须加().

两种方式在缓存上也大有不同,利用computed计算属性是将 reverseMessage与message绑定,只有当message发生变化时才会触发reverseMessage,而methods方式是每次进入页面都要执行该方法,但是在利用实时信息时,比如显示当前进入页面的时间,必须用methods方式。

Vue中method与computed的区别的更多相关文章

  1. Vue中watch与computed的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷.对于运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写. ...

  2. Vue method与computed的区别

    为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重 ...

  3. vue中methods、computed、watch区别

    vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...

  4. vue中assets和static的区别

    Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点:   assets和static两个都是存放静态资源文件.项目中所需要 ...

  5. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  6. vue 中 assets 和 static 的区别

    Vue中的静态资源管理(src下的assets和static文件夹的区别)

  7. vue中计算属性computed方法内传参

    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...

  8. vue中$route 和$router的区别

    在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url);    $router和$route的区别傻傻的分 ...

  9. 简述vue中v-if和v-show的区别

    vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的 v-if v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也就是页面中 ...

随机推荐

  1. strstr()与find()

  2. iphone启动图UI切图尺寸对照保存

  3. golang变量作用域问题-避免使用全局变量

    最近遇到了一个变量作用域的问题,一个比较低级的问题,可能作为一个熟手不应该犯这样的低级错误,但是golang的语法特点可能让你稍微不注意就踩坑,嘿嘿. 变量作用域 全局变量的作用域是整个包,局部变量的 ...

  4. 揭开Java内存管理的面纱

    前言 相对于C.C++这些高性能语言,Java有着让此类程序员羡慕的功能:内存自动管理.似乎这样,Java程序员不用再关心内存,也不用去了解相关知识.但结果真的是这样吗?特别对于我们这种Android ...

  5. records.config文件参数解释

    # Process Records Config File # # <RECORD-TYPE> <NAME> <TYPE> <VALUE (till end ...

  6. eclipse修改默认workspace

    1.进入 Window > Preferences > General > Startup and Shutdown 选中 Prompt for workspace on start ...

  7. web项目,ftl文件中的路径引入问题

    路径问题的引入方式:绝对路径.相对路径 区别如图: =================================================

  8. 【ASP.NET Core】给路由规则命名有何用处

    上一篇中老周给伙伴们介绍了自定义视图搜索路径的方法,本篇咱们扯一下有关 URL 路径规则的名称问题.在扯今天的话题之前,先补充点东东.在上一篇中设置视图搜索路径时用到三个有序参数:{2}{1}{0}, ...

  9. Exchanger

    Exchanger可以在两个线程之间交换数据,只能是2个线程,不支持更多的线程之间互换数据. 当线程A调用Exchange对象的exchange()方法后,他会进入阻塞状态,直到线程B也调用了exch ...

  10. Java对正则表达式的支持(二)

    正则表达式的主要用途: a.在目标字符串中找出匹配正则表达式的部分 b.校验目标字符串是否符合正则表达式,例如校验邮箱地址 c.在目标字符串中替换符合正则表达式的部分为其他的字符串 Scanner类是 ...