深入浅析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判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
vue中实现高德定位功能
Dec 03 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
详解创建自定义的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
默默简单的写了一个模板引擎
2007/01/02 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
js仿京东放大镜效果
2020/08/09 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
英语简历自我评价
2014/01/26 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
安全教育片观后感
2015/06/17 职场文书
教师师德承诺书2016
2016/03/25 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Go语言编译原理之源码调试
2022/08/05 Golang