Vue method与computed的区别

为了说明method与computed的区别，在此我想先来看看computed属性在vue官网中的说法：

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。

说到这里有没有想到点什么？有没有立马想起html与css样式分离的情况呢。这种写法为我们后期的升级维护留下了空间。

下面我们来看看一个例子：

<!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>

转载于:https://www.cnblogs.com/catbrother/p/9400841.html

Vue method与computed的区别相关推荐

vue计算属性computed和侦听属性watch的用法和区别
计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用.注意:计算属性里面必须要ruturn,否则无法拿到结果.计算属性 ...
watch跟computed的区别
大家好,我是大帅子,今天给大家讲一下watch跟computed的区别,下面我们直接开始吧功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调. 是否调用缓存:com ...
vue Watcher分类 computed watch
1.Watcher构造函数源码部分代码 if (options) {this.deep = !!options.deepthis.user = !!options.userthis.lazy = !! ...
[vue] vue和angular有什么区别呢？
[vue] vue和angular有什么区别呢? Vue.js - 多样化的 JavaScript 框架作为一个跨平台的,高度进步的框架,Vue 成为了许多需要创建单页应用程序的开发人员的首选.在用 ...
vue使用computed有参数_【Vue原理】Computed - 源码版
专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本2.5.17 今天要记录 computed 的源码,有时候想,理 ...
Vue中data和computed的区别
First data 和 computed都是响应式的,先看看官方的说法: Data: Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data ...
Vue.js中 computed 和 methods 的区别
官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...
面试题： Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...

Vue method与computed的区别

Vue method与computed的区别相关推荐

最新文章

热门文章