为了说明method与computed的区别，在此我想先来看看computed属性在vue官网中的说法：

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。
  • 1
  • 2

说到这里有没有想到点什么？有没有立马想起html与css样式分离的情况呢。这种写法为我们后期的升级维护留下了空间。

下面我们来看看一个例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

    <div id="app">

        //直接在模板中绑定表达式

        <p>{{message.split('').reverse().join('')}}</p>

        //运用计算属性

        <p>message反转之后的结果:{{reverseMessage}}</p>

    </div>

    <script>

        var vm=new Vue({

            el:"#app",

            data:{

                message:"hello"

            },

            computed:{

                reverseMessage:function(){

                    return this.message.split('').reverse().join('');

                }

            }

        })

    </script>

</body>

</html>

我在此将三种方式进行了比较。返回的结果是一样的，写但在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加().

两种方式在缓存上也大有不同，利用computed计算属性是将 reverseMessage与message绑定，只有当message发生变化时才会触发reverseMessage，而methods方式是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式

Vue method与computed的区别的更多相关文章

  1. Vue中method与computed的区别

    为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且 ...

  2. Vue methods,watch,computed的区别

    1. computed(计算属性) 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算.注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的. eg: < ...

  3. [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别

    一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...

  4. vue第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别 （常见效果） #课程目标

    第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别 (常见效果) #课程目标 精通 v-if v-else v-else-if 的使用 精通 v-show  ...

  5. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  6. vue、React Nactive的区别（转载）

    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...

  7. scala之method和function的区别

    在我没有学习scala的时候,主要用java和python做日常工作开发,印象中,没有特别的刻意的去区分method和function的区别,这个关系,正如我们日常生活中,没有刻意的去区分质量和重量. ...

  8. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  9. vue Watcher分类 computed watch

    1.Watcher构造函数源码部分代码 if (options) { this.deep = !!options.deep this.user = !!options.user this.lazy = ...

随机推荐

  1. 使用 Tye 辅助开发 dotnet 应用程序

    newbe.pro 已经给我们写了系列文章介绍Tye 辅助开发k8s 应用: 使用 Tye 辅助开发 k8s 应用竟如此简单(一) 使用 Tye 辅助开发 k8s 应用竟如此简单(二) 使用 Tye ...

  2. iPhone去除input默认样式

    /*<!---->去掉苹果短的样式*/ input[type="button"], input[type="submit"], input[type ...

  3. C#类中的字段、属性和方法

    C#类中的字段.属性和方法 刚开始学C#,对于类中的字段.属性和方法很难分清,写下这份笔记,帮助理解 字段:与类相关的变量 声明方法与声明变量类似,可在前面添加访问修饰符.static关键字等: 属性 ...

  4. SpringCloud-服务与注册

    SpringCloud- Eureka服务注册与发现 1.概述 springcloud是一个非常优秀的微服务框架,要管理众多的服务,就需要对这些服务进行治理,管理每个服务与每个服务之间的依赖关系,可以 ...

  5. 测试平台系列(5) 引入Ant Design Pro

    引入Ant Design Pro 回顾 还是继续回顾下之前的作业, 返回的中文变成了ascii字符,不要紧,我们光荣地百度一哈. 随便点进去看看,都可以找到正确答案: 可以看到,我们需要修改confi ...

  6. CMU数据库（15-445）Lab3- QUERY EXECUTION

    Lab3 - QUERY EXECUTION 实验三是添加对在数据库系统中执行查询的支持.您将实现负责获取查询计划节点并执行它们的executor.您将创建执行下列操作的executor Access ...

  7. 滑动窗口解决最小子串问题 leetcode3. Longest Substring Without Repeating Characters

    问题描述: Given a string, find the length of the longest substring without repeating characters. Example ...

  8. IPFS挖矿必须要托管吗？

    IPFS 本质上只是一个人人使用的协议,而 Filecoin 是 IPFS 的激励层,大家平时说的 IPFS 挖矿,其实就是挖 Filecoin.而提到IPFS 就不得不说到矿机托管的问题. 点击了解 ...

  9. [2020年10月28日普级组]1405.小B浇花

    区 间 和 的 和 区间和的和 区间和的和 题目解析 就直接模拟,从最低的花的高度向最高的花的高度枚举,如果当循环变量的值到达了顶峰,但还有花的数量大于2的,就把循环上线加一(所以数组要开大些) Co ...

  10. 我成为 Microsofti Azure MVP 啦！（ps：不是美国职业篮球）

    一,引言 今天是个高兴的日子,早上10点左右收到了来自微软的MVP的礼包的快递,对我来说,这是一件很值得纪念的日子.所以今天就水一篇心得感想吧!!! 我是年前2月9号开始申请MVP的,经历了差不多1个 ...