zoukankan      html  css  js  c++  java
  • vue中watch的详细用法

    转自:https://www.cnblogs.com/baller/p/13396124.html

    在vue中,使用watch来响应数据的变化。watch的用法大致有三种。

    1. 常用用法

    <input type="text" v-model="name"/>
    复制代码
    new Vue({
      el: '#app',
      data: {
        name: '咸鱼'
      },
      watch: {
        name(newVal,oldVal) {
          // ...
        }
      } 
    })
    复制代码

    直接写一个监听处理函数,当每次监听到 name 值发生改变时,执行函数。也可以在所监听的数据后面直接加字符串形式的方法名:

    watch: {
        name: 'nameChange'
     } 

    2 .立即执行(immediate和handler)

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

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

    复制代码
    new Vue({
      el: '#app',
      data: {
        name: ''
      },
      watch: {
        name: {
          handler(newVal,oldVal) {
            // ...
          },
          immediate: true
        }
      } 
    })
    复制代码

    监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;

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

    3 .深度监听

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

    <input type="text" v-model="person.name"/>
    复制代码
    new Vue({
      el: '#app',
      data: {
        person: {id: 1, name: '咸鱼'}
      },
      watch: {
        person: {
          handler(newVal,oldVal) {
          // ...
        },
        deep: true,
        immediate: true
        }
      } 
    })
    复制代码

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

    复制代码
    watch: {
        'person.name': {
          handler(newVal,oldVal) {
          // ...
          },
          deep: true,
          immediate: true
        }
      }
    复制代码

    这样只会给对象的某个特定的属性加监听器。

    数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。

  • 相关阅读:
    HTML5结构
    HTML5新增的非主体元素header元素、footer元素、hgroup元素、adress元素
    CF GYM 100703G Game of numbers
    CF GYM 100703I Endeavor for perfection
    CF GYM 100703K Word order
    CF GYM 100703L Many questions
    CF GYM 100703M It's complicate
    HDU 5313 Bipartite Graph
    CF 560e Gerald and Giant Chess
    POJ 2479 Maximum sum
  • 原文地址:https://www.cnblogs.com/linwenbin/p/13917640.html
Copyright © 2011-2022 走看看