本文主要是介绍vue 侦听器 ---- 选项式 API，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
如果我们希望在代码逻辑中监听某个数据的变化，一旦监听到数据发生了变化就做一些业务处理的工作，比如说，用户在文本框中输入内容，会自动去判断该用户名是否可用。此时就需要用侦听器watch来完成了；
通俗来说，数据一旦发生了变化就通知侦听器， 从而针对数据的变化做特定的操作，而侦听器本质是一个函数，数据一旦发生变化，就通知侦听器绑定的函数，做一些事情。
<script>
// 在选项式 API 中，我们可以使用watch选项在每次响应式属性发生变化时触发一个函数
// 在watch选项中声明的对象即为对象式侦听器，对象名就是要侦听的数据源，其中对象里的handler函数为数据源发生变化后需要执行的代码块，其参数1为新数据值，参数2为旧数据值export default{data:()=>({age:30,maXage:30,emp:{"name":"Annie","sallary":3000},student: {name: 'Tom', // 名字age: 18 // 年龄 },account: 'James', // 账号password: '123456' // 密码}),watch:{/*** 函数式侦听器* 侦听 age 数据源是否发生变化* @param {*} newData 新值* @param {*} oldData 旧值*/age(newVal,oldVal){console.log("年龄的新值："+newVal,"年龄的旧值："+oldVal)},// 对象式侦听器// 在watch选项中声明的对象即为对象式侦听器，对象名就是要侦听的数据源，// 其中对象里的handler函数为数据源发生变化后需要执行的代码块，其参数1为新数据值，参数2为旧数据值maXage:{/*** 如果 age 数据源发生变化，将执行handler的代码片段* @param {*} newData 新值* @param {*} oldData 旧值*/handler(newData, oldData) {console.log('newData: ' + newData)console.log('oldData: ' + oldData)}},/*** 侦听 emp.name 数据源是否发生变化（通过采用字符串路径的形式来侦听对象中的某一个属性）* @param {*} newData 新值* @param {*} oldData 旧值*/'emp.name'(newVal,oldVal){console.log("姓名的新值："+newVal,"姓名的旧值："+oldVal)},/*** watch默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数，而嵌套属性的变化不会触发* 如果想侦听所有嵌套的变更，你需要深层侦听器deep: true选项* 深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大*/student: {// 深度侦听：如果改变侦听对象中的嵌套属性值，也会触发 handler 函数，但是 newData 和 oldData 是相等的// 只有改变侦听对象的值时，newData 和 oldData 才是不相等的deep: true, // watch 默认是懒执行的：仅当数据源变化时，才会执行回调；但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调，// 可采用immediate: true选项immediate: true, // 创建侦听器时立即执行一次该 handler 函数handler(newData, oldData) {console.log('学生的新旧值：')console.log(newData)console.log(oldData)}},password:{// 默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用；这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。handler(newData, oldData){console.log('密码的新旧值：')console.log(newData)console.log(oldData)console.log(document.getElementById('titlePassword').innerHTML)}},account:{// 如果想在侦听器回调中能访问被 Vue 更新之后的DOM，你需要指明flush: 'post'选项flush:'post',handler(newData, oldData){console.log('账号的新旧值：')console.log(newData)console.log(oldData)console.log(document.getElementById('titleAccount').innerHTML)}}},methods:{changeStudent(){// 如果改变侦听对象中的嵌套属性值，也会触发 handler 函数，但是 newData 和 oldData 是相等的this.student.name="Draw"this.student.age=58// 只有改变侦听对象的值时，newData 和 oldData 才是不相等的this.student = {name:"Json",age:18}}}}</script><template>年龄：<input type="number" v-model="age"><br>最大龄：<input type="number" v-model="maXage"><br>员工的名字：<input type="text" v-model="emp.name"><hr><h2>学生信息</h2>学生的名字：<input type="text" v-model="student.name"><br>学生的年龄：<input type="number" v-model="student.age"><br><button @click="changeStudent">改变学生信息</button><br><hr><h3 id="titleAccount">账号：<span>{{ account }}</span></h3>账号：<input type="text" v-model="account"><h3 id="titlePassword">账号：<span>{{ password }}</span></h3>密码：<input type="text" v-model="password">
</template>这篇关于vue 侦听器 ---- 选项式 API的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
