VUE笔记(四)vue的组件

一、组件的介绍

1、组件的作用

  • 整个项目都是由组件组成

  • 可以让代码复用:相似结构代码可以做成一个组件,直接进行调用就可以使用,提高代码复用性

  • 可以让代码具有可维护性(只要改一处,整个引用的部分全部都变)

注意点:组件和模块区别

  • 模块仅对逻辑进行复用

  • 组件针对与结构、逻辑、样式进行复用的UI控件

2、组件分类

  • 按作用范围分类

    • 全局组件:项目中所有地方都可以的组件称为全局组件

    • 局部组件(私有组件):仅有该组件才能使用的组件称为局部组件

  • 按照用途来分

    • 页面组件

    • 自定义组件

3、局部组件

使用局部组件的具体步骤

  • 第1步:在src下的components下创建一个单文件组件

    单文件组件由三部分组成

    • template:页面的结构的

    • script:该组件的逻辑代码

    • style:该组件的样式的代码

<template>
    <div class="box">
        <h1>计数器</h1>
        <div>{{num}}</div>
        <div>
            <button @click="num++">+</button>
        </div>
    </div>
</template>
​
<script>
export default {
    data(){
        return{
            num:0
        }
    }
}
</script>
​
<style>
​
    box{
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
    }
</style>
  • 第2步:通过ES6的import将自定义的组件引入进来

import HelloWorld from './components/HelloWorld.vue'
  • 第3步:注册组件

export default {
  components:{
    HelloWorld
  }
}
  • 第4步:在template模板中直接引用

 <HelloWorld></HelloWorld>
 <hello-world></hello-world>

注意:在template模板的地方如果要引入局部的自定义组件,可以使用短横线命名法或者使用驼峰式命名法均可

4、全局组件

定义全局组件的步骤

  • 首先现在src/components下创建自定义组件

  • 在main.js进行全局注册

import HelloWorld from '@/components/HelloWorld.vue'
/* 
  全局注册的语法
  Vue.comoponent(参数1,参数2)
  参数1:组件的名称,这个名称可以在其他组件中直接进行调用
  参数2:导入的组件对象名称
*/
Vue.component('HelloWorld',HelloWorld)
  • 在相应的组件中直接引入

<HelloWorld></HelloWorld>

5、父子组件

  • 定义子组件MovieItem

<template>
    <div class="container-item">
        <div class="item-1">
            <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg" alt="">
        </div>
        <div class="item-2">
            <div>大话西游之大圣娶亲 西遊記大結局之仙履奇緣</div>
            <div></div>
        </div>
    </div>
</template>
​
<script>
export default {
​
}
</script>
​
<style lang="scss">
    .container-item{
        display: flex;
        flex-direction: column;
        width: 135px;
        height: 220px;
        border: 1px solid #000;
        border-radius: 15px;
        margin: 5px;
        .item-1{
            height: 177px;
            background-color: blue;
            overflow: hidden;
            img{
                width: 135px;
            }
        }
        .item-2{
            display: flex;
            flex-grow: 1;
            background-color: red;
        }
    }
</style>
  • 定义MovieList组件

<template>
   <div class="container">
        <div class="title-container"></div>
        <div class="content-container">
            <movie-item></movie-item>
            <movie-item></movie-item>
            <movie-item></movie-item>
            <movie-item></movie-item>
            <movie-item></movie-item>
            <movie-item></movie-item>
            <movie-item></movie-item>
            <movie-item></movie-item>
        </div>
   </div>
</template>
​
<script>
import MovieItem from './MovieItem.vue'
export default {
    components:{
        MovieItem
    }
}
</script>
​
<style lang="scss">
    .container{
        display: flex;
        width: 617px;
        height: 500px;
        flex-direction: column;
        background-color: yellow;
        .title-container{
            display: flex;
            width: 100%;
            height: 40px;
            background-color: red;
        }
        .content-container{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            flex-grow: 1;
            background: springgreen;
        }
    }
</style>

如上操作电影的列表项内容、图片、评分都是固定的,如果想要内容、图片、评分不一样,就应该学习组件的通信

二、组件通信

组件的通信方式很多,大致分成如下几种

  • 父向子传值的方式:props

  • 子组件向父组件通信:自定义事件$emit

  • 兄弟组件的通信:

    • 状态提升

    • EventBus

    • 订阅与

    • 发布模式

  • 跨级组件之间的通信:provider和inject

  • 无关系组件之间通信:状态机(vuex,pinia)

1、父组件向子组件通信

一个组件的数据来自两个地方,一个地方是来自本组件内部(data),另一个来自组件外部(props),props用来接收该组件之外的数据(来自它的父组件)

1.1、父组件向子组件通信的步骤
  • 首先在子组件中声明props选项,然后定义要传递的数据名称

export default {
    props:['title','imgurl']
}
  • 其次在子组件的template部分,使用v-bind动态的接收属性,使用插值表达式动态的接收内容

<template>
    <div class="childBox">
        <h2>我是儿子</h2>
        <div>
            <div>{{title}}</div>
            <div>
                <img :src="imgurl">
            </div>
        </div>
    </div>
</template>
  • 在父组件的template引入子组件的标签部分进行传值

<template>
  <div class="parentBox">
    <h1>我是父组件</h1>
    <child :title="title" :imgurl="imgurl"></child>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  components: { Child },
  data(){
    return{
      title:'哈利·波特与魔法石 Harry Potter and the Sorcerer',
      imgurl:'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614949805.jpg'
    }
  }
}
</script>

<style>
  .parentBox{
    width: 300px;
    height: 500px;
    background-color:tomato;
  }
</style>
1.2、props的验证器和默认值

子组件通过props来引入外部的数据,但是这是这些数据的类型和内容如果要加以限制,就需要使用都props的验证器

1)验证类型

Prop 的验证是指子组件可以对外部传递进来的数据的类型或内容设置验证规则。例如在子组件组中设置想要接收age数据的值是Number类型,如果接收到的不是Number类型,浏览器中就会抛出报错。

如果要设置验证,props属性的值需要切换为对象:

export default {
      props: {
          name:String
    }
}
2)其他验证规则

除了定义简单的数据类型验证外,props 还支持其他的一些验证规则:

1)设置多个类型,例如 age 属性接收数字和字符串都可以:

export default {
      props: {
          age: [Number, String]
    }
}

2)必填属性,例如 age 属性必须传值:

export default {
      props: {
        age: {
            type: [Number, String],
            required: true
        }
    }
}

3)默认值,例如 age 属性如果没有传值,就使用默认值 18

export default {
      props: {
        age: {
            type: [Number, String],
            default: 18
        }
    }
}

4)对象和数组类型的默认值,必须通过函数的返回值来设置:

export default {
      props: {
        friends: {
            type: Array,
            default: () => ['韩梅梅', '李华'], // 数组的默认值
            // 或
            type: Object,
            default: () => ({ name: '韩梅梅' })  // 对象的默认值
        }
    }
}

5)自定义验证规则,例如 age 接收的值必须在 18 到 25 的范围内:

export default {
      props: {
        age: {
            type: Number,
            validator: value => value >= 18 && value <= 25
        }
    }
}

注意:Prop 会在一个组件创建之前进行验证,所以组件的属性 (如datacomputed等) 在defaultvalidator函数中是不可用的。

2、子组件向父组件传值

子组件向父组件传值是一种逆向行为,通过$emit自定义事件的方式来进行传值,具体的步骤如下

  • 子组件中触发相应事件,通过$emit来自定义事件

<div>{{cmsg}}</div>
<button @click="sendMsgToParent">发送到父组件</button>

methods:{
        sendMsgToParent(){
          //在这里调用vue中的$emit方法,完成自定义事件设置
         /* 
            $emit方法用来自定义事件
            它有两个参数
            参数1:自定义事件的名称
            参数2:所要传递的数据
         */
          this.$emit('make',this.cmsg)
        }
  }
  • 在父组件引用子组件的开始标签中调用这个自定义事件

 <child @make="getMsgFromChild"></child>
  • 在父组件的methods选项中定义方法用来实现父组件接收子组件的方法

methods:{
    //此处用于接收子函数的参数是$emit的第2个参数
    getMsgFromChild(val){
       console.log(val)
    }
}
  • 将从子组件中接收的信息赋值给该组件的data选项中的数据

<div>{{ info }}</div>

data(){
    return{
      info:''
    }
  },
  methods:{
    //此处用于接收子函数的参数是$emit的第2个参数
    getMsgFromChild(val){
       this.info=val
    }
}
  • 通过父子传值删除电影项

    methods:{
        getId(id){
            this.movie=this.movie.filter(item=>item.id!=id)
        }
    }

3、兄弟组件的通信

兄弟组件之间的通信可以采用三种方式

  • 状态提升:首先把组件的数据通过子传父的方式传递给父组件,而后再将父组件接收到这个数据通过父传子的方式传递给另外兄弟组件

  • 事件总线:

  • 发布与订阅

1)通过eventBus进行兄弟组件传值
  • 在src/utils文件夹下创建eventBus.js

//导入vue依赖包
import Vue from 'vue'
//实例化一个Vue对象并默认导出
export default new Vue()
  • 在数据的发送方编写代码如下

import bus from '@/utils/eventBus'
export default {
    data(){
        return{
            msg:''
        }
    },
    methods:{
        sendMsgToBrother(){
           //调用vue实例中的$emit来完成发送信息
           bus.$emit('sharekey',this.msg)
        }
    }
}

说明:调用bus对象的$emit方法来完成发送信息

  • 在数据的接收方,可以使用bus.$on方法来接收信息

import bus from '@/utils/eventBus'
export default {
    data(){
        return{
            fromBrotherMsg:''
        }
    },
    //调用组件创建完之后会被调用
    created(){
       bus.$on('sharekey',val=>{
        this.fromBrotherMsg=val
       })
    }
}

特别注意:我们在使用bus.$on接收信息的时候,它的第2个参数应该写成箭头函数(这里由于this指向的问题)

2) 发布与订阅方式
  • 在终端上通过npm下载pubsub-js包

npm i pubsub-js
  • 在信息发送方,通过pubsub对象中的publish方法来实现发送

import pubsub from 'pubsub-js'
export default {
    data(){
        return{
            msg:''
        }
    },
    methods:{
        sendMsgToBrother(){
          pubsub.publish('gileskey',this.msg)
        }
    }
}
  • 在信息的接收方,使用pubsub.subscribe方法来接收信息

import pubsub from 'pubsub-js'
export default {
    data(){
        return{
            fromBrotherMsg:''
        }
    },
    created(){
       pubsub.subscribe('gileskey',(arg1,arg2)=>{
           //arg1= 'gileskey'
           //arg2= this.fromBrotherMsg
          this.fromBrotherMsg=arg2
       })
    }
}

4、跨级组件的传值

如果要进行跨级组件的通讯,可以考虑使用provider/inject选项来完成

App.vue组件

<template>
    <div class="box">
      <h1>祖父组件</h1>
      <child></child>
    </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  components:{
    Child
  },
  provide:{
    akey:'我是爷爷'
  }
}
Child.vue组件

<template>
    <div class="cbox">
        <h2>子组件</h2>
       <grand-son></grand-son>
    </div>
</template>

<script>
import GrandSon from '@/components/GrandSon.vue'
export default {
    components:{
        GrandSon
    }
}
</script>

<style>
    .cbox{
        width: 400px;
        height: 300px;
        background-color: springgreen;
    }
</style>
GrandSon.vue组件

<template>
    <div class="gcbox">
        <h3>孙子组件</h3>
        <div>{{akey}}</div>
        <grand-son-son></grand-son-son>
    </div>
</template>

<script>
import GrandSonSon from '@/components/GrandSonSon.vue'
export default {
    components:{
        GrandSonSon
    },
    inject:['akey']
}
</script>

<style>
    .gcbox{
        width: 300px;
        height: 200px;
        background-color: yellow;
    }
</style>

三、插槽

slot的官方定义是用于组件内容分发,简单通俗的解释就是在组件化开发中,虽然组件是一样的,但是在不同的使用场景,组件的某一部分需要有不同的内容显示。slot就好比组件开发时定义的一个参数,如果不传入值就当默认值使用,如果传入了新值,在组件调用时就会替换定义时的slot默认值。

slot分为三大类:

  • 匿名slot

  • 具名slot

  • 作用域插槽

1、匿名插槽

匿名插槽是没有名字的插槽,称为匿名插槽

案例:编写一个模态框组件

<template>
    <div class="box">
        <div class="header">
            <div class="close">&times;</div>
        </div>
        <div class="main">
            <slot>暂无内容</slot>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    .box{
        width: 325px;
        border-radius: 5px;
        border: 1px solid #000;
        .header{
            position: relative;
            height: 40px;
            background-color: #007CB7;
            .close{
                position:absolute;
                right: 10px;
                line-height: 40px;
                color: white;
                font-size: 32px;
            }
        }
        .main{
            padding: 10px;
            text-align: center;
        }
    }
</style>

在页面组件调用的时候

<template>
    <div>
        <ModalDialog title="登录">
            <div>
              <div class="item">
                 <input type="text" placeholder="请输入手机号" class="input">
              </div>
              <div class="item">
                 <input type="text" placeholder="请输入密码" class="input">
              </div>
              <div class="item">
                  <button class="loginBtn">登录</button>
              </div>
            </div>
        </ModalDialog>

        <modal-dialog title="个人介绍">
            <img class="headImg" src="https://img0.baidu.com/it/u=3464224756,2566048582&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=500" alt="">
        </modal-dialog>
    </div>
</template>

<script>
import ModalDialog from '@/components/ModalDialog.vue'
export default {
  components:{
    ModalDialog
  }
}
</script>

<style>
  .loginBtn{
    width: 250px;
    height: 37px;
    background-color:#007CB7;
    border: none;
    border-radius: 5px;
    text-align: center;
    line-height: 37px;
    color: white;
  }
  .item{
    line-height: 50px;
  }
  .input{
    width: 250px;
    height: 35px;
    border-radius: 5px;
  }
  .headImg{
    width: 300px;
  }
</style>

2、具名插槽

  • 编写自定义组件使用<slot>完成插槽的占位,由于有多个插槽,所以一定要在每个<slot>上添加name属性,使用name属性来为该插槽取名字

<template>
   <div class="box">
      <div>
        <slot name="title">暂无标题</slot>
      </div>
      <div>
        <slot name="name">暂无名称</slot>
      </div>
      <div>
         <slot name="multipart">
            <img src="http://old.woniuxy.com/page/img/head_picture/0.jpg" style="width:30px;height:30px" alt="">
        </slot>
      </div>
      <div>
        <slot name="desc">暂无简介</slot>
      </div>
   </div>
</template>
  • 页面组件中要引用组件,并且给相应插槽赋值,有如下规则

    • 必须使用<template>

    • 使用v-slot:插槽名称或者使用#插槽名称可以在调用组件的时候将内容传递给组件的内容slot占位部分

<template>
  <div class="container">
    <card>
       <template v-slot:title>风华</template>
       <template v-slot:name>天真</template>
       <template v-slot:multipart>
          <img style="width:30px" src="http://old.woniuxy.com/page/image/userIcon/teacherIcon/mayuhang.jpg">
       </template>
       <template v-slot:desc>
          6年项目研发经验及管理经验,PMP证书持有者
       </template>
    </card>
    <card>
       <template #title>学苑</template>
       <template #name>海东</template>
    </card>
  </div>
</template>

3、作用域插槽

所谓的作用域插槽是带数据插槽,将子组件的数据传递给父组件,然后父组件得到这个数据后展示不同的效果,我们将这种称为作用域插槽

<template>
   <div class="cbox">
        <div class="header">
            <span>{{title}}</span>
        </div>
        <div class="main">
            <ul>
                <li v-for="(item,index) in items" :key="index">
                   <slot :item="item">{{item.name}}</slot>
                </li>
            </ul>
        </div>
   </div>
</template>

<script>
export default {
    props:['title','items']
}
</script>

<style lang="scss">
    .cbox{
        display: flex;
        flex-direction: column;
        width: 215px;
        height: 300px;
        border: 1px solid #ccc;
        border-radius: 5px;
        .header{
            display: flex;
            align-items: center;
            margin-left: 5px;
            font-size: 18px;
            font-weight: bold;
            height: 35px;
            border-bottom: 1px dashed #ccc;
        }
        li{
            line-height: 32px;
        }
        .main{
            flex-grow: 1;
        }
    }
</style>

App.vue

<template>
    <div style="display:flex">
       <MyList title="Shape" :items="shapes"></MyList>
       <MyList title="Color" :items="colors">
          <template slot-scope="scope">
            <div class="item">
               <div class="bock" :style="`background:${scope.item.hex}`"></div>
               <div>{{scope.item.name}}</div>
            </div>
          </template> 
       </MyList>
    </div>
</template>

<script>
import MyList from '@/components/MyList.vue'
export default {
  components: { MyList},
  data(){
    return{
      shapes: [
        { name: "Square", sides: 4 },
        { name: "Hexagon", sides: 6 },
        { name: "Triangle", sides: 3 },
      ],
      colors: [
        { name: "Yellow", hex: "#F4D03F" },
        { name: "Green", hex: "#229954" },
        { name: "Purple", hex: "#9B59B6" },
      ]
    }
  }
}
</script>

<style>
  .item{
    display: flex;
  }
  .bock{
    width: 40px;
    height: 20px;
    border: 1px solid #000;
  }
</style>

四、组件的生命周期【面试题重点】

1、什么是生命周期

所谓的生命周期是指该组件对象从开始创建到销毁回收的整个全过程

2、生命周期函数

在生命周期中被自定执行的函数我们称为生命周期函数,也称为钩子函数

3、vue2中生命周期的函数

整个组件从开始到销毁要经过生命周期的阶段,每到一个阶段,相对应的函数就会被执行

生命周期含义
beforeCreate在组件创建之前被调用
created在组件创建之后被调用
beforeMount模板编译、挂载之前被调用
mounted模板编译、挂载之后被调用
beforeUpdate组件更新之前被调用
updated组件更新之后被调用
beforeDestory在组件销毁之前被调用
destoryed在组件销毁之后被调用

4、生命周期的阶段

我们将这个生命周期的阶段划分为三个阶段

5、生命周期图示【理解】

第1个阶段:组件创建阶段

  • new Vue():创建组件的实例对象

  • Init Events&Lifecycle:初始化事件和生命周期函数

  • beforeCreate:组件中的props/data/methods这些尚未创建,都处于不可以用的状态,在实际的开发过程中几乎没有用处

  • Init injections & reactivity:组件props/data/methods才开始初始化这些选项

  • created:组件中的props/data/methods这些数据已经初始化成功了,但是这里不能放问页面的DOM元素,因为此时模板还没有被编译创建出来

   beforeCreate(){
     console.group('----1、beforeCreate--------');
     console.log('data',this.num);  //undefined
     console.log('methods',this.fn); //undefined
     console.log('props',this.ptitle);//undefined
     console.groupEnd()
   },
  created(){
    console.group('----2、created--------');
    console.log('data',this.num);//可以访问数据为0
    console.log('methods',this.fn);  //也可以访问
    console.log('props',this.ptitle); //也可以访问
    console.log('dom元素', this.$refs.titleDom); //不能访问,这里的数据为undefined,因为模板没有创建
    console.groupEnd()
  },

总结:在实际开发过程中beforeCreate几乎不用,created使用的比较多,一边情况在这里完成网络请求,和后端交互、完成一些初始化的操作,创建定时器等功能更

向后端发送网络请求的技术有三种

  • Ajax方式:这种方式存在弊端就是

    <1>.AJAX干掉了Back和History功能,即对浏览器机制的破坏。 在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现。

    <2>.AJAX的安全问题。 AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

    <3>.对搜索引擎支持较弱。 对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能。

    <4>.破坏程序的异常处理机制。 至少从目前看来,像Ajax.dll,Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题,曾在开发过程中遇到过,但是查了一下网上几乎没有相关的介绍。后来做了一次试验,分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。

    <5>.违背URL和资源定位的初衷。 例如,我给你一个URL地址,如果采用了Ajax技术,也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

    <6>.AJAX不能很好支持移动设备。 一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax,比如说我们在手机的浏览器上打开采用Ajax技术的网站时,它目前是不支持的。

    <7>.客户端过肥,太多客户端代码造成开发上的成本。

  • fetch方式:这种实际上对Ajax的封装,比Ajax要强

  • axios方式:目前使用的最多的一种

案例1:使用原生ajax获取网络数据

步骤如下

第1步:在src/utils目录下创建request.js文件,该文件用于封装ajax请求

//使用具名导出ajax函数
export function ajax(method,url){
  return new Promise((resolve,reject)=>{
     //创建XMLHttpRequest对象
     let xhr=new XMLHttpRequest()
     //初始化XMLHttpRequest对象
     xhr.open(method,url,true)//true表示异步请求
     //如果是GET请求发送信息
     xhr.send()
     //设置回调函数
     xhr.onreadystatechange=function(){
        //判断状态码必须是4的时候并且响应码必须是200的时候返回数据
        if(xhr.readyState==4){
            if(xhr.status==200){
              //获取服务端发送回来的数据
              resolve(xhr.responseText)
            }else{
              reject('network failure')
            }
        }
     }
  })
}

第2步:在组件中引入的created函数中调用获取网络数据

import {ajax} from '@/utils/request'
export default {
    data(){
        return{
            list:[]
        }
    },
    methods:{
       async getOperas(){
            //使用async/await
            let response=await ajax('GET','https://www.fastmock.site/mock/4441a79ad5f884f83b784cf4c588bdb6/movies/getAllOperas')
            this.list=JSON.parse(response).operas;
        }
    },
     created(){
       //使用then方式获取promies成功后的数据
    //    ajax('GET','https://www.fastmock.site/mock/4441a79ad5f884f83b784cf4c588bdb6/movies/getAllOperas').then(response=>{
    //        //将返回回来的数据由JSON转成js对象
    //        let result=JSON.parse(response)
    //        console.log(result.operas);
    //        //将获取的数据赋值给data的list数据
    //        this.list=result.operas
    //    })
        this.getOperas()
    }
}

第3步:在template模板中渲染

<template>
    <div>
        <h1>获取所有的电影院信息</h1>
        <ul> 
            <li v-for="item in list" :key="item.id">{{item.name}}</li>
        </ul>
    </div>
</template>
第2个阶段:编译HTML模板并渲染到浏览器中

  • 这个过程的主要工作可以理解为将data中数据读到内存中,再填充到template之后进行编译,这个编译过程由vue-template-compiler这个依赖包来完成编译的

  • beforeMount:将内存中编译好的HTML结构然后渲染到浏览器中,此时浏览器还没有中还没有当前DOM结构,在这钩子函数中直接操作DOM

  • create vm.$el and replace "el" with it:用内存中编译好的HTML结构,替换掉el属性指定的DOM元素

  • mounted:已经把内存中的HTML结构成功的渲染到了浏览器之中,此时你可以直接在这个钩子函数中去操作DOM元素了

第3阶段:组件更新阶段

  • 当数据变化变化的时就会触发beforeUpdate,这个时候data数据是会变化的,但是页面还没有渲染

  • Virtual DOM re-render and patch:根据最新的数据,重新渲染组件的DOM结构

  • updated:已经是最新的数据,完成了组件DOM结构的重新渲染

第4阶段:组件销毁阶段

beforeDestory:这个生命周期函数,是组件即将销毁,此时尚未销毁组件,组件还能正常运行,一般在这个函数会完成资源的释放操作

Teardown watcher... 销毁当前组件的侦听器、子组件、事件监听

destoryed:组件已经被销毁,此组件在浏览器中的DOM已经被完全移除

案例:停止定时器操作

 created(){
    //定义一个间隔定时器,每隔1秒钟进行加1操作
    this.times=setInterval(() => {
      console.log('num',this.num);
      this.increment()
    }, 1000);
 }
 beforeDestroy(){
    console.log('---7、beforeDestroy-------------');
    //调用销毁定时器的方法
    clearInterval(this.times)
  },

五、动态组件【了解】

1、概念

动态组件是指动态的切换组件的

2、语法

<component :is="加载的组件名称"></component>

3、keep-alive

默认情况下,切换动态组件的时,无法保存组件的状态的,此时可以使用使用keep-alive来实现缓存组件中的状态,从而保存切换时组件状态的

使用动态组件的时候当切换到Second组件的时候,首先先执行beforeCreate、created、beforeMount之后会把First组件进行销毁会调用First组件的beforeDestory和destoryed方法,所以第一个组件的01状态就不会被保存

<template>
   <div>
      <button @click="cardName='card'">aa</button>
      <button @click="cardName='zuoyongyuF'">bb</button>
   <keep-alive>
      <component :is="cardName"></component>
   </keep-alive>
   </div>
</template>
<script>

import card from './views/card.vue';
import zuoyongyuF from '@/views/zuoyongyuF.vue'

export default {
   components:{card,zuoyongyuF},
   data(){
      return{
         cardName:''
      }
   }
}
</script>

<style lang="scss">
</style>

4、keep-alive的相关的生命周期

在vue2的生命周期中有8个常用方法,但是如果使用了keep-alive后,还有两个相关的生命周期的钩子函数

  • deactivated:当组件被缓存的时候,会调用该生命周期的函数

  • activated:当组件被激活的时候,会自动触发组件的该函数

注意:当进入到第2个组件的时候,首先执行beforeCreate、created、beforeMount,此时将第一个组件的数据缓存起来,然后在调用第2个组件的mounted函数和activated函数,后续再次切换的时候就只会执行和keep-alive相关的的激活和缓存方法。

5、include和exclude属性

如果在动态组件的外面使用keep-alive将动态组件包起来,那么动态组件引入的组件都会被缓存,要么不使用keep-alive包裹就不会缓存任何数据,在实际开发中到底是缓存数据好还是不缓存数据好。

如果在一个动态组件中,需要缓某个组件可以使用include属性,将需要缓存的组件写入,如果需要缓存多个,之间使用逗号(,)隔开

 <keep-alive include="First,Third">
      <component :is="componentName"></component>
 </keep-alive>

如果在一个动态组件中,不需要缓某个组件可以使用exclude属性,将不需要缓存的组件写入,如果不需要缓存多个,之间使用逗号(,)隔开

 <keep-alive exclude="Third,First">
      <component :is="componentName"></component>
    </keep-alive>

六、异步组件

1、为什么使用异步组件

之前如果要使用一个组件必须要先使用import XX from '组件路径'的方式导入组件,然后通过components中注册这个组件,但是这种导入导入组件的方式相当于页面一加载,将所有的组件全部导入,然后再注册,这样对于性能来讲负担很重,那么如何能解决这个问题,可以使用import()或者require函数的方式导入组件,再使用的时候才导入它,这样性能就有一个大幅度的提升

2、异步组件的好处

可以避免页面一加载时就去加载全部的组件,从而导致页面访问时间变长的问题,使用异步组件后,只有当需要某个组件的时候才会去加载需要的组件。

<template>
   <div>
        <h1>异步组件的演示案例</h1>
        <button @click="handleclick">按钮</button>
        <div v-if="show">
            <AsyncList></AsyncList>
        </div>
   </div>
</template>

<script>
import LoadingComponent from '@/components/LoadingComponent.vue'
import ErrorComponent from '@/components/ErrorComponent.vue'
//定义了一个关于异步组件的对象
const AsyncList=()=>{
    return{
      //component:要加载的组件,组件使用异步方式加载
      component:import('@/components/MyList.vue'),
      //加载中显示的组件
      loading:LoadingComponent,
      //在指定的毫秒数内没有加载进来则进入该组件
      error:ErrorComponent,
      //延时毫秒数
      delay:200,
      //超时时间毫秒数
      timeout:21500,
    }
}
export default {
    components:{
       AsyncList
    },
    data(){
        return{
            show:false
        }
    },
    methods:{
        handleclick(){
            this.show=!this.show
        }
    } 
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/97101.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java8实战-总结17

Java8实战-总结17 引入流流操作中间操作终端操作使用流 小结 引入流 流操作 java.util.stream.Stream中的Stream接口定义了许多操作。它们可以分为两大类。再来看一下前面的例子&#xff1a; List<String> names menu.stream() //从菜单获得流 .filter(d -> d.get…

SpringBoot - Google EventBus、AsyncEventBus

介绍 EventBus 顾名思义&#xff0c;事件总线&#xff0c;是一个轻量级的发布/订阅模式的应用模式&#xff0c;最初设计及应用源与 google guava 库。 相比于各种 MQ 中间件更加简洁、轻量&#xff0c;它可以在单体非分布式的小型应用模块内部使用&#xff08;即同一个JVM范围…

xml和json互转工具类

分享一个json与xml互转的工具类&#xff0c;非常好用 一、maven依赖 <!-->json 和 xm 互转</!--><dependency><groupId>org.dom4j</groupId><artifactId>dom4j</artifactId><version>2.1.3</version></dependency&g…

图形化管理工具ossbrowser

文章目录 一、OSS介绍二、通过工具管理OSS三、安装四、使用-通过AK五、免责声明摘抄 一、OSS介绍 云对象存储OSS&#xff08;Object Storage Service&#xff09;是一款海量、安全、低成本、高可靠的云存储服务&#xff0c;可提供99.9999999999%&#xff08;12个9&#xff09;…

Javaweb入门

Spring Spring发展到今天已经形成一种开发生态圈&#xff0c;Spring提供若干个子项目&#xff0c;每个项目用于完成特定的功能。 Spring Boot可以帮助我们非常快速的构建应用程序、简化开发、提高效率 SpringBootWeb入门 需求&#xff1a;使用Spring Boot开发一个web应用&a…

结构体(个人学习笔记黑马学习)

1、结构体的定义和使用 #include <iostream> using namespace std; #include <string>struct Student {string name;int age;int score; }s3;int main() {//1、struct Student s1;s1.name "张三";s1.age 18;s1.score 100;cout << "姓名&a…

便携式水质自动采样器可应用的场景

便携式水质自动采样器符合中国环境保护部HJ/T 372-2007《水质自动采样器技术要求及检测方法》&#xff0c;是集流量测量、水样采集&#xff0c;自动分瓶、一体的多功能环境监测仪器。 具有体积小&#xff0c;方便移动、操作简捷、环保节能等特点。适用于各级环境监测站、监察机…

go vet中的那些检测项

go vet 是 Go 语言自带的一个工具&#xff0c;用于分析 Go 代码中的常见错误和潜在问题。它可以检查代码中可能存在的各种问题&#xff0c;例如&#xff1a; 未使用的变量、函数或包 可疑的函数调用 错误的函数签名 程序中的竞态条件 错误的类型转换等 本文意图指令当前go vet所…

【VUE】数字动态变化到目标值-vue-count-to

vue-count-to是一个Vue组件&#xff0c;用于实现数字动画效果。它可以用于显示从一个数字到另一个数字的过渡动画。 插件名&#xff1a;vue-count-to 官方仓库地址&#xff1a;GitHub - PanJiaChen/vue-countTo: Its a vue component that will count to a target number at a…

VueX 与Pinia 一篇搞懂

VueX 简介 Vue官方&#xff1a;状态管理工具 状态管理是什么 需要在多个组件中共享的状态、且是响应式的、一个变&#xff0c;全都改变。 例如一些全局要用的的状态信息&#xff1a;用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我们就需要这么一个工…

【二等奖方案】大规模金融图数据中异常风险行为模式挖掘赛题「Aries」解题思路

第十届CCF大数据与计算智能大赛&#xff08;2022 CCF BDCI&#xff09;已圆满结束&#xff0c;大赛官方竞赛平台DataFountain&#xff08;简称DF平台&#xff09;正在陆续释出各赛题获奖队伍的方案思路&#xff0c;欢迎广大数据科学家交流讨论。 本方案为【大规模金融图数据中…

查局域网所有占用IP

查局域网所有占用IP 按&#xff1a;winr 出现下面界面&#xff0c;在文本框中输入 cmd 按确定即可出现cmd命令界面 在cmd命令窗口输入你想要ping的网段&#xff0c;下面192.168.20.%i即为你想要ping的网段&#xff0c;%i代表0-255 for /L %i IN (1,1,254) DO ping -w 1 -n 1…

尚硅谷SpringMVC

五、域对象共享数据 1、使用ServletAPI向request域对象共享数据 首页&#xff1a; Controller public class TestController {RequestMapping("/")public String index(){return "index";} } <!DOCTYPE html> <html lang"en" xmln…

十五、模板方法模式

一、什么是模板方法模式 模板方法&#xff08;Template Method&#xff09;模式的定义如下&#xff1a;定义一个操作中的算法骨架&#xff0c;而将算法的一些步骤延迟到子类中&#xff0c;使得子类可以不改变该算法结构的情况下重定义该算法的某些特定步骤。 模板方法模式包含以…

Sharding-JDBC(九)5.3.0版本,实现按月分表、自动建表、自动刷新节点

目录 一、简介二、Maven依赖三、配置文件application.ymlsharding.yaml 四、代码实现1.自动建表、自动刷新节点思路2.创建表结构3.TimeShardingAlgorithm.java 分片算法类4.ShardingAlgorithmTool.java 分片工具类5.ShardingTablesLoadRunner.java 初始化缓存类6.SpringUtil.ja…

postgresql-子查询

postgresql-子查询 简介派生表IN 操作符ALL 操作符ANY 操作符关联子查询横向子查询EXISTS 操作符 简介 子查询&#xff08;Subquery&#xff09;是指嵌套在其他 SELECT、INSERT、UPDATE 以及 DELETE 语句中的 查询语句。 子查询的作用与多表连接查询有点类似&#xff0c;也是为…

学习JAVA打卡第四十五天

StringBuffer类 StringBuffer对象 String对象的字符序列是不可修改的&#xff0c;也就是说&#xff0c;String对象的字符序列的字符不能被修改、删除&#xff0c;即String对象的实体是不可以再发生变化&#xff0c;例如&#xff1a;对于 StringBuffer有三个构造方法&#xff…

红黑树及其应用介绍(万字长文)

红黑树 定义与性质 红黑树是一种特殊的二叉查找树&#xff0c;它遵循了特定的规则使得其具有了平衡性。红黑树的定义包括以下几个方面&#xff1a; 每个节点要么是红色&#xff0c;要么是黑色。根节点是黑色的。每个叶子节点&#xff08;NIL节点&#xff0c;空节点&#xff…

【LeetCode题目详解】第八章 贪心算法 part06 738.单调递增的数字 968.监控二叉树 (day37补)

本文章代码以c为例&#xff01; 一、力扣第738题&#xff1a;单调递增的数字 题目&#xff1a; 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数…