微网站免费软件商标查询网

使用组件实例的$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' })}
}
</script><template>账号：<input type="text" v-model="account"><hr>薪资：<input type="numner" v-model="emp.salary"><hr><h3 id="titleAge">学生年龄：<span>{{ student.age }}</span></h3>学生年龄：<input type="numner" v-model="student.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)})}
}
</script><template>账号：<input type="text" v-model="account"><button @click="stopAccountWatch">停止侦听账号数据源</button>
</template>