计算属性

vue的模板里可以使用表达式，但是它的设计初衷是用于简单计算，在模板中放入太多逻辑会让模板过重且难以维护。例如：

<div id="example">

  {{ message.split('').reverse().join('') }}

</div>

这里很难一眼看出是要显示什么，而且要多次使用的话也很麻烦，因此对于复杂逻辑应使用计算属性

错误示例
```html

Title

{{ message.split('').reverse().join('') }}



<br>

正确写法

```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

    <!--   直接使用方法名就行，不用加括号   -->

    <p>{{ reversedMessage }}</p>

</div>

<script>

    //建议vue的变量命与作用的标签id一致

    let app = new Vue({

        el: "#app",  //关联dom对象

        data: {

            message: 'I have a dream'   //模板使用的数据

        },

        //定义计算属性

        computed: {

            // 在computed里定义方法，使用的时候直接写方法名

            reversedMessage: function () {

                // `this` 指向 app 实例，data里面的数据可以直接获取到htis.message

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

            }

        }

    })

</script>

</body>

</html>

## 计算属性与方法的不同

上述例子中也可以通过调用方法来达到同样的目的

在组件中定义方法

// 在组件中

methods: {

  reversedMessage: function () {

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

  }

}

调用方法

<p>Reversed message: "{{ reversedMessage() }}"</p>

就得到的结果而言，两种方式是完全一致的。但是不同的是，计算属性是基于它们的依赖进行缓存的，也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值，对于上述的例子，只要message不发生改变，多次访问reversedMessage计算属性会立即返回结果而不必再次执行函数

下面我们来验证这个结论
```html

Title

使用计算属性

{{reversedMessage}}

<hr>

<p>使用方法</p>

<p>{{reversedMessageMethod()}}</p>

```


打开html，右键检查-console

## 小结
- 模板内表达式包含复杂逻辑时，应使用计算属性
- 只要计算属性使用的数据不发生变化，计算属性就不会执行，而是直接使用缓存

vue的计算属性与方法的不同的更多相关文章

  1. vue中计算属性computed方法内传参

    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...

  2. vue中计算属性的get与set方法

    计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...

  3. 浅谈Vue中计算属性（computed）和方法（methods）的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  4. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  5. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  6. vue生命周期以及vue的计算属性

    一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...

  7. vue的计算属性

    在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...

  8. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  9. VUE：计算属性和监视

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. selenium-日志文件的使用(十二)

    概述 在自动化测试中,如果测试失败需要对错误的错误的代码或者测试case进行分析,进行分析时最好的方法是在项目中添加日志文件,通过日志文件的分析定位出现错误的原因. 这样可以保持自动化测试用例的健壮性 ...

  2. C# 得到EXCEL表格中的有效行数和列数

    每种方法中上面的是Excel的行数,下面的是Excel的列数.方法七:经过加工修改已经可以读出来的是有效数据行 using Excel = Microsoft.Office.Interop.Excel ...

  3. JS倒计时两种种实现方式

    最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: <html> <head> <meta charset=&quo ...

  4. 24G的SSD有什么用

    有台12G内存,带24G的SSD的笔记本,系统自带WINDOWS8,最近感觉很慢,就动手把1T的硬盘升级到512的SSD. BIOS里面明明看到24G的SSD,Windows里面就消失了(应该是坏掉了 ...

  5. wordpress如何利用插件添加优酷土豆等视频到自己的博客上

    wordpress有时候需要添加优酷.土豆等网站的视频到自己的博客上,传统的分享方法不能符合电脑端和手机端屏幕大小的需求,又比较繁琐,怎样利用插件的方法进行添加呢,本视频向你介绍一款这样的插件——Sm ...

  6. web安全—sql注入漏洞

    SQL注入-mysql注入 一．普通的mysql注入 MySQL注入不像注入access数据库那样,不需要猜.从mysql5.0以上的版本,出现一个虚拟的数据库,即:information_schem ...

  7. 理解jQuery的$.extend与$.fn.extend

    https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...

  8. 智表ZCELL产品V1.4.0开发API接口文档 与 产品功能清单

    为了方便大家使用ZCELL,应网友要求,整理编写了相关文档,现与产品一起同步发布,供大家下载使用,使用过程中如有疑问,请与我QQ联系. 智表(ZCELL)V1.4.0版本  功能清单文档下载地址: 功 ...

  9. Linux Docker的部署

    1.安装 $ yum -y install docker 2.启动docker服务 $ systemctl start docker 3.设置开启自启 $ systemctl enable docke ...

  10. Jenkins + Ansible + Gitlab之gitlab篇

    前言 持续交付 版本控制器:Gitlab.GitHub 持续集成工具:jenkins 部署工具:ansible  课程安排 Gitlab搭建与流程使用 Ansible环境配置与Playbook编写规范 ...