一、computed的本质？

computed为什么不像methods一样加小括号使用？

正常使用computed方式

运行结果

至于为什么computed为什么不像methods一样使用小括号调用，是由于computed本身就是一个属性，其本质是computed内部有两个方法（set和get），computed最终的道德的结果是get方法的返回值，而set方法很少使用到，因此简化写法就是上述正常使用computed的格式，其本质写法如下展示。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div id="div1">

         <h2>{{hobbyList}}</h2>

     </div>

 </body>

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

 <script>

     const app = new Vue({

         el: '#div1',

         data: {

             message: "hello vue!"

         },

         computed: {

             hobbyList: {

                 set: function() {

                 },

                 get: function() {

                     return ['baseball', 'football', 'pingpang', 'basketball']

                 }

             }

         },

     });

 </script>

 </html>

computed的本质写法

运行结果

二、computed和methods的区别？

1、methods使用时，一般情况需要加括号，而computed则不需要。

2、methods每次调用时会重新执行函数，而computed在其内部变量不变或其返回值不变的情况下多次调用只会执行一次，后续执行时直接从缓存中获取该computed的结果。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div id="div1">

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

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

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

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

         <p>{{name}}</p>

         <p>{{name}}</p>

         <p>{{name}}</p>

         <p>{{name}}</p>

     </div>

 </body>

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

 <script>

     const app = new Vue({

         el: '#div1',

         data: {

             message: "hello vue!"

         },

         methods: {

             getName() {

                 console.log("methods方法被调用了")

                 return "kelvin"

             }

         },

         computed: {

             name() {

                 console.log("computed计算属性被调用了");

                 return "mary"

             }

         },

     });

 </script>

 </html>

computed存在缓存机制验证

运行结果

 运行结果说明：methods调用几次则方法执行几次，而computed只执行一次。因此推断computed存在缓存机制。

Vue中computed的本质及与methods的区别的更多相关文章

  1. vue中computed和watch的写法，以及区别

    <template> <div class="print"> <div style="color: red"> <p ...

  2. vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分

    vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...

  3. Vue中computed分析

    Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...

  4. Vue中computed和watch的区别

    在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...

  5. vue中computed的作用以及用法

    在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...

  6. vue中的项目目录assets和staitc的区别

    vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文 ...

  7. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  8. Vue中computed，methods 和watch

    Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...

  9. Vue中computed、methods、watch的联系和区别

    computed是计算树形,methods是方法. new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversed ...

随机推荐

  1. ASP.NET Core Blazor Webassembly 之 路由

    web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...

  2. Android Studio自定义签名文件

    在项目多人开发的时候,如果使用到第三方框架,需要keystore的sha1值的时候,则需要共享debug签名才能进行程序调试 可以在gradle文件中配置如下选项,并且把keystore文件放到项目m ...

  3. STM32的8*8点阵屏开发（小项目）

    基础认识 实现效果 项目实现STM32点阵屏的操作,自动更改显示内容和串口控制显示内容 STM32上电后: 1)   程序将进行行和列的刷新 2)   自动递增显示0-9变化 3)   进行矩形由内向 ...

  4. 探究：Adobe Premiere Pro CC 2018 导入SRT字幕显示不全问题

    问题:如果使用PR,大概率会遇到导入SRT格式的字幕文件后,PR里面显示的字幕不完整,字幕丢失的问题. 探究:字幕文件的内容正常,导入PR后字幕出现丢失. 查看字幕文件,并测试,发现如下图,如果出现字 ...

  5. akka-typed(7) - cluster：sharding, 集群分片

    在使用akka-typed的过程中发现有很多地方都简化了不少,变得更方便了,包括:Supervision,只要用Behaviors.supervise()把Behavior包住,很容易就可以实现这个a ...

  6. BUAA_OO_2020_Unit3_总结博客

    BUAA_OO_2020_Unit3_总结 2020年春季学期第十三周,OO第三单元落下帷幕,对这个单元的内容JML有了更深的理解,但也有了一些疑惑,下做总结: 一.JML语言以及工具链 经过课上JM ...

  7. Linux下，如何监控某个进程到底向哪个地址发起了网络调用

    Linux下,如何监控某个进程到底向哪个地址发起了网络调用 有时候,有些应用,比如idea,你发起某个操作时,其底层会去请求网络,获取一些数据. 但是不知道,请求了什么地址.举个例子,在idea中,m ...

  8. Java并发编程的艺术（一、二章） ——学习笔记

    第一章  并发编程的挑战 需要了解的一些概念 转自 https://blog.csdn.net/TzBugs/article/details/80921351 (1) 同步VS异步 同步和异步通常用来 ...

  9. 记一次 CocoaPod 的使用过程

    目前有一个cocos2d creator项目, 接入了微信SDK,  现在需要接入阿里云移动推送. 用到了CocoaPod集成.   于是创建了一个Podfile, (此文件在项目目录中, 和 xxx ...

  10. 设计模式：JDK和Spring中常见的设计模式

    设计模式 总结 类 工厂模式 封装创建过程,只对结果负责 BeanFactory.Calender 单例模式 全局唯一 ApplicationContext.Calender 原型模式 多重影分身之术 ...