监听器案例
<!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>
