【Vue2】 Watch 监听器

监听器案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./../lib/vue.js"></script>
  <script src="./../lib/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.6.0/dayjs.min.js"></script>
</head>
<body>
<!-- 
    1.什么是watch侦听器
        watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
        语法格式如下:
 -->
<div id="app">
    <input type="text" v-model="username">
    <br>
    <input type="password" v-model="form.password">
</div>
<script>

const VIEW_MODEL1 = new Vue({
  el: '#app',
  data: {
    username: '爱大叔大婶',
    form: {
        password: '12131243'
    }
  },
  watch: {
    /**
     * 监听的函数名就是变量名
     * newValue, 新的val值
     * oldValue 旧的值变化
     * 
     * 问题1：
     *  如果组件刚加载进入就存在默认值，则监听器是不会触发的
     *  里面的校验接口也就不会触发，要想组件进入时就要对默认值校验
     */

    // 写法一
    // username(newValue, oldValue) {
    //     console.log(newValue)
    //     // 输入项清空则不发请求
    //     if (!newValue) return 
    //     // 发起请求，检查用户名是否占用
    //     $.get(`https://www.escook.cn/api/finduser/${newValue}`, function(result) {
    //         console.log(result)
    //     })
    // }
    
    // 写法二，改换成对象形式
    username: {
        immediate: true, // 要求组件加载时立刻触发监听器（也就是刚进入组件，手动触发一次）
        handler(newValue, oldValue) { // 监听函数
            console.log(newValue)
            // 输入项清空则不发请求
            if (!newValue) return 
            // 发起请求，检查用户名是否占用
            $.get(`https://www.escook.cn/api/finduser/${newValue}`, function(result) {
                console.log(result)
            })
        }
    },

    /**
     * deep属性，用来监听属性内的属性变化
     */
    // 写法一
    // form: {
    //     deep: true, // 开启深度监听
    //     handler(newValue, oldValue) {
    //         // 通过属性访问变化的值
    //         console.log(newValue.password)
    //     }
    // }
    
    // 写法二
    // 通过点属性的方式写法繁琐，简化写法
    'form.password'(newValue, oldValue) {
        console.log(newValue)
    }
  }
})
</script>
</body>
</html>

　　

 

posted @ 2022-05-07 10:03  emdzz  阅读(287)  评论(0)    收藏  举报