Vue3 | methods、computed、watch的进阶解读与案例

凌川江雪

已于 2022-09-10 22:46:27 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue python js javascript java

于 2021-02-19 01:49:57 首次发布

本文链接：https://blog.youkuaiyun.com/aaLiweipeng/article/details/113859820

本文详细探讨了Vue3中methods、computed和watch的使用，包括它们的区别和应用场景。强调了computed的缓存机制和在数据变化时的高效更新，以及methods在函数调用中的作用。推荐在能使用computed时优先选择，因为它更高效且简洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整原文地址见简书https://www.jianshu.com/p/09f55406e5ce

本文内容提要

this指针指的是对应的 Vue实例

【methods】插值表达式中可以使用函数调用返回结果

【computed】计算属性的用法

注意——computed模板和 methods模板其计算属性的区别

【watch】模板的用法

【watch】可以实现类似【computed】的效果

当用computed和methods都可以实现时，
推荐使用computed，因为computed有缓存机制；
当用computed和watch都可以实现时，
也推荐使用computed，因为computed编写开发起来更简洁；

this指针指的是对应的 Vue实例

板块中的this指针(下面以methods板块为例)，指的是Vue实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                heheString: