精华内容
下载资源
问答
  • 通常我们在父组件中的mounted中执行initMap()来初始化地图对象(其他钩子函数中执行initMap()将不会渲染出地图),而在上面的测试中我们可以看到子组件的mounted要比父组件的mounted先执行,导致子组件中获取的map...

    参考:https://blog.csdn.net/csdn_yudong/article/details/113035397 

     结果:

    通常我们在父组件中的mounted中执行initMap()来初始化地图对象(其他钩子函数中执行initMap()将不会渲染出地图),而在上面的测试中我们可以看到子组件的mounted要比父组件的mounted先执行,导致子组件中获取的map为空对象。因此现在我们要考虑一种方式,可以先执行父组件的mounted,后执行子组件的mounted(只有这样子组件中才能获取父组件传过来的Map对象)。

      beforeMount() {
        // _isMounted是当前实例mouned()是否执行 此时为false
        window.parentMounted = this._isMounted;
      },
      mounted() {
        //父组件中初始化地图对象map
        //this.initMap();//在这里执行初始化操作
        // _isMounted是当前实例mouned()是否执行 此时为true
        window.parentMounted = this._isMounted;
      },

     

      mounted() {
        let pMountedTimer = {}; //定时器
        pMountedTimer = setInterval(() => {
          if (window.parentMounted) {
            //在这里执行初始化
            this.addDrawLayer();
    
            clearInterval(pMountedTimer); //清除定时器
          }
        }, 1000);
      },

    此外,还可以先不加载子组件,即最开始先把子组件的v-if设为false,想使用子组件时直接把子组件v-if设为true即可

    展开全文
  • Vue父子组件生命周期 转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ... Vue生命周期 钩子函数和组件传值 Vue生命周期 钩子函数 ...

    加载渲染过程

    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

    更新过程

    父beforeUpdate->子beforeUpdate->子updated->父updated

    销毁过程

    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

    补充钩子函数的执行顺序

    beforeCreate

    created

    beforeMount

    mounted

    beforeUpdate

    updated

    activated

    deactivated

    beforeDestroy

    destroyed

    errorCaptured

    总结:

    1.beforeCreate执行时:data和el均未初始化,值为undefined

    2.created执行时:Vue 实例观察的数据对象data已经配置好,已经可以得到data的值,但Vue 实例使用的根 DOM 元素el还未初始化

    3.beforeMount执行时:data和el均已经初始化,但此时el并没有渲染进数据,el的值为“虚拟”的元素节点

    4.mounted执行时:此时el已经渲染完成并挂载到实例上

    5.beforeUpdate和updated触发时,el中的数据都已经渲染完成,但只有updated钩子被调用时候,组件dom才被更新。

    思考:

    1.在created钩子中可以对data数据进行操作,这个时候可以进行数据请求将返回的数据赋给data

    2.在mounted钩子对挂载的dom进行操作,此时,DOM已经被渲染到页面上。

    3.虽然updated函数会在数据变化时被触发,但却不能准确的判断是那个属性值被改变,所以在实际情况中用computed或match函数来监听属性的变化,并做一些其他的操作。

    4.所有的生命周期钩子自动绑定 this 上下文到实例中,所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是导致this指向父级。

    5.在使用vue-router时有时需要使用来缓存组件状态,这个时候created钩子就不会被重复调用了,如果我们的子组件需要在每次加载或切换状态的时候进行某些操作,可以使用activated钩子触发。

    Vue生命周期钩子函数加载顺序的理解

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

    Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

    Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

    vue 页面回退mounted函数不执行的问题及解决方法

    前言 最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新 经过一番面向百度研究,终于找到了问题所在.接下来就记录一下这 ...

    VueRouter和Vue生命周期(钩子函数)

    一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

    unity3D技术之事件函数的执行顺序[转]

    unity3D技术之事件函数的执行顺序 转自http://www.yxkfw.com/?p=13703   在unity的脚本,有大量的脚本执行按照预先确定的顺序执行的事件函数.此执行顺序说明如下: ...

    vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

    vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

    一个故事讲懂vue父子组件传值

    作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...

    随机推荐

    keytool的使用

    1. 创建数字证书 keytool -genkey -v -alias scent -dname "CN=John,OU=MNG,O=Corp,L=Hangzhou,ST=Zhejiang, ...

    C++和python使用struct传输二进制数据结构来实现

    网络编程问题往往涉及二进制数据的传输.在C++经常使用的传输是文本字符串和分组结构. 假设该数据可以预先送入连续的内存区域,然后让send函数来获得的第一个地址,这一块连续的内存区就能完成传输数据.文 ...

    Java-hibernate的映射文件

    Hibernate 需要知道怎样去加载(load)和存储(store)持久化类的对象.这正是 Hibernate 映 射文件发挥作用的地方.映射文件告诉 Hibernate 它应该访问数据库(data ...

    IOS开发-UI学习-delegate(代理)的使用,键盘消失

    代理是IOS开发中用到的一种设计模式.今天做了一个代理的小练习: 以下项目实现了两个页面之间的相互切换,并且在切换页面的时候完成了从一个页面往另一个页面的传值.从主页面往其他页面传值是容易的,但是反过 ...

    将常用的Android adb shell 命令行封装为C#静态函数

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 简介:adb命令是常用的Android命令行,自动化.代码调试.手工排查问题都会用的到,这里将常用的一些命令行封装 ...

    Leetcode_12_Integer to Roman

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42744649 Given an integer, conv ...

    P1967 货车运输

    P1967 货车运输最大生成树+lca+并查集 #include #include #include #inclu ...

    Linux环境变量设置/etc/profile、/etc/bashrc、~/.profile、~/.bashrc区别

    登入系统读取步骤: 当登入系统时候获得一个shell进程时,其读取环境设定档有三步 : 1.首先读入的是全局环境变量设定档/etc/profile,然后根据其内容读取额外的设定的文档,如 /etc/p ...

    u-boot全面分析

    uboot主Makefile分析1 uboot住Makefile分析参考:https://www.2cto.com/kf/201607/522424.html uboot version确定(Make ...

    图解http学习笔记【一】

    不想单纯的把书里的知识点罗列一遍 这周,我们的安全代码终于改完了.我在微信上报了个叫 一修读书的课程,现在已经听了6天.感觉并不是很神奇,聊胜于无.倒是趁着当当搞活动买回来好几本书,其中就有这本图解h ...

    展开全文
  • 前言说到Vue钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该...

    前言

    说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢...

    Vue-Router导航守卫

    有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。

    为此我们有很多种方法可以植入路由的导航过程: 全局的, 单个路由独享的, 或者组件级的 , 推荐优先阅读官方路由文档

    全局守卫

    vue-router全局有三个守卫:

    router.beforeEach 全局前置守卫 进入路由之前

    router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用

    router.afterEach 全局后置钩子 进入路由之后

    使用方法:

    // main.js 入口文件

    import router from './router' ; // 引入路由

    router . beforeEach (( to , from , next ) => {

    next ();

    });

    router . beforeResolve (( to , from , next ) => {

    next ();

    });

    router . afterEach (( to , from ) => {

    console . log ( 'afterEach 全局后置钩子' );

    });

    to,from,next 这三个参数:

    to和from是 将要进入和将要离开的路由对象 ,路由对象指的是平时通过this.$route获取到的路由对象。

    next:Function这个参数是个函数,且 必须调用,否则不能进入路由 (页面空白)。

    next() 进入该路由。

    next(false): 取消进入路由,url地址重置为from路由地址(也就是将要离开的路由地址)。

    next 跳转新路由,当前的导航被中断,重新开始一个新的导航。

    我们可以这样跳转:next('path地址') 或者 next({path:''})或者 next({name:''})且允许设置诸如 replace: true、name: 'home' 之类的选项 以及你用在router-link或router.push的对象选项。

    路由独享守卫

    如果你不想全局配置守卫的话,你可以为某些路由单独配置守卫:

    const router = new VueRouter({

    routes : [

    {

    path : '/foo' ,

    component : Foo ,

    beforeEnter : ( to , from , next ) => {

    // ...

    }

    }

    ]

    })

    路由组件内的守卫:

    beforeRouteEnter 进入路由前

    beforeRouteUpdate (2.2) 路由复用同一个组件时

    beforeRouteLeave 离开当前路由时

    文档中的介绍:

    beforeRouteEnter (to, from, next) {

    },

    beforeRouteUpdate ( to , from , next ) {

    // 在当前路由改变,但是该组件被复用时调用 可以访问组件实例 `this`

    },

    beforeRouteLeave ( to , from , next ) {

    // 导航离开该组件的对应路由时调用,可以访问组件实例 `this`

    }

    beforeRouteEnter访问this

    因为钩子在组件实例还没被创建的时候调用,所以不能获取组件实例 this ,可以通过传一个回调给 next 来访问组件实例 。

    但是 回调的执行时机在mounted后面 ,所以在我看来这里对this的访问意义不太大,可以放在 created 或者 mounted 里面。

    beforeRouteEnter (to, from, next) {

    console . log ( '在路由独享守卫后调用' );

    next ( vm => {

    // 通过 `vm` 访问组件实例`this` 执行回调的时机在mounted后面,

    })

    }

    beforeRouteLeave:

    导航离开该组件的对应路由时调用,我们用它来禁止用户离开,比如还未保存草稿,或者在用户离开前,将 setInterval 销毁,防止离开之后,定时器还在调用。

    beforeRouteLeave (to, from , next) {

    if ( 文章保存 ) {

    next (); // 允许离开或者可以跳到别的路由 上面讲过了

    } else {

    next ( false ); // 取消离开

    }

    }

    关于钩子的一些知识:

    路由钩子函数的错误捕获

    如果我们在全局守卫/路由独享守卫/组件路由守卫的钩子函数中有错误,可以这样捕获:

    router.onError(callback => {

    // 2.4.0新增 并不常用,了解一下就可以了

    console . log ( callback , 'callback' );

    });

    在路由文档中还有更多的实例方法:动态添加路由等,有兴趣可以了解一下。

    跳转死循环,页面永远空白

    我了解到的,很多人会碰到这个问题,来看一下这段伪代码:

    router.beforeEach((to, from, next) => {

    if ( 登录 ){

    next ()

    } else {

    next ({ name : 'login' });

    }

    });

    看逻辑貌似是对的,但是当我们跳转到 login 之后,因为此时还是未登录状态,所以会一直跳转到 login 然后死循环,页面一直是空白的,所以:我们需要把判断条件稍微改一下。

    if(登录 || to.name === 'login'){ next() } //登录,或者将要前往login页面的时候,就允许进入路由

    全局后置钩子的跳转:

    文档中提到因为router.afterEach不接受 next 函数所以也不会改变导航本身,意思就是只能当成一个钩子来使用,但是我自己在试的时候发现,我们可以通过这种形式来实现跳转:

    // main.js 入口文件

    import router from './router' ; // 引入路由

    router . afterEach (( to , from ) => {

    if ( 未登录 && to . name !== 'login' ) {

    router . push ({ name : 'login' }); // 跳转login

    }

    });

    额,通过router.beforeEach也完全可以实现且更好,我就骚一下。

    完整的路由导航解析流程(不包括其他生命周期):

    触发进入其他路由。

    调用要离开路由的组件守卫 beforeRouteLeave

    调用局前置守卫: beforeEach

    在重用的组件里调用 beforeRouteUpdate

    调用路由独享守卫 beforeEnter 。

    解析异步路由组件。

    在将要进入的路由组件中调用 beforeRouteEnter

    调用全局解析守卫 beforeResolve

    导航被确认。

    调用全局后置钩子的 afterEach 钩子。

    触发DOM更新( mounted )。

    执行 beforeRouteEnter 守卫中传给 next 的回调函数

    你不知道的keep-alive[我猜你不知道]

    在开发Vue项目的时候,大部分组件是没必要多次渲染的,所以Vue提供了一个内置组件 keep-alive 来 缓存组件内部状态,避免重新渲染 。

    文档:和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

    用法:

    缓存动态组件:

    包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,此种方式并无太大的实用意义。

    < keep - alive >

    < component : is = "view" > component >

    keep - alive >

    < keep - alive >

    < comp - a v - if = "a > 1" > comp - a >

    < comp - b v - else > comp - b >

    keep - alive >

    缓存路由组件:

    使用 keep-alive 可以将所有路径匹配到的路由组件都缓存起来,包括路由组件里面的组件, keep-alive 大多数使用场景就是这种。

    < router - view > router - view >

    keep - alive >

    生命周期钩子:

    这篇既然是Vue钩子函数的专场,那肯定要扣题呀~

    在被 keep-alive 包含的组件/路由中,会多出两个生命周期的钩子: activated 与 deactivated 。

    文档:在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 树内的 所有嵌套组件 中触发。

    activated 在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用。

    activated调用时机:

    第一次进入缓存路由/组件,在 mounted 后面, beforeRouteEnter 守卫传给 next 的回调函数之前调用:

    beforeMount=> 如果你是从别的路由/组件进来(组件销毁destroyed/或离开缓存deactivated)=>

    mounted=> activated 进入缓存组件 => 执行 beforeRouteEnter回调

    因为组件被缓存了,再次进入缓存路由/组件时,不会触发这些钩子:

    beforeCreate created beforeMount mounted 都不会触发。

    所以之后的调用时机是:

    组件销毁destroyed/或离开缓存deactivated => activated 进入当前缓存组件

    => 执行 beforeRouteEnter回调

    组件缓存或销毁,嵌套组件的销毁和缓存也在这里触发

    deactivated:组件被停用(离开路由)时调用

    使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了。

    这个钩子可以看作 beforeDestroy 的替代,如果你缓存了组件,要在组件销毁的的时候做一些事情,你可以放在这个钩子里。

    如果你离开了路由,会依次触发:

    组件内的离开当前路由钩子beforeRouteLeave =>  路由前置守卫 beforeEach =>

    全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也等于是缓存路由)

    如果离开的组件没有缓存的话 beforeDestroy会替换deactivated

    如果进入的路由也没有缓存的话  全局后置钩子afterEach=>销毁 destroyed=> beforeCreate等

    那么,如果我只是想缓存其中几个路由/组件,那该怎么做?

    缓存你想缓存的路由:

    Vue2.1.0之前:

    想实现类似的操作,你可以:

    配置一下路由元信息

    创建两个 keep-alive 标签

    使用 v-if 通过路由元信息判断缓存哪些路由。

    < router - view v - if = "$route.meta.keepAlive" >

    router - view >

    keep - alive >

    < router - view v - if = "!$route.meta.keepAlive" >

    router - view >

    //router配置

    new Router ({

    routes : [

    {

    path : '/' ,

    name : 'home' ,

    component : Home ,

    meta : {

    keepAlive : true // 需要被缓存

    }

    },

    {

    path : '/:id' ,

    name : 'edit' ,

    component : Edit ,

    meta : {

    keepAlive : false // 不需要被缓存

    }

    }

    ]

    });

    Vue2.1.0版本之后:

    使用路由元信息的方式,要多创建一个 router-view 标签,并且每个路由都要配置一个元信息,是可以实现我们想要的效果,但是过于繁琐了点。

    幸运的是在Vue2.1.0之后,Vue新增了两个属性配合 keep-alive 来有条件地缓存 路由/组件。

    新增属性:

    include :匹配的 路由/组件 会被缓存

    exclude :匹配的 路由/组件 不会被缓存

    include 和 exclude 支持三种方式来有条件的缓存路由:采用逗号分隔的字符串形式,正则形式,数组形式。

    正则和数组形式,必须采用 v-bind 形式来使用。

    缓存组件的使用方式:

    < keep - alive include = "a,b" >

    < component : is = "view" > component >

    keep - alive >

    < keep - alive : include = "/a|b/" >

    < component : is = "view" > component >

    keep - alive >

    < keep - alive : include = "['a', 'b']" >

    < component : is = "view" > component >

    keep - alive >

    但更多场景中,我们会使用keep-alive来缓存路由:

    < router - view > router - view >

    keep - alive >

    匹配规则:

    首先匹配组件的name选项,如果 name 选项不可用。

    则匹配它的 局部注册名称 。 (父组件 components 选项的键值)

    匿名组件,不可匹配。

    比如路由组件没有 name 选项,并且没有注册的组件名。

    只能匹配当前被包裹的组件, 不能匹配更下面嵌套的子组件 。

    比如用在路由上,只能匹配路由组件的 name 选项,不能匹配路由组件里面的嵌套组件的 name 选项。

    文档: 不会在函数式组件中正常工作 ,因为它们没有缓存实例。

    exclude 的优先级大于 include

    也就是说:当 include 和 exclude 同时存在时, exclude 生效, include 不生效。

    < router - view > router - view >

    keep - alive >

    当组件被exclude匹配,该组件将不会被缓存,不会调用activated 和 deactivated。

    组件生命周期钩子:

    关于组件的生命周期,是时候放出这张图片了:

    这张图片已经讲得很清楚了,很多人这部分也很清楚了,大部分生命周期并不会用到,这里提一下几点:

    ajax请求最好放在 created 里面 ,因为此时已经可以访问 this 了,请求到数据就可以直接放在 data 里面。

    这里也碰到过几次,面试官问:ajax请求应该放在哪个生命周期。

    关于dom的操作要放在 mounted 里面 ,在 mounted 前面访问dom会是 undefined 。

    每次进入/离开组件都要做一些事情,用什么钩子:

    不缓存:

    进入的时候可以用 created 和 mounted 钩子,离开的时候用 beforeDestory 和 destroyed 钩子, beforeDestory 可以访问 this , destroyed 不可以访问 this 。

    缓存了组件:

    缓存了组件之后,再次进入组件不会触发 beforeCreate 、 created 、 beforeMount 、 mounted , 如果你想每次进入组件都做一些事情的话,你可以放在 activated 进入缓存组件的钩子中 。

    同理:离开缓存组件的时候, beforeDestroy 和 destroyed 并不会触发,可以使用 deactivated 离开缓存组件的钩子来代替。

    触发钩子的完整顺序:

    将路由导航、 keep-alive 、和组件生命周期钩子结合起来的,触发顺序,假设是从a组件离开,第一次进入b组件:

    beforeRouteLeave :路由组件的组件离开路由前钩子,可取消路由离开。

    beforeEach : 路由全局前置守卫,可用于登录验证、全局路由loading等。

    beforeEnter : 路由独享守卫

    beforeRouteEnter : 路由组件的组件进入路由前钩子。

    beforeResolve : 路由全局解析守卫

    afterEach :路由全局后置钩子

    beforeCreate :组件生命周期,不能访问 this 。

    created :组件生命周期,可以访问 this ,不能访问dom。

    beforeMount :组件生命周期

    deactivated : 离开缓存组件a,或者触发a的 beforeDestroy 和 destroyed 组件销毁钩子。

    mounted :访问/操作dom。

    activated :进入缓存组件,进入a的嵌套子组件(如果有的话)。

    执行beforeRouteEnter回调函数next。

    结语

    Vue提供了很多钩子,但很多钩子我们几乎不会用到,只有清楚这些钩子函数的触发顺序以及背后的一些限制等,这样我们才能够正确的使用这些钩子,希望看了本文的同学,能对这些钩子有更加清晰的认识,使用起来更加得心应手。

    总结

    以上所述是小编给大家介绍的Vue 的钩子函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • vue钩子函数

    千次阅读 2021-01-12 01:18:24
    钩子函数通过上述测试我们可以知道在beforecreate阶段,对浏览器来说,整个渲染流程尚未开始或者说准备开始,对vue来说,实例尚未被初始化,data observer和 event/watcher也还未被调用,在此阶段,对data、methods...

    钩子函数

    通过上述测试我们可以知道

    在beforecreate阶段,对浏览器来说,整个渲染流程尚未开始或者说准备开始,对vue来说,实例尚未被初始化,data observer和 event/watcher也还未被调用,在此阶段,对data、methods或文档节点的调用现在无法得到正确的数据。

    在created阶段,对浏览器来说,渲染整个HTML文档时,dom节点、css规则树与js文件被解析后,但是没有进入被浏览器render过程,上述资源是尚未挂载在页面上,也就是在vue生命周期中对应的created 阶段,实例已经被初始化,但是还没有挂载至$el上,所以我们无法获取到对应的节点,但是此时我们是可以获取到vue中data与methods中的数据的

    在beforecreate阶段,实际上与created阶段类似,节点尚未挂载,但是依旧可以获取到data与methods中的数据。

    在mounted阶段,对浏览器来说,已经完成了dom与css规则树的render,并完成对render tree进行了布局,而浏览器收到这一指令,调用渲染器的paint()在屏幕上显示,而对于vue来说,在mounted阶段,vue的template成功挂载在$el中,此时一个完整的页面已经能够显示在浏览器中,所以在这个阶段,即可以调用节点了(关于这一点,在笔者测试中,在mounted方法中打断点然后run,依旧能够在浏览器中看到整体的页面)。

    以上参考自https://segmentfault.com/a/1190000020058583?utm_source=tag-newest

    nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数new Vue({

    el: '#app',

    data: {

    totalMoney: 0,

    productList: []

    },

    filters: {

    },

    mounted: function() {

    //这个是钩子函数

    //如果cartView函数要执行,必须先执行钩子函数

    //这个钩子函数完成了对cratView函数的调用

    //应该注意的是,使用mounted 并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入 Vue.nextTick/vm.$nextTick

    this.$nextTick(function () {

    this.cartView()

    })

    })

    },

    methods: {

    //这个是要执行的函数

    cartView: function() {

    var _this = this;

    this.$http.get("data/cartData.json", {"id": 123}).then(function(res) {

    _this.productList = res.body.result.list;

    _this.totalMoney = res.body.result.totalMoney;

    });

    }

    }

    }

    });

    这段代码参考自https://www.cnblogs.com/zxyzm/p/10644961.html

    展开全文
  • beforeRouteEnter:(to, from, next) => { console.log("准备... console.log("进入路由后要调用的函数") ); }, beforeRouteLeave:(to, from, next) => { console.log("准备离开这个路由"); next( cons.
  • 正如其名,vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的、单个路由独享的、或者组件级的。一、全局钩子你可以使用router.beforeEach注册一个...
  • Vue钩子函数

    2020-12-21 19:07:20
    vue自定义指令的钩子函数 bind : 让开发者在将自定义指令绑定到dom元素上时 执行自定义逻辑 inserted : 让开发者在元素插入dom树的时候 执行自定义逻辑 update : 让开发者在元素状态发生改变的时候 执行...
  • 在app.vue组件中写 在Son.vue中写 执行结果:1.父组件先触发beforeCreate,created,beforeMount钩子函数 ...2.子组件执行beforeCreate,...3.子组件执行mounted钩子函数,父组件再执行mounted钩子函数 ...
  • vue路由中的钩子函数有哪些?

    千次阅读 2021-02-28 23:16:36
    路由 Vue Router 是 Vue.js 官方的路由管理器。它是 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 功能: 嵌套的路由/视图表 ...全局的路由钩子函数:beforeEach、afterEach 单个的路由钩.
  • Vue使用钩子函数对路由进行权限跳转 钩子函数 : 在系统消息触发时被系统调用的函数 在router.js中配置 , 如下例所示 import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export ...
  • 但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导致图片位置计算出问题。解决这个问题,目前想到几种种方法一、对mounted 钩子函数 中init方法加上延时mounted: function() {this.$nextTick(() =&...
  • 1、生命周期钩子函数 2、七个路由钩子
  • 加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount ->...子组件更新过程 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated 父组件更新过程 父 beforeUpdate ->..
  • vue钩子函数的用法

    2021-05-09 10:15:11
    组件实例创建完成后,执行这个函数,此时data和methods都已经被初始化好了 beforeMount() 表示模板已经在内存中编译完成,但没有把模板挂载到页面中 mounted() 表示模板已经挂载到页面中了,此时实例已经创建完成...
  • Vue生命周期中的钩子函数会阻塞执行么? 答案应该是否定的. 开发中我遇到了一个问题. <Father> <son-1 :data="formdata"/> <son-2 :data="formdata"/> <son-3 :data="formdata"/> </...
  • 1、全局的路由钩子函数 1.1、beforeEach(全局前置钩子),意思是在每次每一个路由改变的时候都要执行一遍 它有三个参数: to: route:即将要进入的目标 路由对象 from:route:当前导航正要离开的路由 ...
  • 理解钩子函数,和基本应用 一、定义 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做...
  • <div id="dynamicexample"> <h3>update font color</h3>...指令钩子函数会被传入以下参数: el:指令所绑定的元素,可以用来直接操作 DOM。 binding:一个对象,包含以下 proper.
  • 可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解: beforeCreate created beforeMount mounted beforeUpdat
  • vue-router钩子函数和执行顺序 一:全局导航钩子函数 1、vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每次每一个路由改变的时候都得...
  • 昨天做项目时,由于自己对Vue的生命周期钩子函数了解的不是很到位,以至于出现了很多问题,所以便在闲暇之余写下这篇博客,加深一下对钩子函数的认知。 钩子函数介绍 话不多说,先上图!! 初看这幅图,可能觉得这Tm是...
  • Vue生命周期介绍和钩子函数 组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段。从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期,在这...
  • 1、全局的钩子beforeEach(to,from,next)afterEach(to,from,next)2、组建内的导航钩子组件内的导航钩子主要有这三种:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行...
  • vue常用钩子函数

    2021-04-20 19:55:50
    1、在keep-alive包裹的活性组件中,加入了activated(),用法和created()、mounted()用法相同,区别是在活性组件中,第一次进入页面时按照created()=>mounted()=>activated()触发,第二次之后只会触发activated...
  • 什么是生命周期? 生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;...生命周期的钩子函数中的this,会默认指向vue的实例; 什么是钩子函数? beforeCreate created[可以..
  • 1、beforeCreate 钩子该阶段组件实例刚创建,组件属性计算之前(可理解为组件属性还未初始化,未绑定,未挂载元素el),比如:el,data,methods等,如果你试图在beforeCreated钩子中获取这些属性值,会得到ubdefined...
  • Vue 的父组件和子组件生命周期钩子函数执行顺序 Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分: 加载渲染过程: 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 ...
  • Vue3路由的使用 安装vue-router npm install vue-router@4.0.0-beta.13 package.json { "name": "vue3-life", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build" }, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,983
精华内容 12,393
关键字:

vue组件钩子函数

vue 订阅