专栏首页web前端Vuejs --04 计算属性

Vuejs --04 计算属性

一、使用原因

     1、模板中表达式很便利,但实际上只适用于简单的运算,不适宜放入太多逻辑运算,例如:

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

     所以: 任何复杂逻辑,你都应当使用计算属性

二、使用方法

<div id="app">
     你好{{ ComMessage }}
     <p>{{ ComMsg() }}</p>
</div>
 
 
var vm = new Vue({
     el: '#app',
     data: {
          message: 'hello world'
     },
     computed: {
          ComMessage: function(){
               return this.message.split('').reverse().join('');     //this 指向vm实例
          }
     },
     method: {
          ComMsg: function(){
               return this.message.split('').reverse().join('');     //this 指向vm实例              
          }
     }
});

三、计算属性 VS 函数方法methods

     1、同:如上例子,结果都是一样

     2、异:计算属性能基于它们的依赖进行缓存, 计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结               果,而不必再次执行函数。

//意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:
computed: {
     now: function () {
          return Date.now()
     }
}

     3、综上,使用计算属性还是methods,取决于是否希望有缓存

四、computed属性 VS watch属性

<div id="demo">{{ fullName }}</div>
 
======================================================
var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
    },
    watch: {
        firstName: function(val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName: function(val) {
            this.fullName = this.firstName + ' ' + val
        }
    }
})
 
=======================================================
var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: function() {
            return this.firstName + ' ' + this.lastName
        }
    }
})

五 、setter      计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

// ...
computed: {
        fullName: {
            // getter
            get: function() {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function(newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }
    // ...

六、Watchers      当你想要在数据变化响应时,执行异步操作或开销较大的操作,很有用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Button按钮--inject与provide

    inject 和 provider 是vue中的组合选项,需要一起使用。目的是允许一个祖先组件向其所有子孙后代注入依赖(简单地说就是祖先组件向子孙后代传值的一种...

    用户1148399
  • JavaScript基础学习--04for循环

    一、自动生成100个Li思路:      1、html布局,在button中做点击事件      2、获取将要放置li的container容器,定义li,并拼接...

    用户1148399
  • JavaScript基础学习--08 JS作用域

    Demos:   https://github.com/jiangheyan/JavaScriptBase 一、浏览器      1、“JS解析器”(至少分为两...

    用户1148399
  • Vue 实现下拉加载更多

    熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法:

    越陌度阡
  • PHP高级编程之守护进程

    PHP高级编程之守护进程 http://netkiller.github.io/journal/php.daemon.html 摘要 2014-09-01 发表...

    netkiller old
  • 项目实战|缓存处理

    在之前的博客中,我们使用过工厂、代理模式来封装原生的缓存方法,这一篇我们将缓存方法的细节处理优化一下,来提高项目质量

    Cookieboty
  • PHP经典设计模式之依赖注入定义与用法详解

    本文实例讲述了PHP经典设计模式之依赖注入定义与用法。分享给大家供大家参考,具体如下:

    砸漏
  • LINQ to SQL(2):生成对象模型

    在LINQ to SQL中,可以使用自己的编程语言的对象模型映射到关系数据库,在上一节课,已经有一部分内容,简单的介绍了一下这种对象模型的结构,这一节,我们主要...

    小白哥哥
  • element表单校验问题

    新增时,校验为空未通过,点击取消按钮。重新打开编辑,明明有值,显示校验未通过。

    崔笑颜
  • 烧脑!JS+Canvas 带你体验「偶消奇不消」的智商挑战

    看似简单却具有极大的挑战性和趣味性,这就是其魅力所在!温馨提示,体验后再阅读此文体验更佳哦!

    苏南

扫码关注云+社区

领取腾讯云代金券