Vue中method与computed的区别-js教程-PHP中文网

首页

web前端

js教程

Vue中method与computed的区别

php中世界最好的语言

Mar 28, 2018 am 11:48 AM

computed method 区别

这次给大家带来Vue中method与computed的区别，在Vue中使用method与computed的注意事项有哪些，下面就是实战案例，一起来看一下。

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码，但是什么时候用哪个属性，要好好区分一下才能做到正确的运用vue。

computed称为计算属性，顾名思义，计算就要返回一个计算的结果，所以，当我们要处理大量的逻辑，但是最后要取得最后的结果的时候可以用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>
<p id="app">
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<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>
<p id="app">
<p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>
</p>
<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方式。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7518

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

char与wchar_t在C语言中的区别 Apr 03, 2025 pm 03:09 PM

在 C 语言中，char 和 wchar_t 的主要区别在于字符编码：char 使用 ASCII 或扩展 ASCII，wchar_t 使用 Unicode；char 占用 1-2 个字节，wchar_t 占用 2-4 个字节；char 适用于英语文本，wchar_t 适用于多语言文本；char 广泛支持，wchar_t 依赖于编译器和操作系统是否支持 Unicode；char 的字符范围受限，wchar_t 的字符范围更大，并使用专门的函数进行算术运算。

c#多线程和异步的区别 Apr 03, 2025 pm 02:57 PM

多线程和异步的区别在于，多线程同时执行多个线程，而异步在不阻塞当前线程的情况下执行操作。多线程用于计算密集型任务，而异步用于用户交互操作。多线程的优势是提高计算性能，异步的优势是不阻塞 UI 线程。选择多线程还是异步取决于任务性质：计算密集型任务使用多线程，与外部资源交互且需要保持 UI 响应的任务使用异步。

C语言 sum 的作用是什么？ Apr 03, 2025 pm 02:21 PM

C语言中没有内置求和函数，需自行编写。可通过遍历数组并累加元素实现求和：循环版本：使用for循环和数组长度计算求和。指针版本：使用指针指向数组元素，通过自增指针遍历高效求和。动态分配数组版本：动态分配数组并自行管理内存，确保释放已分配内存以防止内存泄漏。

c语言函数的基本要求有哪些 Apr 03, 2025 pm 10:06 PM

C语言函数是代码模块化和程序搭建的基础。它们由声明（函数头）和定义（函数体）组成。C语言默认使用值传递参数，但也可使用地址传递修改外部变量。函数可以有返回值或无返回值，返回值类型必须与声明一致。函数命名应清晰易懂，使用驼峰或下划线命名法。遵循单一职责原则，保持函数简洁性，以提高可维护性和可读性。

char和unsigned char的区别是什么 Apr 03, 2025 pm 03:36 PM

char 和 unsigned char 是存储字符数据的两种数据类型，主要区别在于处理负数和正数的方式：值范围：char 有符号 (-128 到 127)，unsigned char 无符号 (0 到 255)。负数处理：char 可以存储负数，unsigned char 不能。位模式：char 最高位表示符号，unsigned char 无符号位。算术运算：char 和 unsigned char 作为有符号和无符号类型，其算术运算方式不同。兼容性：char 和 unsigned char

H5和小程序与APP的区别 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要区别在于：技术架构：H5基于网页技术，小程序和APP为独立应用程序。体验和功能：H5轻便易用，功能受限；小程序轻量级，交互性好；APP功能强大，体验流畅。兼容性：H5跨平台兼容，小程序和APP受平台限制。开发成本：H5开发成本低，小程序中等，APP最高。适用场景：H5适合信息展示，小程序适合轻量化应用，APP适合复杂功能应用。