深入浅析Vue中的 computed 和 watch


Posted in Javascript onJune 06, 2018

computed

计算属性:通过属性计算得来的属性

    计算属性,是在相关联的属性发生变化才计算,计算过一次,如果相关属性没有变化,下一次就不需要计算了,直接去缓存的值

a:<input type="number" v-model.number="a" />
 b:<input type="number" v-model.number="b" />
 <!--c:<input type="number" v-model.number="c" />-->
 总和:{{sum()}}
 总和:{{count}}
 平均值:{{avg}}
 <p v-once>单价:{{price}}</p>
 <p>数量:<input type="number" v-model.number="count"/></p>
 <p>总价:{{sum}}</p>
 <p>运费:{{free}}</p>
 <p>应付:{{pay}}</p>
  data: {
      a: '',
      b:'',
      c:'',
      price: 28.8,
      count: '',
      free: 10
  },
  computed: {
    count(){
      console.log('计算属性触发了');
        return this.a+this.b;
    },
    avg(){
      return this.count/2;
    },
    sum(){
      return this.price * this.count;
    },
   pay(){
    if(this.count>0){
      if(this.sum>=299){
        return this.sum;
    }else{
      return this.sum + this.free;
    }
     }else{
        return 0;
    }
    }
   }

watch

属性变化,就会触发监听的函数。

监听属性变化,一般是用于跟数据无关的业务逻辑操作。

计算属性,适用于属性发生变化后,需要计算得到新的数据。        

<div id="app">
      a: <input type="number" v-model.number="a" /><br />
      b: <input type="number" v-model.number="b" /><br />
      总和:{{count}}
      <br /><br /><br />
      name: <input type="text" v-model="obj.name" /><br />
      age: <input type="text" v-model.number="obj.age" /><br />
    </div>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          a: '',
          b: '',
          count: '',
          obj: {
            name: '',
            age: ''
          }
        },
        watch: {
          a(newVal, oldVal){
            console.log('触发了a-watch');
            this.count = this.a + this.b;
          },
          b(newVal){
            console.log('触发了b-watch');
            this.count = this.a + this.b;
          },
//          obj(newVal, oldVal){
//            console.log('触发了obj的监听');
//          }
//
          obj: {
            //监听对象中的每一个值
            handler(newVal, oldVal){
              console.log('触发了obj的监听');
            },
            deep: true//深度监听
          },
          //监听对象中的某个属性
          'obj.name': function(){
            console.log('触发了obj.name的监听');
          }
        }
      })
    </script>

watch 也可以在methods里面进行监听配置

<div id="app">
      a: <input type="number" v-model.number="a" /><br />
      b: <input type="number" v-model.number="b" /><br />
      总和:{{count}}
      <br /><br /><br />
      name: <input type="text" v-model="obj.name" /><br />
      age: <input type="text" v-model.number="obj.age" /><br />
      <button @click="btnAction()">开始监听</button>
    </div>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          a: '',
          b: '',
          count: '',
          obj: {
            name: '',
            age: ''
          }
        },
        methods: {
          btnAction(){
            this.$watch('a', (newVal, oldval)=>{
              console.log('监听到了a的变化');
              console.log(newVal, oldval);
            })
            this.$watch('obj.name', (newVal, oldval)=>{
              console.log('监听到了obj.name的变化');
              console.log(newVal, oldval);
            })
            this.$watch('obj', (newVal, oldval)=>{
              console.log('监听到了obj的变化');
              console.log(newVal, oldval);
            }, {
              deep: true
            })
          }
        }
      })
//      vm.$watch('a', (newVal, oldval)=>{
//        console.log('监听到了a的变化');
//        console.log(newVal, oldval);
//      })
//      
//      vm.$watch('obj.name', (newVal, oldval)=>{
//        console.log('监听到了obj.name的变化');
//        console.log(newVal, oldval);
//      })
//      
//      vm.$watch('obj', (newVal, oldval)=>{
//        console.log('监听到了obj的变化');
//        console.log(newVal, oldval);
//      }, {
//        deep: true
//      })
    </script>

下面在看下computed 和 watch

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

/*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方法来实现-->
//将需要watch的属性定义在watch中,当属性变化氏就会动态的执行watch中的操作,并动态的可以更新到dom中 
 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 来写-->
  //计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
  //这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
 new Vue({
    el:"#myDiv",
      data:{
        firstName:"Den",
        lastName:"wang",
      },
      computed:{
        fullName:function(){
          return this.firstName + " " +this.lastName;
        }
      }
  })

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

总结

以上所述是小编给大家介绍的Vue中的 computed 和 watch,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
input框中的name和id的区别
Nov 16 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
vue组件与复用详解
Apr 08 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
js消除图片小游戏代码
Dec 11 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
详解创建自定义的Angular Schematics
Jun 06 #Javascript
vue组件实现进度条效果
Jun 06 #Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 #Javascript
vue组件实现可搜索下拉框扩展
Oct 23 #Javascript
微信小程序实现美团菜单
Jun 06 #Javascript
详解express + mock让前后台并行开发
Jun 06 #Javascript
vue element项目引入icon图标的方法
Jun 06 #Javascript
You might like
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
js常用DOM方法详解
2017/02/04 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python素数检测实例分析
2015/06/15 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
set在python里的含义和用法
2019/06/24 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
python实现logistic分类算法代码
2020/02/28 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
运动会开幕式邀请函
2014/01/22 职场文书
安全生产实施方案
2014/02/23 职场文书
学校火灾防控方案
2014/06/09 职场文书
2014年文秘工作总结
2014/11/25 职场文书
小学优秀班主任材料
2014/12/17 职场文书
红楼梦读书笔记
2015/06/25 职场文书
改进工作作风心得体会
2016/01/23 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python