详解vue中computed 和 watch的异同


Posted in Javascript onJune 30, 2017

一、computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时,我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性,而不是命令是的watch回调。

这里我直接引用vue官网的例子来说明:

html:

我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,第三个表单数值也在变化

<div id="myDiv">
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <input type="text" v-model="fullName">
</div>

js: 用watch方法来实现

new Vue({
 el: '#myDiv',
 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
  }
 }
})

js: 利用computed 来写

new Vue({
    el:"#myDiv",
      data:{
        firstName:"Den",
        lastName:"wang",

      },
      computed:{
        fullName:function(){
          return this.firstName + " " +this.lastName;
        }
      }
  })

很容易看出 computed 在实现上边的效果时,是更简单的。

二 、 详解 comouted 计算属性。

在vue的 模板内({{}})是可以写一些简单的js表达式的 ,很便利。但是如果在页面中使用大量或是复杂的表达式去处理数据,对页面的维护会有很大的影响。这个时候就需要用到computed 计算属性来处理复杂的逻辑运算。

1.优点:

在数据未发生变化时,优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性,当相关数据没有变化是,它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。

2.setter 和 getter方法:(注意在vue中书写时用set 和 get)

  1. setter 方法在设置值是触发。
  2. getter 方法在获取值时触发。
computed:{
  fullName:{
  //这里用了es6书写方法
    set(){
       alert("set");
    },
    get(){
      alert("get");
      return this.firstName + " " +this.lastName;
    },

  }
 }

三 、watch 方法

虽然计算属性在大多数情况下是非常适合的,但是在有些情况下我们需要自定义一个watcher,在数据变化时来执行异步操作,这时watch是非常有用的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
js精度溢出解决方案
Dec 02 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 #Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 #Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 #Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 #Javascript
js实现京东轮播图效果
Jun 30 #Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
Vue和Bootstrap的整合思路详解
Jun 30 #Javascript
You might like
QueryPath PHP 中的jQuery
2010/04/11 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
详解Vue方法与事件
2017/03/09 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
如何理解Python中包的引入
2020/05/29 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
几个SQL的面试题
2014/03/08 面试题
社区活动总结报告
2014/05/05 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
毕业设计致谢语
2015/05/14 职场文书
导师鉴定意见
2015/06/05 职场文书
初中班干部工作总结
2015/08/10 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js