updated钩子函数实例化多次的问题

最新推荐文章于 2022-11-21 16:39:34 发布
最新推荐文章于 2022-11-21 16:39:34 发布
阅读量765 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html_996/article/details/105103343
版权
继上篇文章继续补充一下

上一篇：添加链接描述

  • 当我们的轮播需要添加 swiper-pagination 时，并且 添加一个数据双向绑定的 input 时， 我们会发现在我们改变 input 框里面的 value 时，我们的 swiper-pagination 按钮就不起作用了，原因是 updated 钩子函数被实例化多次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./base/swiper.min.css">
</head>
<body>
    <div id="app">
        
        <my-banner></my-banner>
    </div>

    <!--创建模板-->
    <template id="my-banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div 
                    class="swiper-slide"
                    v-for="banner in banners"
                >
                    <img width="100%" :src="banner.image" alt="">
                </div>
            </div>
			<div class="swiper-pagination"></div>
			<input type="text" v-model="msg">
			<p id="p">我是p标签 {{msg}}</p>
        </div>
    </template>

    <script src="./base/swiper.min.js"></script>
    <script src="./base/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script>
    <script>

        
        Vue.component("my-banner",{
            template:"#my-banner",
            data(){
                return {
                    banners:[],
					 msg:""
                }
            },
            created(){
                this.$http.get("./banners.json").then(res=>{ //1000s之后
                    // console.log(res.data.bannerList)
                    this.banners = res.data.bannerList
                })
            },
    
               updated(){
                    new Swiper(".swiper-container",{
                        loop:true ,
						pagination:{
						    el:".swiper-pagination"
						}
                    })
                }


        })

        new Vue({
            el:"#app"
        })
    </script>


</body>
</html>
  • 当我们不改变 input 里的 value 时 ，我们的轮播图还是能正常滑动的
    在这里插入图片描述
  • 当我们改变 input 的 value 时，我们 swiper-pagination 就不起作用了
    在这里插入图片描述
所以我们可以让 updated 钩子函数只实例化一次就可以了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入swiper的样式结构-->
    <link rel="stylesheet" href="./base/swiper.min.css">
</head>
<body>
    
    <div id="app">
        <!--调用my-banner组件-->
        <my-banner></my-banner>
    </div>

    <!--创建模板-->
    <template id="my-banner">
        <div class="swiper-container">  
            <div class="swiper-wrapper">
                <div 
                    class="swiper-slide"
                    v-for="banner in banners"
                >
                    <img width="100%" :src="banner.image" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <input type="text" v-model="msg">
            <p id="p">我是p标签 {{msg}}</p>
        </div>
    </template>

    <!--Swiper-->
    <script src="./base/swiper.min.js"></script>
    <script src="./base/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script>
    <script>

        //创建组件
        Vue.component("my-banner",{
            template:"#my-banner",  
            data(){
                return {
                    banners:[],
                    msg:""
                }
            },
           
            created(){
                console.log("created.....")
                this.$http.get("./banners.json").then(res=>{ 
                   
                    this.banners = res.data.bannerList
         })
            },
 updated(){
                if(!this.swiper){
                    this.swiper = new Swiper(".swiper-container",{
                        loop:true,
                        pagination:{
                            el:".swiper-pagination"
                        }
                    })
                }
            }
        })

        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

关于这个问题 Vue 中提供了 Vue.nextTick / this.$nextTick 解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./base/swiper.min.css">
</head>
<body>
    <div id="app">
        
        <my-banner></my-banner>
    </div>

    <!--创建模板-->
    <template id="my-banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div 
                    class="swiper-slide"
                    v-for="banner in banners"
                >
                    <img width="100%" :src="banner.image" alt="">
                </div>
            </div>
			<div class="swiper-pagination"></div>
			<input type="text" v-model="msg">
			<p id="p">我是p标签 {{msg}}</p>
        </div>
    </template>

    <script src="./base/swiper.min.js"></script>
    <script src="./base/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script>
    <script>

        
        Vue.component("my-banner",{
            template:"#my-banner",
            data(){
                return {
                    banners:[],
					 msg:""
                }
            },
            created(){
                this.$http.get("./banners.json").then(res=>{ 
                   
                    this.banners = res.data.bannerList
					
					
					
					this.$nextTick(()=>{
					   
					    new Swiper(".swiper-container",{
					        loop:true,
					        pagination:{
					            el:".swiper-pagination"
					        }
					    })
					})
                  
                })
            },
     })

        new Vue({
            el:"#app"
        })
    </script>


</body>
</html>

在这里插入图片描述

借我一份心动i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
11-20
因为mounted函数只会在html和模板渲染之后会加载一次，但是在子组件中只有第一次的数据显示是正常的，所以需要再增加一个updated函数，在更新之后就可以重新进行取值加载，完成数据的正常显示。 beforCreate（创建之前） Created（创建之后） beforMount（载入之前） Mounted（载入之后） beforUpdate（更新之前） Updated（更新之后） beforDestroy（销毁之前） Destroyed（销毁之后） activate（keep-alive组件激活时调用） deactivated（keep-alive组件停用时调用） errorCaptu
前端面试题 Vue 中的 生命函数(钩子函数)
m0_60265689的博客
09-23 1万+
一，生命周期(钩子函数) 的简介 生命周期函数 又叫 钩子函数, 像它的名字一样,这也是个函数,与其他 methods 中定义的函数不同的是,Vue 中已经规定好了他的触发条件,而这些不同的触发条件就是 一个 Vue 文件从初始化到删除关闭必定经历的一些时间点,而我们就可以通过这些时间点进行各种操作 常用的钩子函数分为四类: 初始化 beforeCreate created 挂载 beforeMount mounted 更新 bef...
VUE 的updated钩子函数被死循环一样无限调用
weixin_46473943的博客
11-21 1296
引起updated钩子函数被死循环一样无限调用的原因分析，主要在于在updated钩子函数里面不要对data里面的引用数据类型进行修改操作！
Vue生命周期总结（四个阶段，八个钩子函数）
小宇，要努力敲代码
10-25 3万+
生命周期就是组件或者实例，从创建到被销毁（初始化化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载）的一系列过程，我们称这是Vue的生命周期。
vue 指令应用多次时，其动态值更新时，update会执行多次
tdjqqq的博客
04-21 3311
前几天在开发时，心血来潮自己开发了一个v-loading指令，然后就应用到了页面中，我的页面有多处使用了该指令，但是令我EMO的时候也来了， 页面很简单，只有三块区域，基本相同，但是中间有个显示后台结果的div区，我就想着，用指令来整个遮盖效果，所以，三个区域的结果区都有v-loading。 v-loading指令代码如下，重点是update，也恰恰是它给我整emo了，因为，当我给v-loading重新赋值时，指令中的update居然执行了【3次】（发现问题是因为页面没有v-loading了，因为执
vue 中updated的使用
热门推荐
tangcc的博客
02-01 10万+
updated : function(){//什么时候 进updated方法？//只有事先设置好的data变量改变并且要在页面重新渲染{{}}完成之后,才会进到这个方法，光改变data但不渲染页面//是不会进来的 console.log("1==我会先执行"); this.$nextTick(function(){  //在下次 DOM 更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法...
vue生命周期钩子函数（详解及使用场景）
weixin_43734490的博客
03-05 9270
![1、beforeCreate （使用频率低） * 在实例创建以前调用 * 没有实例化，数据访问不到 2、 created （使用频率高） * 实例被创建完成后调用 * 能拿到数据 * 能修改数据， * 且修改数据不会触发updated beforeUpdate钩子函数 * 可以在这个钩子函数里发请求，访问后端接口拿数据 * 判断是否存在el，是否存在template，如果二者都有，以t...
详解Vue源码学习之callHook钩子函数
12-02
比如在实例初始化（_init）的时候调用callHook(vm, ‘beforeCreate’)和callHook(vm, ‘created’)。 这里的”beforeCreate”,”created”状态并非随意定义，而是来自于Vue内部的定义的生命周期钩子。 var ...
女朋友生日，不要礼物，非要我给她讲解VUE的生命周期钩子函数，最后直夸我讲的详细又透彻！
01-08
VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块。 注：在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期...
Date-updated.rar_date updated
09-21
信息日期的更新 ，以及信息编辑，信息日期的显示等相关代码
如何处理maven仓库中后缀LastUpdated文件
08-19
主要介绍了如何处理maven仓库中后缀LastUpdated文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue中周期函数被多次触发（vue中使用eventbus踩过的坑）
莫普斯
06-22 4270
感谢作者的分享一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。（我知道，小参数的时候可以通过路由的params或者query去传参数，或者大型数据可以用vuex来处理，很遗憾我到现在还没有做很大型的项目，所以还没有用过vuex，接下来会学习一下。）作者：Kather...
Vue进阶（八十二）：updated 应用详解
IT全栈 华强工作室
11-10 2万+
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 无论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更，都会触发虚拟 DOM 重新渲染和打补丁，并在之后调用 updated。 有个值得注意的地方，举例说明： 例子 <template> <div> <div v-for="(ite...
Vue 正确理解mounted、beforeUpdate、updated三个钩子函数的关系
wq_ocean_的博客
10-04 2万+
目录 官方图 理解beforeUpdate：视图层的数据改变时触发 beforeUpdate的测试 updated的测试 官方图 mounted表示vue实例挂载完成； beforeUpdate在data数据被改变后触发 updated表示更新DOM完成。 理解beforeUpdate：视图层的数据改变时触发 这里需要注意的是beforeUpdate是在data数据被改变后触发，这里的data数据改变如何理解，仅从字面上理解只要data数据值改变就会触发beforeUpdate..
vue生命周期钩子函数有哪些，分别什么时候触发?
kobezzZ的博客
08-05 1万+
vue生命周期即为一个组件从出生到死亡的一个完整周期，主要包括以下4个阶段：创建，挂载，更新，销毁 创建前：beforeCreate, 创建后:created 挂载前：beforeMount, 挂载后：mounted 更新前：beforeUpdate, 更新后：updated 销毁前：beforeDestroy, 销毁后：destroyed 我平时用的比较多的钩了是created和mount...
只实例化一个静态实例，避免重复创建实例
dk_0520的博客
12-03 1921
public class AIconbg : MonoBehaviour {public static Transform instanceTransform;//静态实例void OnDestroy() { instanceTransform = null;//切换场景时将引用删除，避免切回场景下次实例时报空 } } 在一级按钮下实例化二级按钮（二级按钮在每次切换一级按钮时只有
Vue 如何在页面渲染完后去操作dom，而且只执行一次
Corey
07-17 1万+
在接口请求成功的回调里使用 this.$nextTick(() =&gt;{ // 在这里面去获取DOM })。 在mounted生命周期，组件挂载成功，但还未渲染，自然获取不到相关的DOM节点。看你资料好像不是前端，举个更简单的例子，你在html中，把 console.log(document.querySelector('body'))写在body标签前面，代码执行时机先于页面渲染，...
mounted 钩子函数
最新发布
09-06
如果需要在组件更新时执行相应的操作，可以使用`updated`钩子函数。 总而言之，mounted钩子函数在Vue.js的组件生命周期中是一个非常重要的阶段。它提供了一个合适的时机来执行一些初始化和数据获取的操作，确保组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值