watch和computed的用法区别是什么?
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 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的用法区别是什么?的更多相关文章
- vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...
- computed的用法
其实在摸板中也是可以做简单的计算的,但是会看起来会很乱 ,可以用computed来做计算 <!DOCTYPE html> <html lang="en"> ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- vue2 computed set与get函数
大家都知道computed简单的使用方法,这儿只分享一下setter和getter用法: setter:设置值时触发. getter:获取值时触发,与setter是没有必然联系的. <templ ...
- Vue核心知识——computed和watch的细节全面分析
computed和watch的区别 computed特性 1.是计算值,2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值,computed(数据联动).3.具有缓存 ...
- 基于vue2.0原理-自己实现MVVM框架之computed计算属性
基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...
- vue3中使用computed
演示示例(vant组件库的轮播图): <van-swipe :loop="false" :width="150" class="my-Swipe ...
- jQuery—DOM操作
摘抄自<锋利的jQuery> 一.查找节点 1.查找元素节点 var li_txt = $li.text(); 2.查找属性节点 var p_txt = $para.attr(" ...
- vim中文帮助文档安装
vim自带的帮助手册是英文的, 对平时编程的人来说没有多大阅读困难,在何况还有"星级译王"呢, 但是我猜和我一样连英语四级都愁的大有人,可偏偏就有一帮好心人人将其翻译成了中文, 可 ...
随机推荐
- 001-navicat for oracle 12 破解安装
1.首先软件包和破解文件都需要到我给的百度云盘地址下载,去官网下载的中文版破解不了,至于官网的英文版,我就不清楚了. (1)链接地址. https://pan.baidu.com/s/1jxj4uzg ...
- 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 ...
- JS正则表达式从入门到入土(3)—— 范围类
范围类 在使用正则表达式时,很多时候,我们会想要匹配a~z的所有字母,很多人想到,可以使用字符类[abcdefg...z],但是,这种方法需要输入所有需要匹配的字母.那么,有没有简单点的方法呢? 所幸 ...
- Python笔记 #02# Inner workings of lists
源:DataCamp datacamp 的 DAILY PRACTICE + 日常收集. List of lists Subset and conquer Slicing and dicing Li ...
- 20145314郑凯杰 《Java程序设计》第1周学习总结
20145314郑凯杰 <Java程序设计>第1周学习总结 教材学习内容总结 跟着教材的顺序开始总结我学过的内容: 1.三大平台 JAVA SE ,JAVA EE,JAVA ME 从毕向东 ...
- 20145240《网络对抗》Web基础
Web基础 实验后回答问题 什么是表单? 表单在网页中主要负责数据采集功能. 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...
- cogs 1487. 麻球繁衍
★ 输入文件:tribbles.in 输出文件:tribbles.out 评测插件 时间限制:3 s 内存限制:256 MB [题目描述] 万有引力定律: “使物体相互靠近的力的大小与 ...
- ubuntu18.04编译openwrt前的准备
1.获取openwrt源码 git clone https://github.com/openwrt/openwrt.git 2.安装一些库及必备程序: sudo apt-get install li ...
- NSURLSession 的学习资料
一个nsurlsession的一些学习资料 http://www.cocoachina.com/ios/20161018/17785.html
- 使用Spring注解注入属性
本文介绍了使用Spring注解注入属性的方法.使用注解以前,注入属性通过类以及配置文件来实现.现在,注入属性可以通过引入@Autowired注解,或者@Resource,@Qualifier,@Pos ...