一、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. Swagger使用的时候报错：Failed to load API definition

    NuGet添加Swashbuckle.AspNetCore,在Startup.cs添加和启用中间件Swagger public void ConfigureServices(IServiceColle ...

  2. Android拍照相关知识总结

    1.调用系统的照相机程序 Intent intent = newIntent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(inte ...

  3. pytorch入门2.2构建回归模型初体验（开始训练）

    pytorch入门2.x构建回归模型系列: pytorch入门2.0构建回归模型初体验(数据生成) pytorch入门2.1构建回归模型初体验(模型构建) pytorch入门2.2构建回归模型初体验( ...

  4. mysql常见聚合函数

    count():总数量avg():平均数std():标准差sum():求和max():最大值min():最小值 上面的不过多介绍group_concat():分组列值全部展示到一行eg:mysql&g ...

  5. PyQt5 对话框示例

    import sys from PyQt5.QtWidgets import * from PyQt5.QtGui import * class Example(QMainWindow): def _ ...

  6. Calculating a “Row X of Y”

    显示 “Row X of Y,” ,X是当前行,Y是总行数,  那就是 ROW_NUMBER(ORDER BY stor_id) of Count(*) OVER()此处还是以样例数据库 pub 为例 ...

  7. UniRx精讲（二）：独立的 Update &UniRx 的基本语法格式

    独立的 Update 在 UniRx 简介的时候,笔者讲了一种比较麻烦的情况:就是在 MonoBehaviour 的 Update 中掺杂了大量互相无关的逻辑,导致代码非常不容易阅读. 这种情况我们平 ...

  8. cb19a_c++_只适合string类型的操作_提取_追加_替换

    *cb19a_c++_只适合string类型的操作_提取_追加_替换三个substr重载函数-获取一个字符串的一部分六个append重载函数-追加字符十个replace重载函数-替换更换 重载函数越多 ...

  9. demo项目开发（Python+flask+mysql+redis只包含后端接口）

    [demo项目开发需求] 用户信息管理,可以注册.登录.添加用户.删除用户 注册:任何用户可以注册,对用户提交的注册信息进行校验,返回对应的信息,其中: 用户名:必填,唯一 密码:必填,只能6-12位 ...

  10. vue 开发环境的搭建

    一.整个流程: 安装nodejs>>安装vue>>安装vue-cli>>初始化 webpack(生成代码)>>安装依赖>>运行vue程序 二 ...