vue监视器@Watch创建执行immediate方式
更新时间：2024年08月07日 10:32:05 作者：天魔老师
这篇文章主要介绍了vue监视器@Watch创建执行immediate方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue监视器@Watch创建执行immediate
vue监视器@Watch的immediate参数，表示在watch中首次绑定的时候，是否执行handler函数，
1.值为true则表示在watch中声明的时候，就立即执行handler方法，
2.值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
async created() {
// await this.refreshMessageBody()
}
@Watch('message',{
immediate:true,
// immediate表示在watch中首次绑定的时候，是否执行handler，
// 值为true则表示在watch中声明的时候，就立即执行handler方法，
// 值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
})
async refreshMessageBody(){
console.log("message改变了");
await this.func1();
await this.func2();
}
vue监视属性（watch）
监视属性
监视属性watch：
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法：
- new Vue时传入watch属性
- 通过app.$watch监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监视</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第一种写法-->
<h2>今天天气很{{isHot ? '炎热':'凉爽'}}</h2>
<!--第二种写法：通过计算属性-->
<h2>今天天气很{{info}}</h2>
<!--绑定methods的方法-->
<button @click="change">点击切换天气</button>
<!--离谱写法：适用于简单测试-->
<button @click="isHot = !isHot">点击切换天气</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isHot: true
},
methods: {
change: function (){
this.isHot = !this.isHot
}
},
computed: {
info: {
get: function (){
if (this.isHot==true){
return '炎热'
}else{
return '凉爽'
}
},
set: function (){
this.isHot = !this.isHot
}
}
},
watch: {
//监视谁
isHot: {
//什么时候调用？当isHot改变
handler(newValue,oldValue) {
console.log('isHot被修改惹',newValue,oldValue)
},
//初始化时让handler调用一下
immediate: true
}
}
})
//可以替换上面的watch属性
app.$watch('isHot',{
//什么时候调用？当isHot改变
handler(newValue,oldValue) {
console.log('isHot被修改惹',newValue,oldValue)
},
//初始化时让handler调用一下
immediate: true
})
</script>
</body>
</html>深度监视
深度监视：
1.vue中的watch默认不监测对象内部值的改变（一层）
2.配置deep：true可以检测对象内部值改变（多层次）
备注：
1.vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以
2.使用watch时根据数据的具体结构，决定是否采用深度监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监视简写形式</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>今天天气很{{isHot ? '炎热':'凉爽'}}</h2>
<button @click="change">点击切换天气</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isHot: true,
numbers: {
a: 1,
b: 2
}
},
methods: {
change: function (){
this.isHot = !this.isHot
}
},
computed: {
info: {
get: function (){
if (this.isHot==true){
return '炎热'
}else{
return '凉爽'
}
},
set: function (){
this.isHot = !this.isHot
}
}
},
watch: {
//完整写法
// isHot: {
// // deep: true,深度监视
// handler(newValue,oldValue) {
// console.log('isHot被修改惹',newValue,oldValue)
// },
// //初始化时让handler调用一下
// // immediate: true
// },
//简写
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
})
//完整写法
app.$watch('isHot',{
//什么时候调用？当isHot改变
handler(newValue,oldValue) {
console.log('isHot被修改惹',newValue,oldValue)
},
//初始化时让handler调用一下
immediate: true
})
//不允许写箭头函数，会导致this指向的不是app，
// vue管理的函数(methods中的，computed，watch中的)都得写普通函数，
// 不能写es6里的箭头函数
app.$watch('isHot',function(newValue,oldValue) {
console.log('isHot被修改惹',newValue,oldValue)
})
</script>
</body>
</html>监视效果：
computed VS watch
计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
computed与watch区别
- computed能完成的功能，watch都可以完成
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
注意：
- 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vue实例对象或组件实例对象
- 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，这样this的指向才是vue的实例或组件的实例对象
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue表单提交点击事件只允许点击一次的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue data变量相互赋值后被实时同步的解决步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了VUE子组件的watch不被触发问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue3:vue2中protoType更改为config.globalProperties问题
这篇文章主要介绍了vue3:vue2中protoType更改为config.globalProperties问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在当今的数据驱动时代,数据可视化变得越来越重要,它能够帮助我们更直观地理解数据,从而做出更好的决策,在这篇博客中,我们将探索如何使用 Vue 和一些常见的图表库（如 Chart.js）来制作漂亮的数据可视化效果,需要的朋友可以参考下2024-10-10
ElementPlus是一款基于Vue3的UI组件库,提供了丰富的组件和响应式设计,易于使用和主题定制,在Vue3项目中集成ElementPlus,需要通过npm安装并引入组件,主题色可以通过修改样式文件进行全局设置,本文介绍Vue3集成Element-plus快速搭建页面框架,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了Vue3 实现验证码倒计时功能，倒计时的运用场景是获取手机验证码倒计时、获取邮箱验证码倒计时等场景，本文结合示例代码给大家详细讲解，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue.js 初体验之Chrome 插件开发实录 ,需要的朋友可以参考下2017-05-05
这篇文章主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-06-06
vue-resource 获取本地json数据404问题的解决
这篇文章主要介绍了vue-resource 获取本地json数据404问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论