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的实例或组件的实例对象

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

uni-app中使用ECharts配置四种不同的图表(示例详解)
在uni-app中集成ECharts可以为我们的应用提供强大的图表功能,我们详细说一下如何在uni-app中使用ECharts,并配置四种不同的图表,感兴趣的朋友跟随小编一起看看吧
2024-01-01
vite打包只生成了一个css和js文件问题的解决方法
今天整了一个项目,试了下打包,发下打包后只生成了一个css文件,和一个js文件,这样肯定是不行的,因为这样这个文件的包大小很大,第一次访问会导致白屏问题,所以本文给大家介绍了vite打包只生成了一个css和js文件问题的解决方法,需要的朋友可以参考下
2024-05-05
手把手教你创建vue3项目的最佳方式
如今的Vue3已经势不可挡,当然搭建一个全新的Vue3项目也有了全新的方式,下面这篇文章主要给大家介绍了关于如何手把手教你创建vue3项目的最佳方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
手拉手教你如何处理vue项目中的错误
在项目开发中经常遇到各种报错,每次总是通过这样或那样的办法解决掉,这篇文章主要给大家介绍了关于如何处理vue项目中错误的相关资料,需要的朋友可以参考下
2022-06-06
vue项目部署到非根目录下的问题及解决
这篇文章主要介绍了vue项目部署到非根目录下的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue实现网页首屏加载动画及页面内请求数据加载loading效果
Loading加载动画组件看起来很简单不重要,实际上它是保证用户留存的关键一环,下面这篇文章主要给大家介绍了关于Vue实现网页首屏加载动画及页面内请求数据加载loading效果的相关资料,需要的朋友可以参考下
2023-02-02
解决vue3项目打包后部署后某些静态资源图片不加载问题
这篇文章主要给大家介绍了如何解决vue3项目打包后部署后某些静态资源图片不加载问题,文中通过图文结合的方式讲解的非常详细,有需要的朋友可以参考下
2024-05-05
vue中 el-table每个单元格包含多个数据项处理
vue项目中,我们需要在el-table中显示数组数据,有的时候,需要在一个单元格中显示多条数据,如何实现呢,对vue el-table单元格相关知识感兴趣的朋友一起看看吧
2023-11-11
基于Vue框架vux组件库实现上拉刷新功能
这篇文章主要为大家详细介绍了基于Vue框架vux组件库实现上拉刷新功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Vue3项目刚创建就报错的问题及解决
这篇文章主要介绍了Vue3项目刚创建就报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10