一、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. RocketMQ系列（二）环境搭建

    RocketMQ的基本概念在上一篇中给大家介绍了,这一节将给大家介绍环境搭建.RocketMQ中最基础的就是NameServer,我们先来看看它是怎么搭建的. NameServer RocketMQ要 ...

  2. 拉勾网 + selenium

    目录 方式一 selenium 方式二普通方法 方式一 selenium from selenium import webdriver import time from selenium.webdri ...

  3. 如何从Debian 9 Stretch升级到Debian10 Buster

    Let's first fully upgrade our current Debian Stretch system: # apt-get update # apt-get upgrade # ap ...

  4. 如何通过PR给视频添加字幕？

    第一步:将视频通过导出音频格式MP3 第二步:将音频MP3导入网易见外平台 第三步:在网易见外平台创建项目,进行语音转写如下所示: 第四步:将从网易见外平台到处的srt字母文件,打开后进行编码为utf ...

  5. 别人开发三年30k，而我才12K，看完他面试前狂刷的面试题，我惊了

    朋友做Java开发三年多的时间了,在老东家勤勤恳恳工作了三年多,工资也就是从刚开始的8K涨到了12K,天天给我吐槽他的工资低.2019年中下旬开始就一直在各种地方找资源,刷面试题,想要“骑驴找马”,所 ...

  6. 跟着视频学python，Day1

    python介绍 发展史 安装 Hello World程序 变量 用户输入 模块初识 数据类型初识 条件表达式if...elif...else 循环表达式while 循环表达式for python介绍 ...

  7. 【转载】图解NumPy

    目录 1. 读写文件 2. 内建向量/矩阵 3. 切片操作 4. 聚合函数 4.1. 向量 4.2. 矩阵 5. 矩阵的转置和重构 6. 常用操作API 7. 应用实例 7.1. 生成向量.矩阵 7. ...

  8. Mini Linux的制作过程

  9. flex弹性模型

    flex模型是w3c最新提出的一种盒子模型,很好的解决了普通模型的一些弊端. 一.比较两种盒子模型: demo: 给div添加边框,观察他们的区别 <body> <div class ...

  10. 基于session对象实现简单的购物车应用

    大部分购物网站都会实现购物车的功能,基于session对象的购物车应用可以实现一个用户会话有效期内,用户所选多个商品的存储. 为了实现这样的功能需要编写三个JSP页面,分别是login.jsp.mai ...