在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用**计算属性**。

基础例子

<div id="example">
a={{ a }}, b={{ b }}
</div>

var vm = new Vue({

  el: '#example',
data: {
a: 1
},
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
}
}
})

这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

你可以打开浏览器的控制台,修改 vm。vm.b 的值始终取决于 vm.a 的值。

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a,因此当 vm.a 发生改变时,依赖于 vm.b 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系:计算属性的 getter 是干净无副作用的,因此也是易于测试和理解的。

计算属性 vs. $watch

Vue.js 提供了一个方法 $watch,它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时, $watch 很诱人 —— 特别是如果你来自 AngularJS。不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。考虑下面例子:

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

上面代码是命令式的重复的。跟计算属性对比:

var vm = new Vue({
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]
}
}
}

现在在调用 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会有相应更新。

关于计算属性背后的原理和技术细节详见计算属性的奥秘

watch和computed的用法区别是什么?的更多相关文章

  1. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  2. computed的用法

    其实在摸板中也是可以做简单的计算的,但是会看起来会很乱 ,可以用computed来做计算 <!DOCTYPE html> <html lang="en"> ...

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

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

  4. vue2 computed set与get函数

    大家都知道computed简单的使用方法,这儿只分享一下setter和getter用法: setter:设置值时触发. getter:获取值时触发,与setter是没有必然联系的. <templ ...

  5. Vue核心知识——computed和watch的细节全面分析

    computed和watch的区别 computed特性 1.是计算值,2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值,computed(数据联动).3.具有缓存 ...

  6. 基于vue2.0原理-自己实现MVVM框架之computed计算属性

    基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...

  7. vue3中使用computed

    演示示例(vant组件库的轮播图): <van-swipe :loop="false" :width="150" class="my-Swipe ...

  8. jQuery—DOM操作

    摘抄自<锋利的jQuery> 一.查找节点 1.查找元素节点 var li_txt = $li.text(); 2.查找属性节点 var p_txt = $para.attr(" ...

  9. vim中文帮助文档安装

    vim自带的帮助手册是英文的, 对平时编程的人来说没有多大阅读困难,在何况还有"星级译王"呢, 但是我猜和我一样连英语四级都愁的大有人,可偏偏就有一帮好心人人将其翻译成了中文, 可 ...

随机推荐

  1. 001-navicat for oracle 12 破解安装

    1.首先软件包和破解文件都需要到我给的百度云盘地址下载,去官网下载的中文版破解不了,至于官网的英文版,我就不清楚了. (1)链接地址. https://pan.baidu.com/s/1jxj4uzg ...

  2. Winter-1-D Max Sum 解题报告及测试数据

    Time Limit:1000MS Memory Limit:32768KB Description Given a sequence a[1],a[2],a[3]......a[n], your j ...

  3. JS正则表达式从入门到入土(3)—— 范围类

    范围类 在使用正则表达式时,很多时候,我们会想要匹配a~z的所有字母,很多人想到,可以使用字符类[abcdefg...z],但是,这种方法需要输入所有需要匹配的字母.那么,有没有简单点的方法呢? 所幸 ...

  4. Python笔记 #02# Inner workings of lists

    源:DataCamp datacamp 的 DAILY PRACTICE  + 日常收集. List of lists Subset and conquer Slicing and dicing Li ...

  5. 20145314郑凯杰 《Java程序设计》第1周学习总结

    20145314郑凯杰 <Java程序设计>第1周学习总结 教材学习内容总结 跟着教材的顺序开始总结我学过的内容: 1.三大平台 JAVA SE ,JAVA EE,JAVA ME 从毕向东 ...

  6. 20145240《网络对抗》Web基础

    Web基础 实验后回答问题 什么是表单? 表单在网页中主要负责数据采集功能. 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  7. cogs 1487. 麻球繁衍

    ★   输入文件:tribbles.in   输出文件:tribbles.out   评测插件 时间限制:3 s   内存限制:256 MB [题目描述] 万有引力定律: “使物体相互靠近的力的大小与 ...

  8. ubuntu18.04编译openwrt前的准备

    1.获取openwrt源码 git clone https://github.com/openwrt/openwrt.git 2.安装一些库及必备程序: sudo apt-get install li ...

  9. NSURLSession 的学习资料

    一个nsurlsession的一些学习资料 http://www.cocoachina.com/ios/20161018/17785.html

  10. 使用Spring注解注入属性

    本文介绍了使用Spring注解注入属性的方法.使用注解以前,注入属性通过类以及配置文件来实现.现在,注入属性可以通过引入@Autowired注解,或者@Resource,@Qualifier,@Pos ...