vue深究第一弹:computed与watch的异同
最近在开发vue的过程中,不断用到了计算属性(computed)和观察者(watch),从逻辑上感觉它们很相似,但是尝试混用它们的时候,又出现了一些问题,那么它们到底有什么异同呢?
1. computed VS data
问计算属性与观察者异同这个问题之前,首先要明确为啥会有计算属性,即computed vs data。在vue中,数据有时有被处理一下再展示出来的需求,例如:
var vm = new Vue({
el: '#example',
data: {
message: 'Hello',
name: 'tomczhang'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
},
getWelcome: function () {
return this.message + ' ' + this.name
}
}
})
不管是reversedMessage还是getWelcome方法,单纯写在data中都显得很不优雅,所以,建立一个computed动态的去处理它们是很有必要的。
2. watch VS data
既然vue中数据和view是双向绑定的,那当用户输入文本的时候,vue就能监听到视图进行了变动,并将变动的数据传递给我们(具体的变动原理见此)。观察者就是系统监听到视图变动后调用的方法,参数分别是老的值和新的值。我们利用watch就可以改变data值。例如:
var vm = new Vue({
el: '#demo',
watch: {
userInput: function (oldValue, newValue) {
this.message = newValue;
}
}
})
当然我们针对例子1中的代码也可以用观察者来解决,这也是我写这篇文章的主因,像这样:
var vm = new Vue({
el: '#example',
data: {
message: 'Hello',
name: 'tomczhang',
welcome: ''
},
watch: {
welcome: function () {
this.welcome = this.message + ' ' + this.name;
}
}
})
3. computed vs watch
BB了那么多,马上进入我们的正题。
相同: computed和watch都起到监听/依赖一个数据,并进行处理的作用
异同:它们其实都是vue对监听器的实现,只不过computed主要用于对同步数据的简单处理,watch则主要用于数据输入时异步操作或者开销较大的情况。能用computed的时候优先用computed,避免了多个数据影响其中某个数据时多次调用watch的尴尬情况。对于视图层的改变则优先使用watch。
例如这样:
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
}
}
})
相应的computed版本
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
参考:
1)计算属性和观察者:https://cn.vuejs.org/v2/guide...
原文地址:https://segmentfault.com/a/1190000012656519
vue深究第一弹:computed与watch的异同的更多相关文章
- Vue 中 computed ,watch,methods 的异同
methods,watch和computed都是以函数为基础的. computed 和 watch 都可以观察页面的相应式数据的变化.当处理页面的数据变化时,我们有时候很容易滥用watch, 而通常更 ...
- typecho流程原理和插件机制浅析(第一弹)
typecho流程原理和插件机制浅析(第一弹) 兜兜 393 2014年03月28日 发布 推荐 5 推荐 收藏 24 收藏,3.5k 浏览 虽然新版本0.9在多次跳票后终于发布了,在漫长的等待里始终 ...
- 我的长大app开发教程第一弹:Fragment布局
在接下来的一段时间里我会发布一个相对连续的Android教程,这个教程会讲述我是如何从零开始开发“我的长大”这个Android应用. 在开始之前,我先来介绍一下“我的长大”:这是一个校园社交app,准 ...
- Hadoop基础-MapReduce的工作原理第一弹
Hadoop基础-MapReduce的工作原理第一弹 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在本篇博客中,我们将深入学习Hadoop中的MapReduce工作机制,这些知识 ...
- Java基础-程序流程控制第一弹(分支结构/选择结构)
Java基础-程序流程控制第一弹(分支结构/选择结构) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.if语句 1>.if语句的第一种格式 if(条件表达式){ 语句体: ...
- RMQ_第一弹_Sparse Table
title: RMQ_第一弹_Sparse Table date: 2018-09-21 21:33:45 tags: acm RMQ ST dp 数据结构 算法 categories: ACM 概述 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- codechef 营养题 第一弹
第一弾が始まる! 定期更新しない! 来源:http://wenku.baidu.com/link?url=XOJLwfgMsZp_9nhAK15591XFRgZl7f7_x7wtZ5_3T2peHh5 ...
- 好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字
原文:好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csd ...
随机推荐
- MEF基本概念
基本概念: Managed Extensibility Framework 或 MEF 是一个用于创建可扩展的轻型应用程序的库,在.NET 4.0发布 Container:容器,使用Compositi ...
- cmd 与 网卡(netsh 命令)
1. 通过命令提示符(cmd)命令连接 Wi-Fi 1.1 连接曾经连接过的 Wi-Fi :: 查看配置的列表(::表示注释) netsh wlan show profile :: 连接 netsh ...
- ajax返回数据时,如何将javascript值(通常为对象或数组)转为json字符串
ajax获取值时,返回的数据为空时 alert后出现 [ ]; 用if语句判断时不为空,此时如何判断返回的数据是否为空.可将返回的值转化为json字符串. JSON.stringify() 方法用于将 ...
- 玩转HTML5移动页面(动效篇)
为一名前端,在拿到设计稿时你有两种选择: 快速输出静态页面 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些 ...
- 通过nodeSelector配置项实现pod部署至指定node
Node节点添加标签 [root@node1 work]# kubectl label nodes node1 node=master --overwrite node/node1 labeled [ ...
- 洛谷 P1005 矩阵取数游戏 (区间dp+高精度)
这道题大部分时间都在弄高精度-- 还是先讲讲dp吧 这道题是一个区间dp,不过我还是第一次遇到这种类型的区间dp f[i][j]表示取了数之后剩下i到j这个区间的最优值 注意这里是取了i之前和j之后的 ...
- SSIS安装以及安装好找不到商业智能各种坑
原文:SSIS安装以及安装好找不到商业智能各种坑 这两天为了安装SSIS,各种头疼.记录一下,分享给同样遇到坑的.. 安装SSIS需要几个步骤. 先说一下我的情况,安装SQL的时候,一直默认下一步,没 ...
- Myeclipse学习总结(8)——Eclipse实用操作
工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个"器".本文会从Eclipse快捷键和实用技巧这两个篇章展开介绍.Eclipse快捷键用熟后,不用鼠标,便可进行 ...
- Mock+Proxy在SDK项目的自己主动化測试实战
项目背景 广告SDK项目是为应用程序APP开发者提供移动广告平台接入的API程序集合,其形态就是一个植入宿主APP的jar包.提供的功能主要有以下几点: - 为APP请求广告内容 - 用户行为打点 - ...
- C++primer书店程序
#include <iostream> #include <string> #include <cassert> #include <algorithm> ...