详解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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
JS实现滑动插件
Jan 15 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脚本的10个技巧(4)
2006/10/09 PHP
php 文章采集正则代码
2009/12/28 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
php创建类并调用的实例方法
2019/09/25 PHP
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python编程实现正则删除命令功能
2017/08/30 Python
python版简单工厂模式
2017/10/16 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
养殖人员的创业计划书范文
2013/12/26 职场文书
学术会议邀请函范文
2014/01/22 职场文书
出国留学计划书
2014/04/27 职场文书
军训拉歌口号
2014/06/13 职场文书
医院标语大全
2014/06/23 职场文书
2014年商场工作总结
2014/11/22 职场文书
个人工作保证书
2015/02/28 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python