前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue中watch的详细用法

Vue中watch的详细用法

作者头像
青年码农
发布2020-11-03 10:20:34
1.3K0
发布2020-11-03 10:20:34
举报
文章被收录于专栏:青年码农

watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

简单来说就是,vue是数据双向绑定,当页面数据发生变化时,我们通过watch可以拿到变化前和变化后的值,之后做一系列操作,下面我们通过例子来解释。

1.监听单个值变化

代码语言:javascript
复制
<template>
  <div>
    <el-input v-model="demo"></el-input>
    <div>{{value}}</div>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val,oldVal) {
        this.value = this.demo;
      }
    }
  };
</script>

这个比较简单,我们用到了两个变量,demo和value,这里演示重点是value值是怎么变化的,我们监听的demo,这个demo通过v-model绑定到input,当input内容改变时,我们就把input里的值赋值到value。但是这个写法有个弊端,就是首次绑定不会执行监听函数,有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

上面写法可以替换成

代码语言:javascript
复制
<template>
  <div>
    <el-input v-model="demo"></el-input>
    <div>{{value}}</div>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo:{
        handler(val,oldVal) {
           this.value = this.demo;
       },
     immediate: true
      }
    }
  };
</script>

immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

2.监听单个值变化,不同的是监听对象里面的

代码语言:javascript
复制
<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    <div>{{value}}</div>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name:'',
          age:'',
        },
        value: ''
      };
    },
    watch: {
      'demo.name'(val,oldVal) {
        this.value = this.demo;
      }
    }
  };
</script>

这个和第一个例子实现的效果是同样的,但是区别在于绑定的是对象里的属性,

3.监听对象

代码语言:javascript
复制
<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    <div>修改前的名字:{{name}}</div>    
    <div>修改后的名字:{{oldName}}</div>  
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name:'',
          age:'',
        },
        name: '',
        oldName: '',
      };
    },
    watch: {
      demo: {
        handler:function(val,oldval){
          this.name = val.name
          this.oldName = oldVal.name
        },
        deep:true//对象内部的属性监听,也叫深度监听      
      }
    }
  };
</script>

这种监听方式,监听了对象的所有属性,这样的方法对性能影响很大,修改里面任何一个属性都会触发这个监听器里的 handler。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-10-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档