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自带的帮助手册是英文的, 对平时编程的人来说没有多大阅读困难,在何况还有"星级译王"呢, 但是我猜和我一样连英语四级都愁的大有人,可偏偏就有一帮好心人人将其翻译成了中文, 可 ...
随机推荐
- quartz (一) 基于 Quartz 开发企业级任务调度应用
本文转自:http://www.ibm.com/developerworks/cn/opensource/os-cn-quartz/ Quartz 基本概念及原理 Quartz Scheduler 开 ...
- Android利用方向传感器获得手机的相对角度实例说明
http://www.jb51.net/article/37710.htm 1.android 的坐标系是如何定义x, y z 轴的 x轴的方向是沿着屏幕的水平方向从左向右,如果手机不是正方形的话,较 ...
- jQuery :gt 选择器 jQuery :lt 选择器
选择前 3 个之后的所有 <tr> 元素: $("tr:gt(2)"); 选择前 2 个 <tr> 元素: $("tr:lt(2)");
- 基于tomcat集群做session共享
前端代理服务器nginx:192.168.223.136 tomcat服务器:采用的一台多实例192.168.223.146:8081,192.168.223.146:8082(如何构建多实例tomc ...
- 20145231熊梓宏 《网络对抗》 Bof逆向基础.shellcode注入
20145231网络对抗<逆向及Bof基础>shellcode注入 实验目的与要求 1.本次实践的对象是一个名为pwn1的linux可执行文件. 2.若该程序正常执行,则main函数会调用 ...
- Docker storage drivers
因为Docker的镜像是分层的,包含只读层和可读写层,因此选择正确的Storage Driver对于容器的性能是非常重要的. 支持的Linux发行版本 目前推荐使用性能最好的Overlay2.RHEL ...
- ArrayBlockingQueue,LinkedBlockingQueue分析
BlockingQueue接口定义了一种阻塞的FIFO queue,每一个BlockingQueue都有一个容量,让容量满时往BlockingQueue中添加数据时会造成阻塞,当容量为空时取元素操作会 ...
- LeetCode——Palindromic Substrings
Question Given a string, your task is to count how many palindromic substrings in this string. The s ...
- Devops 到底是什么?
Devops 到底是什么? 过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOps.DevOps就是开发(Development)和运维(Operations ...
- codeforces291E Tree-String Problem
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...