详解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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
vue 强制组件重新渲染(重置)的两种方案
Oct 29 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 addslashes 函数详细分析说明
2009/06/23 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
js同时按下两个方向键
2007/12/01 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
js实现随机圆与矩形功能
2020/10/29 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python contextlib模块使用示例
2015/02/18 Python
Python利用ansible分发处理任务
2015/08/04 Python
详解Django 时间与时区设置问题
2019/07/23 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
元旦促销方案
2014/03/15 职场文书
初中思品教学反思
2016/02/20 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers