vue中的watch的用法

更新日期: 2019-06-08阅读: 2.6k标签: 监听

 在vue中,使用watch来响应数据的变化。下面代码是watch简单的用法:

<template>
   <input v-model="example1"/>
   <input v-model="example2"/>
   <input v-model="example3.test"/>
</template>
<script>
   export default {
      data(){
        return {
          example1:"",
          example2:"",
          example3:{
            test:1,
            test1:2
          }
        }
      },
      watch:{
        example1(curVal,oldVal){
          console.log(curVal,oldVal);
        },
        example2:'a',//值可以为methods的方法名
        example3:{
         //数据为对象或数组时,curVal和oldVal是相等的,这两个形参指向的是同一个数据对象
          handler(curVal,oldVal){
            console.log(curVal,oldVal)
          },
          deep:true,
                immediate: true
        }
      },
      methods:{
        a(curVal,oldVal){
          conosle.log(curVal,oldVal)
        }
      }
    }
</script>


一.监听值变化

<input type="text" v-model="test_input" />

<script>
   export default {
      data(){
        return {
          test_input:""
        }
      },
      watch:{
        test_input(curVal,oldVal){
          console.log(curVal,oldVal);
        }
      }
    }
</script>


二.监听处理函数,在所监听的数据后面直接加字符串形式的方法名:

 <input type="text" v-model="test_input" />

<script>
   export default {
      data(){
        return {
          test_input: "",
        }
      },
      watch:{
        test_input: "test_click",
      },
      methods:{
        test_click() {
                console.log(this.test_input);
             }
      }
    }
</script>


三.监听对象变化

 <input type="text" v-model="test_input.input_val" />

<script>
   export default {
      data(){
        return {
          test_input: {
                 input_val: "123",
                 test_btn: "saqd"},
        }
      },
      watch:{
        test_input: {
               handler(curVal, oldVal) {
                      console.log("test_input", curVal, oldVal);
               },
             deep: true,//对象内部深遍历
             immediate: true//最初绑定值的时候也执行监听
             },
      },
      methods:{
        test_click() {
                console.log(this.test_input);
             }
      }
    }
</script>


immediate

使用watch时有一个特点,当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

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


deep

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

设置deep: true 则可以监听到cityName.name的变化,此时会给cityName的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:

watch: {
    test_input.input_val: {
      handler(curVal, oldVal) {
        console.log("example2", curVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  },


链接: https://fly63.com/article/detial/3575

原生js监听浏览器后退按钮的事件方法

js监听浏览器后退按钮的事件首先我们要了解浏览器的history。可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件监测,那么我们就可以进行监听。

使用 vue 实例更好的监听事件

文章举例说明一下在 vue 中如何更好的监听浏览器事件。原文介绍了一种新增 vue 实例的方法,单独监听事件。这样代码书写较为简练,容易管理。

js 按键监听事件(keydown event)

监听全局键盘按下事件,例如监听全局回车事件;监听某个组件键盘按下事件,例如监听id为btn的button组件的回车按下事件;如果是要监听组合键,例如监听ctrl+c

Vue2.0解决watch对象属性变化监听不到问题

在项目中遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性的时候,发现子组件使用deep watch都不能监听到属性的变化。今天终于在网上找到了答案,在这里把方法记录下来

jQuery常见事件的监听方式

在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句。这就需要对事件进行监听,监听事件的常见方式有以下三种,本人将通过实例来具体介绍。

uniapp监听网络状态 - 判断是否有网络

由于新机首次安装app的时候会出现:请求网络权限“是否允许使用数据”,如果用户很长时间没点击允许,就会出现app内接口请求永远返回失败的情况,需要用户清掉APP重新打开才能正常请求使用。

mutationobserver监听dom变化

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。DOM 的变动会触发 Mutation Observer 事件,但与事件不同的是,Mutation Observer 是异步触发

Js如何移除事件监听器

在运行时清理你的代码是构建高效、可预测的应用程序,没有商量余地的部分。在JavaScript中,实现这一目标的方法之一是很好地管理事件监听器,尤其是当不再需要时移除它们。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!