返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue组件实现首次加载就触发watch
  • 473
分享到

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

2024-04-02 19:04:59 473人浏览 安东尼
摘要

目录组件首次加载就触发watchwatch的初始立即执行组件首次加载就触发watch 首次加载就触发watch需要修改其immediate属性为true,其默认值为false wat

组件首次加载就触发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
  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue组件实现首次加载就触发watch

本文链接: https://lsjlt.com/news/153263.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue组件实现首次加载就触发watch
    目录组件首次加载就触发watchwatch的初始立即执行组件首次加载就触发watch 首次加载就触发watch需要修改其immediate属性为true,其默认值为false wat...
    99+
    2024-04-02
  • 怎么使用vue组件实现首次加载就触发watch
    这篇文章主要介绍“怎么使用vue组件实现首次加载就触发watch”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用vue组件实现首次加载就触发watch”文章能帮助大家解决问题。组件首次加载就触...
    99+
    2023-07-02
  • vue首次赋值不触发watch怎么办
    这篇文章将为大家详细讲解有关vue首次赋值不触发watch怎么办,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最近有个新需求,表单要求增量提交,但是身份证要求无则可提交,...
    99+
    2024-04-02
  • vant中list的使用以及首次加载触发两次解决问题
    目录vant中list使用及首次加载触发两次首次加载触发两次解决问题vant中list列表组件使用1. 基础结构3.methods定义方法 4.调用api渲染页面vant中...
    99+
    2022-11-13
    vant中list使用 首次加载触发两次 vant list首次加载触发
  • Vue如何实现异步加载about组件
    这篇文章主要介绍“Vue如何实现异步加载about组件”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue如何实现异步加载about组件”文章能帮助大家解决问题。异步加载about组件about.j...
    99+
    2023-07-04
  • Vue组件事件触发和监听实现源码解析
    目录正文Vue 的事件触发和监听源码分析ononceemitoff动手实现总结正文 通常我们在使用Vue的时候,会使用$emit和$on来触发和监听事件,但是有没有思考是如何实现的呢...
    99+
    2022-12-22
    Vue 组件事件触发监听 Vue 组件触发监听
  • vue中如何实现父组件触发事件改变子组件的值
    小编给大家分享一下vue中如何实现父组件触发事件改变子组件的值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!父组件向子组件通信业...
    99+
    2024-04-02
  • vant-list上拉加载onload事件触发多次问题及解决
    目录vant-list上拉加载onload事件触发多次场景一、基础用法二、List 的运行机制是什么?三、为什么 List 初始化后会立即触发 load 事件?四、为什么会连续触发 ...
    99+
    2023-01-17
    vant-list vant-list上拉加载 onload触发多次
  • vue如何开发一个加载Button组件
    本篇内容介绍了“vue如何开发一个加载Button组件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!组件背景点击按钮时请求一些接口数据,而为...
    99+
    2023-06-30
  • 微信小程序组件scroll-view滚动到底部多次触发加载如何解决?
    在 iOS 真机上,scroll-view 滚动时会多次触发 scrolltolower 事件的问题,可以设置一个“加载标识”(如 DisableTrigger)来避免重复请求下一页数据。具体做法为:...
    99+
    2023-09-06
    小程序
  • Vue首页界面加载优化实现方法详解
    目录1、路由懒加载2、js 资源异步加载3、图片懒加载4、组件分包懒加载-在视口才加载1、路由懒加载 问题: 项目在打包时会将首页与其他页面的资源打包到同一个资源文件,造成首页加载的...
    99+
    2024-04-02
  • vue在antDesign框架或elementUI框架组件native事件中触发2次问题
    目录vue在antDesign或elementUI组件native事件中触发2次运用ant-design-vue组件库,且在项目中遇到的问题难以改变的默认样式让通知提醒框的内容自动换...
    99+
    2024-04-02
  • Vue首屏加载过慢出现长时间白屏的实现
    目录需求场景1. 采用懒加载的方式(官网有所提及,这里就不做详细描述)2. webpack开启gzip压缩文件传输模式:3.依赖模块采用第三方cdn资源 4. 预渲染5.遇...
    99+
    2023-05-16
    Vue首屏加载过慢白屏 Vue首屏加载
  • vue实现加载页面自动触发函数(及异步获取数据)
    目录加载页面自动触发函数实例页面加载时,触发某个函数的方法解决方法如下加载页面自动触发函数 实例 methods:{ onCreate:async function() ...
    99+
    2024-04-02
  • vue实现组件值的累加
    本文实例为大家分享了vue实现组件值的累加的具体代码,供大家参考,具体内容如下 css代码: <style>         #myLit{             bo...
    99+
    2024-04-02
  • vue.js2.0中怎么实现父组件点击触发子组件
    今天就跟大家聊聊有关vue.js2.0中怎么实现父组件点击触发子组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。<body> ...
    99+
    2024-04-02
  • Vue中如何实现SPA初次进入加载动画
    这篇文章主要介绍“Vue中如何实现SPA初次进入加载动画”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中如何实现SPA初次进入加载动画”文章能帮助大家解决问题。在app挂载的div同级处写一个...
    99+
    2023-07-04
  • vue2组件如何实现懒加载
    这篇文章给大家分享的是有关vue2组件如何实现懒加载的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、 什么是懒加载懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。二、为什...
    99+
    2024-04-02
  • Vue组件库ElementUI实现表格加载树形数据教程
    ElementUI实现表格树形列表加载教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的...
    99+
    2024-04-02
  • Vue Router根据后台数据加载不同的组件实现
    目录实际项目中遇到的需求有一些不好的实现方式个人感觉比较好的实现方式功能已实现,但我又开始了新的思考最终方案——高阶组件实际项目中遇到的需求 同一个链接需要加载不同的页面组件。根据...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作