vue组件实现首次加载就触发watch

 更新时间:2022年07月02日 14:23:32   作者:cxy_pan0913  
这篇文章主要介绍了vue组件实现首次加载就触发watch方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

组件首次加载就触发watch

首次加载就触发watch需要修改其immediate属性为true,其默认值为false

watch:{
    "val":{
      immediate:true,//首次加载的时候执行函数
      deep:true,//深入观察数组值的变化,
      inputVal:function(){
 
      }
    }
  }

watch的初始立即执行

当 watch 一个变量的时候,初始化时并不会执行,如下面的例子,你需要在created的时候手动调用一次。

created() {
  this.fetchUserList();
},
watch: {
  searchText: 'fetchUserList',
}

上面这样的做法可以使用,但很麻烦,我们可以添加immediate属性,这样初始化的时候就会自动触发(不用再写created去调用了),然后上面的代码就能简化为:

watch: {
  searchText: {
    handler: 'fetchUserList',
    immediate: true
  }
}

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

相关文章

  • 对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍

    对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍

    今天小编就为大家分享一篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 关于Vue 3.0引入百度地图不兼容的解决办法

    关于Vue 3.0引入百度地图不兼容的解决办法

    这篇文章主要介绍了关于Vue 3.0引入百度地图不兼容的解决办法,本文通过实例代码给大家分享解决方法,需要的朋友可以参考下
    2022-08-08
  • Vue3中事件总线mitt的使用方式

    Vue3中事件总线mitt的使用方式

    mitt又称事务总线,是第三方插件,这篇文章主要为大家详细介绍了Vue3中事件总线mitt的使用方式,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-03-03
  • vue3+axios封装拦截器方式

    vue3+axios封装拦截器方式

    介绍了如何在Vue项目中使用Axios封装请求、配置拦截器,并在api.js中统一管理API接口,同时,也讲解了如何在vite.config.js中配置解决跨域问题,这些操作可以优化前端代码结构,提高开发效率
    2024-09-09
  • vue结合vue-electron创建应用程序小结

    vue结合vue-electron创建应用程序小结

    这篇文章主要介绍了vue结合vue-electron创建应用程序,本文给大家介绍了安装electron有两种方式,两种方式创建的项目结构大不相同,需要的朋友可以参考下
    2024-03-03
  • Vue3 框架Arco Design详解

    Vue3 框架Arco Design详解

    Arco Design 作为一款专为 Vue3 打造的企业级 UI 组件库,以其丰富的特性和卓越的性能,成为现代 Web 应用开发者值得关注的选择,这篇文章主要介绍了Vue3 框架Arco Design详解,需要的朋友可以参考下
    2024-08-08
  • 一文带你掌握Vue中的路由守卫

    一文带你掌握Vue中的路由守卫

    路由守卫(Route Guards)是 Vue Router 的一个功能,它允许我们在路由发生之前执行逻辑判断,这篇文章主要为大家介绍了Vue中路由守卫的具体应用,需要的可以了解下
    2024-03-03
  • 通过vue-cli3构建一个SSR应用程序的方法

    通过vue-cli3构建一个SSR应用程序的方法

    这篇文章主要介绍了通过vue-cli3构建一个SSR应用程序,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
    2018-09-09
  • axios请求的一些常见操作实战指南

    axios请求的一些常见操作实战指南

    axios是一个轻量的HTTP客户端,它基于XMLHttpRequest服务来执行 HTTP请求,支持丰富的配置,支持Promise,支持浏览器端和 Node.js 端,下面这篇文章主要给大家介绍了关于axios请求的一些常见操作,需要的朋友可以参考下
    2022-09-09
  • Element ui table表格内容超出隐藏显示省略号问题

    Element ui table表格内容超出隐藏显示省略号问题

    这篇文章主要介绍了Element ui table表格内容超出隐藏显示省略号问题,具有很好的参考价值,希望对大家有所帮助,
    2023-11-11

最新评论