Day05-Vue基础

Day05-Vue基础

一、单向数据流

父子组件通信。会在父组件中定义好数据，将数据传递给子组件，可以使用这个数据

Vue中针对props这个属性提出了一个单向数据流的概念。

Vue针对props做了一些限制，可以接受值，使用这个值，规范中不要去直接修改这个值
目的是为了对数据流进行严格把控，以后维护起来更加方便
为了保证数据流向更加准确，涉及传递子组件数据需要重新修改，最好父组件进行操作

二、生命周期函数

Vue组件生命周期，一个组件从创建到销毁的整个过程到底经历哪些步骤。

Vue为了让我们在开发过程中，能够把控每个阶段的情况，给开发者提供一系列钩子函数。

只要组件达到这个阶段，对应函数就会被执行。

一个组件生命周期有四个阶段：

阶段一：组件的创建阶段

beforeCreate():组件创建之前

created()：组件创建完毕

  //1.组件创建之前,data中的数据和dom元素都没有挂载到vue对象上
  beforeCreate(){
    console.log("======beforeCreate======");
    console.log(this.$data);
    console.log(this.$el);
    console.log("======beforeCreate======");
  },
  //2.组件创建之后,data中的数据会被挂载到vue对象上
  //在实际的项目开发中,我们可以在created中发送axios请求获取数据,把数据挂载到vue上
  created(){
    console.log("========created=======");
    console.log(this.$data);
    console.log(this.$el);
    console.log("========created=======");
  },

总结：

1. beforeCreate组件创建之前，无法获取$data和$el
2. created组件创建完毕，调用这个函数，相当于内存已经有这个组件对象
3. 这个时候$data有数据$el还是没有数据

在组件创建完成后，此刻data已经被初始化，如果发送请求拿到了数据，可以保存data中了

阶段二：组件挂载阶段

这个阶段我们要开始解析template标签里面模板，将data的数据渲染到模板。页面中渲染出来

这个阶段提供了两个生命周期

breforeMount():组件挂载之前，无法获取页面节点

mounted():组件挂载之后,能获取页面节点

  //1.dom挂载到vue之前执行
  beforeMount(){
    console.log("***********breforeMount**********");
    console.log(this.$data);
    console.log(this.$el);
    console.log("***********breforeMount**********");
  },
  //2.dom挂载到vue之后执行
  //实际项目开发中:a.操作dom元素,发送axios请求
  mounted(){
    console.log("***********mounted**********");
    console.log(this.$data);
    console.log(this.$el);
    console.log("***********mounted**********");
  },

总结：

1. beforeMount代表挂载之前，这个时候我们页面上还没有进行dom渲染，无法获取节点
2. mounted代表挂载之后，这个时候页面上已经进行了dom渲染

最常用的mounted这个函数，你可以在这个函数中获取节点。

还可以在这个生命周期中发送异步请求获取后端结果

阶段三：组件更新阶段

表示组件中数据更新，我们能够检测到

两个函数

beforeUpdate()：组件数据更新之前

updated()：组件数据更新过后

  //1.组件跟新之前调用
  beforeUpdate(){
    console.log("***********beforeUpdate**********");
    console.log(this.$data);
    console.log(this.$el);
    console.log("***********beforeUpdate**********");
  },
  //2.组件跟新之后调用
  updated(){
    console.log("***********updated**********");
    console.log(this.$data);
    console.log(this.$el);
    console.log("***********updated**********");
  },

总结：

1. 这个阶段生命周期最长，只要不销毁这个组件，这个周期一直存在
2. 修改数据后，updated就会执行。
3. 任何数据发生变化，执行一次

阶段四：销毁阶段

销毁阶段也提供了两个生命周期函数

beforeDestroy():销毁之前

destroyed()：销毁后

  //1.组件销毁之前执行
  beforeDestroy(){
    console.log("组件销毁前");
  },
  //2.组件销毁后执行
  destroyed(){
    console.log("组件销毁后");
  }

如果要销毁当前组件可以使用

this.$destroy()

一般在销毁的生命周期函数中，执行资源回收

三、动态组件

Vue中提出动态组件，为了实现页面组件的切换

实现组件动态切换效果

<component :is="currentTab"></component>

  data(){
    return{
      currentTab:"TabA" //表示当前要显示的选项卡
    }
  },

实现原理：

1. 采用v-if来动态渲染节点。一旦切换组件，之前的组件就会被销毁。
2. 页面开始加载的时候，不会把所有组件加载一遍。

四、keep-alive组件

keep-alive是组件的缓存技术

它包含如下属性。

include：值为字符串或者正则表达式，只有名字匹配的组件才能被缓存（白名单）

exclude:值为字符串或者正则表达式，当匹配到组件名字，代表这个组件不被缓存（黑名单）

max：设置当前组件缓存的做大值，keep-alive能够缓存最多几个组件max来决定

<keep-alive>
    <component :is="currentTab"></component>
</keep-alive>

当keepalive组件进行渲染的时候，包裹的所有组件都默认被缓存

include值为字符串：

<keep-alive include="TabA,TabC">
    <component :is="currentTab"></component>
</keep-alive>

include值为正则表达式

<keep-alive :include="/TabA|TabC/">
    <component :is="currentTab"></component>
</keep-alive>

还可以写一个数组

<keep-alive :include="['TabA','TabC']">
    <component :is="currentTab"></component>
</keep-alive>

白名单规则同样适用于黑名单

<keep-alive :exclude="['TabAVue','TabCVue']">
    <component :is="currentTab"></component>
</keep-alive>

max值

<keep-alive max="3">
    <component :is="currentTab"></component>
</keep-alive>

默认最多只能缓存三个组件，如果超过三个，LRU算法来控制哪些被缓存。

找到最久不适用组件，删除掉，将新的组件放进去

当被缓存组件重新显示的时候，如果你需要执行数据更新，keep-alive可以给被缓存组件新增两个生命周期钩子函数。

    //必须要被keep-alive缓存后这个组件才能使用这个生命周期
    //当你进入这个组件的是执行
    activated(){
        console.log("进入TabA组件");
    },
    //当你离开这个组件的会被执行的函数
    deactivated(){
        console.log("离开TabA组件");
    },

当前这个组件必须keep-alive缓存了才能使用这个生命周期。

五 插槽技术定义按钮

第一步 创建一个按钮组件

<template>
    <div>
        <div  class="btn-wrap" :style="{backgroundColor:backgroundColor1,width:width+'px'}">
            <!-- 插槽 -->
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props:["backgroundColor1","width"]
    
}
</script>

<style lang="scss" scoped>
    .btn-wrap{
        border: 1px red solid;
        // width: 60px;
        padding: 4px;
        display: inline-block; 
        color: black;
        margin: 4px;
        &:active{
            color: white;
        }
    }
    

</style>

第二步 使用按钮组件

 <MyButton  @click.native="addC(goods.id)" backgroundColor1="pink" width="100">加入购物车</MyButton>
 <MyButton  @click.native="delOne(goods.id)" backgroundColor1="red" width="100">删除</MyButton>

六 具名插槽

七 组件的全局导入

八 template