侦听器watch
函数名就是要侦听的元素的名字 传入的参数第一个是变化后的新值newval，第二个是变化前的旧值oldval
格式
- 方法格式的侦听器
无法在刚进入页面时自动触发，只有在侦听到变化才会触发 如果侦听的是对象，当对象的属性发生变化时，不会侦听到
- 对象格式的侦听器
通过immediate选项，可以让侦听器刚进入页面时自动触发 通过deep选项，使侦听器深度侦听到对象中属性的变化
设置侦听器
这是Vue实例中的data对象：
代码语言：javascript复制data:{
tem:'方法格式的侦听器', //input中的内容
already:[],
foo:{
name:'property of object',
age:13
}
}- 方法格式的侦听器
该方式实现的是，当input中内容变化时，触发侦听，侦听input中的内容（内容是与tem绑定好的），如果当前input中的内容不在already数组中，就添加到already中，否则弹出提示框该名称已存在
代码语言：javascript复制watch:{
tem(n){
if(this.already。indexOf(n)!==-1){
alert("It already exists")
}else{
this.already.push(n)
}
}
}
- 对象格式的侦听器
该方法实现的是，页面一旦载入就立即触发侦听，侦听foo对象name属性的变化。
代码语言：javascript复制watch:{
foo:{
// 自动触发，只能使用handler
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
// true表示侦听器立即触发（immediate默认为false）
immediate:true,
// true表示深度侦听，侦听对象属性的变化
deep:true
}
}
