zoukankan      html  css  js  c++  java
  • vue生命周期

    关于vue中的生命周期,其实在刚开始接触vue的时候就有了解过,但一直都是一知半解的,最近又有用到,所以就借此机会总结一下。

    项目准备

    为了简化操作,这里只是总结生命周期函数,所以是直接在App.vue中进行操作的,只是为了需要,在src文件目录下新建了一个components文件夹,用来存放组件,并在该文件夹下面新建了一个组件children.vue。具体如下:

    beforeCreate & created

    为了测试这两个函数,首先在子组件childred.vue中添加一个数据,分别在两个函数中打印该数据。

    通过上面的打印,我们可以得出以下结论:

    1. 只要使用组件,就会触发上面两个事件函数;
    2. created中可以操作数据,并且可以实现vue到页面的影响,也就是说,在created阶段就可以发起Ajax请求。

    beforeMount & mounted

    继续对子组件children.vue进行操作:

     

    通过上面的打印,我们不难发现,在进行数据装载之后,就是vue作用以后的DOM。

    beforeUpdate & updated

    与上面的生命周期函数不同的是,上面的函数是组件调用时自然会发生的,但这两个函数的发生基于数据改变对页面的影响,分别获取改变发生前的DOM和改变发生后的DOM。所以为了演示这两个函数,这里在子组件中添加了一个数据,并通过按钮的点击事件开改变该数据的值,从而触发这两个生命周期函数。

    需要注意的是,beforeMount和mounted也能获取DOM,但是这两个是分别获取vue启动前和启动后的DOM,并且只会执行一次,而beforeUpdate和updated则是获取页面改变前后的DOM,可以根据多次的页面改变而触发多次。

    beforeDestroy & destroyed

     这两个函数对应的是子组件在组件中销毁(v-if = false)时触发的函数,所以需要在父组件中添加点击事件控制子组件的创建和销毁,从而触发这两个函数。

    父组件:

    在页面加载完成后,会触发创建的两个函数,当点击按钮,不停的销毁创建子组件的时候,就会频繁触发销毁创建函数。

    我们知道,当我们频繁对DOM进行操作的时候,会加大损耗,这是不允许的,所以现在在上面的例子的基础上,在父组件调用子组件的时候,在外层加上一个内置组件:

    此时,在页面加载过程中,会触发创建的连个函数,但是当我们点击按钮的时候,虽然页面上有变化,但是并没有打印,也就是并没有继续触发销毁和创建。

     

    这是因为在没有使用keep-alive组件的时候,v-if触发的是子组件的创建和销毁,当使用了keep-alive的时候,v-if触发的子组件的激活和停用,那么既然页面有变换,但是没有触发销毁和创建函数,那我们怎么知道显示和隐藏的变化呢,这就是接下来要说的两个函数了。

    activated & deactivated

    这两个函数就是在组件被激活和停用是触发的,保持上面的父组件不变,稍微修改子组件如下:

    然后点击按钮,控制组件的显示和消失的时候,我们就可以看到相关函数的打印结果了。

     

    在实际的运用过程中,如果需要不停的对子组件进行显示隐藏操作的时候,频繁的创建销毁是不被推荐的,此时就可以借助于keep-alive组件和组件的激活停用来实现功能。

  • 相关阅读:
    caffe: compile error: Could not open or find file your path~~/resized_data/0 and a total of 2 images .
    caffe: compile error : undefined reference to `cv::imread(cv::String const&, int)' et al.
    caffe: test code for Deep Learning approach
    C++ little errors , Big problem
    VGG_19 train_vali.prototxt file
    matlab 工具之各种降维方法工具包,下载及使用教程,有PCA, LDA, 等等。。。
    利用caffe生成 lmdb 格式的文件,并对网络进行FineTuning
    matlab 相关代码记录
    论文阅读之 Inferring Analogous Attributes CVPR 2014
    布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/10099736.html
Copyright © 2011-2022 走看看