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
  }
}

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

您可能感兴趣的文章:

Vue3中#default=“scope”的使用
在Vue3中,我们经常会遇到需要处理列表渲染的情况,Vue3引入了一种新的语法,即#default=“scope”,本文就来介绍一下Vue3中#default=“scope”的使用,感兴趣的可以了解一下
2023-10-10
Vue3中Vuex的详细使用方法
在vue3.x中vuex调取值在html代码里可以直接使用vue2.x的方法,但是在js里与vue2.x就有了那么一丢丢的不同,下面这篇文章主要给大家介绍了关于Vue3中Vuex详细使用的相关资料,需要的朋友可以参考下
2022-07-07
在vue中如何使用Mock.js模拟数据
这篇文章主要介绍了在vue中如何使用Mock.js模拟数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue可视化表单设计器自定义组件使用方法
Vue前端开发中表单组件是排在前三的高频使用的组件,下面这篇文章主要给大家介绍了关于vue可视化表单设计器自定义组件使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
vuex实现的简单购物车功能示例
这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下
2019-02-02
vue3 组合式api中 ref 和$parent 的使用方法
vue3中，在组件中添加一个 component ref=“xxx” ，就可以在父组件中得到子组件的 dom 对象，以及虚拟的 dom 对象，有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了，这篇文章主要介绍了vue3组合式api中ref和$parent的使用,需要的朋友可以参考下
2023-09-09
vue页面使用阿里oss上传功能的实例（一）
本篇文章主要介绍了vue页面使用阿里oss上传功能的实例（一），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vue切换组件实现返回后不重置数据,保留历史设置操作
这篇文章主要介绍了Vue切换组件实现返回后不重置数据,保留历史设置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
详解Vue2.x-directive的学习笔记
这篇文章主要介绍了详解Vue2.x-directive的学习笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
vue3.0项目快速搭建的完整步骤记录
这篇文章主要给大家介绍了关于vue3.0项目快速搭建的相关资料,本文通过图文以及实例代码介绍的非常详细,对大家学习或者使用vue3.0具有一定的参考学习价值,需要的朋友可以参考下
2021-12-12