Vue中method与computed的区别
为了说明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的区别的更多相关文章
- Vue中watch与computed的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷.对于运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写. ...
- Vue method与computed的区别
为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重 ...
- vue中methods、computed、watch区别
vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...
- vue中assets和static的区别
Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要 ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- vue 中 assets 和 static 的区别
Vue中的静态资源管理(src下的assets和static文件夹的区别)
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- vue中$route 和$router的区别
在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url); $router和$route的区别傻傻的分 ...
- 简述vue中v-if和v-show的区别
vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的 v-if v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也就是页面中 ...
随机推荐
- php中HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR的使用
1.REMOTE_ADDR:浏览当前页面的用户计算机的ip地址2.HTTP_X_FORWARDED_FOR: 浏览当前页面的用户计算机的网关3.HTTP_CLIENT_IP:客户端的ip 在PHP 中 ...
- XML （一）
1 XML概述 XML是指可扩展的标记语言,很类似与HTML.它被设计的宗旨就是描述数据,而非显示数据. XML标签没有被预定义,需要用户自定定义标签. XML技术是W3C组织发布的.目前遵循的规范是 ...
- java 获取ip地址和网络接口
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- matlab文件读写处理实例（二）——textread批量读取文件
问题:对文件夹下所有文件进行批量读取,跳过文件头部分,读取每个文件数据部分的7,8,9列,保存到变量并且输出到文件. 数据: 文件夹11m\
- spring之集合注入
list: <bean id="userAction" class="com.xx.action.UserAction"> <property ...
- canvas将图片转为base64
最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
- 04_VMware虚拟机网络配置
占位占位占位占位占位占位占位占位
- 同一台机器上多个tomcat启动造成的内存溢出问题的解决方法。
加下面这句话就行了,我是WIN10+双tomcat+nginx(本地站点),无压力.在编译器的vm option里面加哦. -server -Xms512m -Xmx1024m -XX:PermSiz ...
- 洛谷 [P2590] 树的统计
迷之TLE #include <iostream> #include <cstdio> #include <cstring> #include <algori ...
- BZOJ 2005: [Noi2010]能量采集 [莫比乌斯反演]
题意:\((0,0)\)到\((x,y),\ x \le n, y \le m\)连线上的整点数\(*2-1\)的和 \((0,0)\)到\((a,b)\)的整点数就是\(gcd(a,b)\) 因为. ...