使用组件实例的$watch()方法来命令式地创建一个侦听器;
它还允许你提前停止该侦听器
语法:this.$watch(data, method, object)
1. data:侦听的数据源,类型为String
2. method:回调函数,参数一新值,参数二旧值
3.object:配置
a. deep:深度侦听
b. immediate:创建时立即触发
c. flush: 'post':更改回调机制(DOM更新后)
- 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' })
- }
- }
-
- 账号:
-
- 薪资:
-
-
- 学生年龄:{{ student.age }}
-
- 学生年龄:
停止侦听器,需要自行停止侦听器,这时可以调用$watch() API 返回的函数
- export default {
- data: () => ({
- account: 'Abc', // 账号
- stopAccountWatch: null // 调用该函数,可以停止侦听账号数据源
- }),
- // 声明周期函数:页面成功渲染后
- mounted() {
- this.stopAccountWatch = this.$watch('account', (newData, oldData) => {
- console.log('账号的新旧值:')
- console.log(newData)
- console.log(oldData)
- })
- }
- }
-
- <template>
- 账号:<input type="text" v-model="account">
-
- <button @click="stopAccountWatch">停止侦听账号数据源button>
- template>