网站开发 pdf,西安网站优化体验,天津网站开发平台,wordpress用户安全使用组件实例的$watch()方法来命令式地创建一个侦听器#xff1b; 它还允许你提前停止该侦听器 语法#xff1a;this.$watch(data, method, object) 1. data#xff1a;侦听的数据源#xff0c;类型为String 2. method#xff1a;回调函数#x…使用组件实例的$watch()方法来命令式地创建一个侦听器 它还允许你提前停止该侦听器 语法this.$watch(data, method, object) 1. data侦听的数据源类型为String 2. method回调函数参数一新值参数二旧值 3.object配置 a. deep深度侦听 b. immediate创建时立即触发 c. flush: post更改回调机制DOM更新后 script
export default {data: () ({account: Abc, // 账号emp: {name: Jack, // 名字salary: 7000 // 薪资},student: {name: Annie, // 名字age: 18 // 年龄}}),// 声明周期函数页面成功渲染后mounted() {// 通过组件的实例调用$watch函数来创建侦听器// 语法this.$watch(data, method, object)// 1. data侦听的数据源类型为String// 2. method回调函数参数一新值参数二旧值// 3. object配置// a. deep深度侦听// b. immediate创建时立即触发// c. flush: post更改回调机制DOM更新后this.$watch(account, (newData, oldData) {console.log(账号的新旧值)console.log(newData)console.log(oldData)})this.$watch(emp.salary, (newData, oldData) {console.log(薪资的新旧值)console.log(newData)console.log(oldData)}, { immediate: true })this.$watch(student, (newData, oldData) {console.log(学生的新旧值)console.log(newData)console.log(oldData)console.log(document.getElementById(titleAge).innerHTML)}, { deep: true, flush: post })}
}
/scripttemplate账号input typetext v-modelaccounthr薪资input typenumner v-modelemp.salaryhrh3 idtitleAge学生年龄span{{ student.age }}/span/h3学生年龄input typenumner v-modelstudent.age
/template
停止侦听器,需要自行停止侦听器这时可以调用$watch() API 返回的函数
script
export default {data: () ({account: Abc, // 账号stopAccountWatch: null // 调用该函数可以停止侦听账号数据源}),// 声明周期函数页面成功渲染后mounted() {this.stopAccountWatch this.$watch(account, (newData, oldData) {console.log(账号的新旧值)console.log(newData)console.log(oldData)})}
}
/scripttemplate账号input typetext v-modelaccountbutton clickstopAccountWatch停止侦听账号数据源/button
/template
