详解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 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
PHP关键特性之命名空间实例详解
2017/05/06 PHP
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
python获取网页状态码示例
2014/03/30 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
全面分析Python的优点和缺点
2018/02/07 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python 并发下载器实现方法示例
2019/11/22 Python
python迭代器常见用法实例分析
2019/11/22 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
python实现人工蜂群算法
2020/09/18 Python
Python self用法详解
2020/11/28 Python
网络管理员岗位职责
2014/03/17 职场文书
化工专业自荐书
2014/06/16 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
论群众路线学习笔记
2014/11/06 职场文书
公司备用金管理制度
2015/08/04 职场文书
如何做好员工培训计划?
2019/07/09 职场文书