文档章节

Vue.js 计算属性

tianyawhl
 tianyawhl
发布于 2017/08/23 09:45
字数 554
阅读 11
收藏 0

计算属性与methods方法

模板内的表达式是非常便利的,但在模板中放太多的逻辑会让模板过重且难以维护,对于复杂的逻辑应该使用计算属性
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

同样用methods可以达到与computed一样的效果
<p>Reversed message: "{{ reversedMessage() }}"</p>

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

使用computed与methods最终的结果是相同的,不同的是计算属性是基于它们的依赖进行缓存的,计算属性只有在它的相互依赖改变时才会重新求值,意味着只要message不发生变化,多次访问reversedMessage 计算属性会立即返回之前的计算结果,而不必执行函数,相比之言,只要发生重新渲染,methods调用总会执行该函数,如果不希望有缓存,请使用methods

计算属性与Watched属性

Vue 确实提供了一种更通用的方式来观察与响应实例上的数据变化,你很容易滥用watch,特别是如果你之前使用过Angular JS,通常更好的方法是使用computed属性而不是命令式的watch回调
如下的例子是使用vatch来监听firstName与lastName的变化,如果变化则给fullName重新赋值,特别注意在data初始化时就要有fullName
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
 <script>
    var app = new Vue({
        el: "#app",
        data: { firstName: "wang", lastName: "lily2" },
        computed: {
            fullName: {
                get: function() {
                    return this.firstName + " " + this.lastName;
                },
                set: function(newValue) {
                    names = newValue.split(" ");
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
    })
    app.fullName = 'John Doe'
    </script>
现在再运行 ,setter 会被调用,vm.firstName 和 vm.lastName 也相应地会被更新。 

© 著作权归作者所有

下一篇: Vue模板语法
tianyawhl
粉丝 8
博文 268
码字总数 142678
作品 0
常州
前端工程师
私信 提问
好程序员Web前端教程分享Vue学习心得

好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于...

好程序员IT
04/10
40
0
vue中需要注意的问题总结(上)

文章首发于个人博客 前言 使用vue的时候经常会遇到一些问题,其实仔细阅读查阅官方文档,就会发现文档中已提到一些格外需要注意的点; 为了深入的理解官方文档中对这些问题的解释,查阅了一些资料...

funnycoderstar
2018/10/30
0
0
VueJS 之 TypeScript

Vue CLI内置了TypeScript的支持,并且@vue/cli3提供了TypeScript插件,因此搭建支持TypeScript的vue工程非常方便。 特别说明:该文档基于@vue/cli3版本 1. 创建工程 使用命令创建vue工程,轻...

louieSun
04/25
0
0
Vue 3.0 前瞻,体验 Vue Function API

最近 Vue 官方公布了 Vue 3.0 最重要的RFC:Function-based component API,并发布了兼容 Vue 2.0 版本的 plugin:vue-function-api,可用于提前体验 Vue 3.0 版本的 Function-based compone...

counterxing
08/11
0
0
浅谈 Vue 中 computed 实现原理

虽然目前的技术栈已由 Vue 转到了 React,但从之前使用 Vue 开发的多个项目实际经历来看还是非常愉悦的,Vue 文档清晰规范,api 设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很...

创宇前端
2018/09/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

调用约定

对于常见的指令集,在指令层面没有所谓的“函数”概念,只有“子程序”概念。子程序是存储在“主程序”之外的一段指令。子程序通过call指令调用,通过ret指令返回。子程序可以使用内存、堆栈...

tommwq
39分钟前
3
0
设计类题目

1. 订单 和 退货单之间有什么关系? 答:退货单是 用 用户提交退货 和 订单生成的 或者 订单和退货单都是一张单子,用一个状态标识 2. 在这种由源头单生成的流程中,第二张单子是怎样生成的?...

杨凯123
54分钟前
5
0
读写锁分离

java.util.concurrent.locks包定义了两个锁类, 我们已经讨论的ReentrantLock类和 ReentrantReadWriteLock 类。 如果很多线程从一个数据结构读取数据而很少线程修改其中数 据的话, 后者是十...

ytuan996
今天
6
0
金钱焦虑症测试 -- 人人都有吧?

你经常觉得钱不够花,被金钱困扰着吗?试试这个焦虑量表测试,测试一下你的金钱焦虑指数吧。请选择选一个最适合自己态度的答案。买买买的欲望高吗?又是一个节日,有打折活动;又被种草一个化...

蛤蟆丸子
今天
4
0
JAVA-LOCK之底层实现原理(源码分析)

首先和Synchronized(可以参考) 的不同之处,Lock完全用Java写成,在java这个层面是无关JVM实现的。其实现都依赖java.util.concurrent.AbstractQueuedSynchronizer类,简称AQS。 简单说来,...

小海bug
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部