Vue监听器简单使用及注意事项说明
作者：专注写bug
这篇文章主要介绍了Vue监听器简单使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
监听器，在官网中称为侦听器，个人还是喜欢称之为监听器。
官方文档如下：
编写简单demo
侦听器在项目中通常用于监听某个属性变量值的变化，并根据该变化做出一些处理操作。
最简单的案例如下所示：
<template>
<h1>侦听器</h1>
<p>{{ msg }}</p>
<button @click="changeMsgHandler">点击一下 就送屠龙宝刀</button>
</template>
<script>
export default{
data(){
return{
msg:"专注写 bug"
}
},
methods:{
changeMsgHandler(){
var newMessage = this.msg.split('').reverse().join('');
this.msg = newMessage;
}
},
// 侦听器
watch:{
// 监听器的名称必须与被监听的属性名称保持一致
msg(newVal,oldVal){
console.log("newVal===>"+newVal);
console.log("oldVal===>"+oldVal);
}
}
}
</script>页面初次加载时，页面中显示效果如下所示：
当按钮点击后，页面与控制台中的信息如下所示：
注意事项
对某个变量进行侦听变化时，需要使用到watch选项。
侦听器watch中的方法名必须与实际变量名称保值一致，否则会出现无法侦听的问题。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。