一、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. https://www.cnblogs.com/mrchige/p/6409444.html

    https://www.cnblogs.com/mrchige/p/6409444.html http://c.biancheng.net/view/2172.html https://www.cnb ...

  2. linux基础相关命令

    请参照以下文章 shell常用命令:https://www.cnblogs.com/pengtangtang/articles/PengTangTang_linux_base_one.html 通配符 ...

  3. 07.Django-缓存

    目录 缓存 一.如何提高网站并发量? 二.缓存方式 1. 开发调式缓存 2. 内存缓存 3. 文件缓存 4. 数据库缓存 5. Memcache缓存 5.1 使用python-memcached模块 ...

  4. MySQL数据库离线包安装与注册

    本文主要介绍了MySQL数据库的离线安装和将MySQL服务注册为Windows应用服务的主要步骤. 1.下在安装程序包 MySQL Community Server 5.6.15 官方下载地址http ...

  5. 【译】构造和匹配二进制（Efficiency Guide）

    可以通过以下方式有效地构建二进制: my_list_to_binary(List) -> my_list_to_binary(List, <<>>). ​ my_list ...

  6. 【转载】自动化魔方求解器的Bug——选择合适的色彩空间

    目录 1. 准备工作-- 2. RGB颜色空间 3. LAB色彩空间 4. YCrCb色彩空间 5. HSV色彩空间 Color spaces in OpenCV (C++ / Python) 几天前 ...

  7. [转] CISC与RISC

    点击阅读原文      这里就不去管细节,简单来谈一下,ARM和X86之间为什么不太具有可比性的问题.要搞清楚这个问题首先要明白什么是架构,之前也有很多人提到了架构不同,但架构是什么意思?它是一个比较 ...

  8. [转] 理解TCP序列号（Sequence Number）和确认号（Acknowledgment Number）

    点击阅读原译文 原文见:http://packetlife.net/blog/2010/jun/7/understanding-tcp-sequence-acknowledgment-numbers/ ...

  9. AJAX的GET请求、POST请求

    感谢:链接(视频讲解很详细) AJAX(Asynchronous Javascript and XML):异步的JavaScript和XML(不需要刷新网页就可以更新网页数据) XML:百度百科 是一 ...

  10. CSS中link和@import的区别

    1.link属于HTML标签,而@import是CSS提供的 2.页面被加载时link会同时被加载:而@import引用的CSS会等到页面被加载完再加载 3.@import只在IE5以上才能识别,而l ...