JavaScript计算属性与监视(侦听)属性的使用
监视属性(watch)
watch监视(侦听)器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
监视的两种方法
通过new Vue时传入watch配置：
<div id="root">
<input type="text" v-model="name">
</div>
<script class="lazy" data-src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#root',
data:{
name:''
},
//所有的侦听器，都应该被定义到watch节点下
watch:{
// 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
//newVal是“变化后的新值”，oldVal是“变化之前旧值”
name(newVal,oldVal){ //监听name值的变化
console.log("监听到了新值"+newVal, "监听到了旧值"+oldVal);
}
}
})
</script>
通过vm.$watch监视：
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script class="lazy" data-src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
})
vm.$watch('info',{
handler(newVal,oldVal){
console.log('天气被修改了', newVal, oldVal);
}
})
</script>
immediate选项
默认情况下，组件在初次加载完毕后不会调用watch侦听器，如果想让watch侦听器立即被调用，则需要使用immediate选项，immediate的作用是控制侦听器是否自动触发一次，选项的默认值为：false
<div id="root">
<input type="text" v-model="name">
</div>
<script class="lazy" data-src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#root',
data:{
name:'admin'
},
watch:{
//定义对象格式的侦听器
name:{
handler(newVal,oldVal){
console.log(newVal, oldVal);
},
immediate:true
}
}
})
</script>
深度监视
如果watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项，开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”。
<div id="root">
<input type="text" v-model="info.name">
</div>
<script class="lazy" data-src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#root',
data:{
info:{
name:'admin'
}
},
watch:{
info: {
handler(newVal){
console.log(newVal);
},
//开启深度监听
deep:true
}
}
})
</script>
如果想要侦听的对象是子属性的变化，则必须包裹一层单引号。
watch:{
"info.name"(newVal){
console.log(newVal);
}
}
总结：
1）Vue中的watch默认不监测对象内部值的改变(一层)
2）配置deep:true可以监测对象内部值改变(多层)
3）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
4）使用watch时根据数据的具体结构，决定是否采用深度监视
watch能开启异步任务，案例如下：
<div id="root">
<input type="text" v-model="firstname"><br>
<input type="text" v-model="lastname"><br>
全名：<span>{{fullname}}</span>
</div>
<script class="lazy" data-src="/vue/vue.js"></script>
<script>
const vm = new Vue({
el:"#root",
data:{
firstname:'张',
lastname:'三',
fullname:'张-三'
},
//watch能开启异步任务
watch:{
firstname(val){
setTimeout(()=>{
this.fullname = val + '-' + this.lastname
},1000)
},
lastname(val){
this.fullname = this.firstname+'-'+val
}
}
})
</script>
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
隐性原则：
1.被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2.不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。
【相关推荐：JavaScript视频教程、web前端开发】
以上就是JavaScript计算属性与监视(侦听)属性的使用的详细内容，更多请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
