首页 > 其他 > 详细

vue(七)--监听属性(watch)

时间:2020-02-01 16:46:45      阅读:66      评论:0      收藏:0      [点我收藏+]
1.watch:用来监听每一个属性的变化
2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用
3.当属性发生改变那么就会触发watch函数,每个函数都会接受两个值,一个是新值,一个是旧值
4.我们可以在watch当中就行新旧值的判断来减少虚拟dom的渲染
eg:
watch:{
    a(newVal,oldVal){
    if(newVal != oldVal){
        this.sum = newVal+this.b;
    }
    console.log("a发生了改变",newVal,oldVal)
}
5.只要是当前的属性值发生改变就会触发它所对应的函数
6.如果我们需要对对象进行监听的时候需要将属性值设置为key值,val值为一个对象,对象中有两个参数是必填,一个是handler函数,一个是deep为true,这样才能实现深度监听
eg:
obj:{
    handler(newVal){
    console.log("obj发生了改变",newVal)
    },
    deep:true
}
 
demo:
 <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
       <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: #computed_props,
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });</script>

技术分享图片

 

vue(七)--监听属性(watch)

原文:https://www.cnblogs.com/crazy-lc/p/12248717.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!