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 条评论
登录 后参与评论

相关文章

来自专栏Kevin-ZhangCG

[ Java学习基础 ] Java构造函数

2516
来自专栏PHP在线

PHP中的函数

函数调用 function sum($x,$y) //形参:在声明函数时声明的参数 { // $x = 1; //如果在函数内对参数赋值,则会覆盖实参。...

3745
来自专栏青玉伏案

算法与数据结构(十五) 归并排序(Swift 3.0版)

上篇博客我们主要聊了堆排序的相关内容,本篇博客,我们就来聊一下归并排序的相关内容。归并排序主要用了分治法的思想,在归并排序中,将我们需要排序的数组进行拆分,将其...

1975
来自专栏小樱的经验随笔

Java学习笔记【持续更新】

一个简单的java程序如下: class Sakura {   public static void main(String[] arges)   {     ...

4155
来自专栏Python数据科学

Python 内建函数大全

Python 解释器内置了许多函数和类型,列表如下(按字母排序)(省略了几个我没用过或者不常用的)。

2763
来自专栏炉边夜话

java 异常处理学习笔记

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

1062
来自专栏决胜机器学习

《Redis设计与实现》读书笔记(六) ——Redis中的压缩列表

《Redis设计与实现》读书笔记(六) ——Redis中的压缩列表 (原创内容,转载请注明来源,谢谢) 一、概述 压缩列表(ziplist)是列表键(list)...

3957
来自专栏Micro_awake web

JavaScript(五):函数(闭包,eval)

1.函数的申明:三种方法: function命令 函数表达式:变量赋值 Function构造函数 1 //method 1: function命令 2 fu...

24010
来自专栏测试开发架构之路

C语言之函数

  结构化程序设计主张按功能来分析需求,主要原则自顶向下,逐步求精,模块化等。 主张按功能把软件系统逐步细分,每个功能都负责对数据进行一次处理,每个功能接收一些...

3904
来自专栏专注数据中心高性能网络技术研发

[C++]C++面试知识总结

1.程序运行知识 1.1 内存布局和分配方式 C程序的内存布局如下: ? 静态存储区:存储全局变量和static变量,通常在程序编译期间已经分配好了。 BSS...

3324

扫码关注云+社区

领取腾讯云代金券