vue的watch中的immediate什么意思

最新推荐文章于 2025-01-03 10:47:15 发布

原创最新推荐文章于 2025-01-03 10:47:15 发布 · 2.1w 阅读

31 ·

CC 4.0 BY-SA版权

项目专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Vue.js框架中watch的immediate选项的作用及其使用场景。通过具体实例解释了如何利用immediate选项使监听器在页面加载时立即执行一次。

部署运行你感兴趣的模型镜像

vue的watch中的immediate什么意思

$watch() 监听某个值(双向数据绑定)的变化, 一旦发生变化, 就调用引号里的方法, 从而达到change事件监听的效果.

它的值包括选项的对象,选项对象有

handler: 其值是一个回调函数, 即监听到变化时应该执行的函数
deep: 其值是true或false, 确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到)
*immediate: 其值是true或false,确认是否以当前的初始值执行handler的函数.

immediate:true; 立即执行,当刷新页面时会立即执行一次handler函数

使用场景:
不加immediate:true; 在tab切换时,你已经选中了2-1,当你刷新页面时,选项会回到默认位置1-1
加immediate:true; 在tab切换时,你已经选中了2-1,当你刷新页面时,选项仍在2-1的位置

watch: {
    $route: {
         // 监听路由参数
         handler(){
             const {classify} = this.$route.query;
             if(classify){
                 this.classifyName = classify[0]; //一级和二级的绑定
                 this.classifyType = classify;
                 this.getMenus();
             }
             
         },
         immediate:true, //立即执行
     }
 },