一、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. 使用macaca抓页面元素，执行命令后报安装失败处理Error: Command failed: ……pm install -r "/data/local/tmp/com.macaca.android.testing"

    最近换了小米手机做自动化测试,执行命令的时候报安装失败错误,错误如下 解决:设置小米允许USB安装就好了 pm install -r "/data/local/tmp/com.macaca. ...

  2. .NET Core SDKs installed: No SDKs were found.

    问题描述 今天vs2019创建了asp.net core项目,发现无法加载项目.尝试打开之前的.net core项目项目,同样无法加载项目. 打开cmd,输入 dotnet ,提示 .NET Core ...

  3. ASP.NET Core通过Nacos SDK读取阿里云ACM

    背景 前段时间,cranelee 在Github上给老黄提了个issues, 问到了如何用Nacos的SDK访问阿里云ACM. https://github.com/catcherwong/nacos ...

  4. [Web][学习随笔]Session&cookie

    Session 从登录建立连接到退出就是一次会话.Session数据就会在会话期间用户存在服务器端的数据.这样,当用户在Web页之间跳转时,存储在Session对象中的变量将不会丢失,而是在整个用户会 ...

  5. [PyQt5]文件对话框QFileDialog的使用

    概述选取文件夹 QFileDialog.getExistingDirectory()选择文件 QFileDialog.getOpenFileName()选择多个文件 QFileDialog.getOp ...

  6. VS Code项目中共享自定义的代码片段方案

    VS Code项目中共享自定义的代码片段方案 一.问题背景 项目中注释风格不统一,如何统一注释风格 一些第三方组件库名称太长,每次使用都需要找文档,然后复制粘贴 部分组件库有自己的Snippets插件 ...

  7. （一）TestNG-常用注解参数

    原文:https://www.cnblogs.com/starstarstar/p/11305733.html 注解@Test标签 package com.course.testng; import ...

  8. 通信中的错误代码 (repost from https://blog.csdn.net/zzhuan_1/article/details/80066716)

    • 100 - 继续.• 101 - 切换协议.• 110 重新启动标记答复.• 120 服务已就绪,在 nnn 分钟后开始.• 125 数据连接已打开,正在开始传输.• 150 文件状态正常,准备打 ...

  9. qemu-guest-agent详解

    qemu guest agent简称qga, 是运行在虚拟机内部的一个守护程序(qemu-guest-agent.service),他可以管理应用程序,执行宿主机发出的命令. QEMU为宿主机和虚拟机 ...

  10. 第一章、认识Shiro

    Shiro简介 Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Securi ...