1. 侦听
1.1 侦听的两种方式
1.1.1 第一种
new Vue {
watch:{
需要侦听的属性:{
//这里面是侦听的属性
}
}
}
1.1.2 第二种
vue.$watch('需要侦听的属性',{
//这里是需要侦听的属性
})
1.1.3 在第一种方式的基础上在进行简写
这种简写的前提是没有多个属性,仅执行watch的handler属性
new vue{
,watch:{
需要绑定的属性( ){
//内容
}
}
}
1.1.4 在第二种方式的基础上进行简写
这种简写的前提是没有多个属性,仅执行watch的handler属性
vm.$watch('isHot',{
console.log('isHot被修改了',newValue,oldValue,this)
})
1.2 侦听的属性
1.2.1 handler
handler(newValue,oldValue)//两个属性
1.2.2 immediate
immediate:true //表示初始化时让handler调用一下
1.2.3 deep深度侦听
deep:true
vue默认深度侦听为false——deep:false,将deep设为true。
1.2.3.1 深度侦听的作用
上面的handler和immediate主要监听的是属性,那么如果这个属性是对象呢,想要监听这个对象里面的数值,那么就需要深度监听。
举例
<div id = "root">
<p>{{obj.a}}</p>
</div>
//想完成的任务是:实现对obj里面的a和b进行监听
new Vue({
el:'#root''
data:{
obj:{
a:123,
b:456,
}
},
watch:{
obj:{
deep:true,
handler(newValue,oldValue){
console.log("a change")
}
}
}
})
//想完成的任务:只实现对obj里面的a进行监听
watch:{
//监视多级结构中某个属性的变化
'obj.a':{
handler(){
console.log('a被改变了')
}
}
1.3 侦听属性和计算属性的区别
1.computed能完成的功能,watch都可以完成。
//用watch和计算机属性两种方式实现名字拼接改变
<!-- 准备好一个容器-->
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(val){
this.fullName = val + '-' + this.lastName
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
})
</script>
<script>
const vm = new Vue({
el:'#root',
data: {
firstName:'张',
lastName:'三',
},
computed:{
fullName:{
get(){
console.log('get被调用了');
return this.firstName + '-' + this.lastName;
},
// 在全名中改动原始数据——转换为数组
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
<script>
const vm = new Vue({
el:'#root',
data: {
firstName:'张',
lastName:'三',
fullName:'张-三'
},
// watch:{
// firstName(val){
// this.fullName = val + '-' + this.lastName
// },
// lastName(val){
// this.fullName = this.firstName + '-' + val
// }
// }
//watch能实现延时计时器,但是计算机属性不行
watch:{
firstName(val){
setTimeout(()=>{
console.log(this)
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
})
</script>
⭐两个重要的小原则:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。