vue3+typescript【6】

插槽

具名插槽

• 具名插槽顾名思义就是给插槽起一个名字，<slot>元素有一个特殊的 attribute：name；
• 一个不带 name 的slot，会带有隐含的名字 default
  举个栗子：
  <slot name="left"></slot>
<template v-slot:left><button>左边</button></template>

跟 v-on 和 v-bind 一样，v-slot 也有缩写；
即把参数之前的所有内容 (v-slot:) 替换为字符 #
<template #left><button>左边</button></template>

动态插槽名

可以通过 v-slot:[dynamicSlotName]方式动态绑定一个名称
举个栗子：

<template v-slot:[name]>
    <button>左边</button>
</template>

...
data(){
    return{
        name:"left"
    }
}

作用域插槽

当一个组件被用来渲染一个数组元素时，我们使用插槽，并且希望插槽中没有显示每项的内容，Vue给我们提供了作用域插槽。
案例：
子组件ShowNames.vue

    <template>
  <div>
    <template v-for="(item, index) in names" :keys="item">
      <slot :item="item" :index="index"></slot>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    names: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style scoped>
</style>

App.vue

<template>
    <div>
<show-names :names="names">
    <template #default="slotProps">
        <button>{{slotProps.item}}-{{slotProps.index}}</button>
    </template>
</show-names>
    </div>
</template>

<script>
import ShowNames from './ShowNames.vue'
    export default {
        components:{
            ShowNames,
        },
        data(){
            return{
                names:["why","kobe","james","curry"]
            }
        }
    }
</script>

<style scoped>

</style>

动态组件的实现

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

keep-alive

组件状态保存

<keep-alive include="home,about"></keep-alive>
    <components :is="currentTab"></components>
</keep-alive>

keep-alive有一些属性：

• include - string | RegExp | Array。只有名称匹配的组件会被缓存；
  • 使用逗号分隔字符串
  • 正则表达式使用v-bind绑定属性<keep-alive :include="/a|b/">
  • 数组也是用v-bind绑定属性<keep-alive :include="['a','b']">
• exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存；
• max - number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁；
• include 和 exclude prop 允许组件有条件地缓存：
  • 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示；
  • 匹配首先检查组件自身的 name 选项

缓存组件的生命周期

• 对于缓存的组件来说，再次进入时，我们是不会执行created或者mounted等生命周期函数的
  • 但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件；
  • 这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听

webpack的分包

默认的打包过程：

• 默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组件模块打包到一起（比如一个app.js文件中）；
• 这个时候随着项目的不断庞大，app.js文件的内容过大，会造成首屏的渲染速度变慢

通过import函数导入的模块，后续webpack对其进行打包的时候会进行分包的操作，相当于拆分成一些小的代码块chunk.js

import("./utils/math").then((res)=>{
    console.log(res.sum(20,30))
    //此时math里面的函数都可以通过res.获取
})

异步组件的实现

如果我们的项目过大了，对于某些组件我们希望通过异步的方式来进行加载（目的是可以对其进行分包处理），Vue3提供了一个函数：defineAsyncComponent
defineAsyncComponent接受两种类型的参数：

• 类型一：工厂函数，该工厂函数需要返回一个Promise对象；

import {defineAsyncComponent} from 'vue'
const AsyncComponent = defineAsyncComponent(()=>import("./AsyncComponent.vue"))
export default{
    components:{
        AsyncComponent
    }
}

• 类型二：接受一个对象类型，对异步函数进行配置

const AsyncComponent = defineAsyncComponent({
    loader : () => import("./AsyncComponent"), // 工厂函数
    loadingComponent: Loading, // 加载过程中显示的组件
    errorComponent: Error, // 加载失败显示的组件
    delay: 2000, // 在线显示loadingComponent之前的延迟（单位ms）
    suspensible: true // 定义组件是否可挂起
})

异步组件就是为了实现代码的分包！

suspense

• Suspense是一个内置的全局组件，该组件有两个插槽：
  • default：如果default可以显示，那么显示default的内容；
  • fallback：如果default无法显示，那么会显示fallback插槽的内容；

<suspense>
    <template #default>
        <async-home></async-home>
    </template>
    <template #fallback>
        <Loading></Loading>
    </template>
</suspense>

$

$refs

直接获取到元素对象或者子组件实例

// 绑定到元素上
<h2 ref="title">hahahaa</h2>
// 绑定到组件实例上
<nav-bar ref="navBar"></nav-bar>
<button @click="btnClick">获取元素</button>

methods:{
    btnClick(){
        console.log(this.$refs.title);
        //就相当于组件实例，只是做了一层proxy代理
        console.log(this.$refs.navBar.message) ;
        this.$refs.navBar.showMessage();
    }
}

$parent

可以通过$parent来访问父元素
在Vue3中已经移除了$children的属性，所以不可以使用了

$root

可以通过$root来访问根元素

生命周期

生命周期：每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程
生命周期函数是一些钩子函数，在某个时间会被Vue源码内部进行回调

v-model

<input v-model="message">
相当于
<input :value="message" @input="message=$event.target.value">

组件的v-model
<hy-input v-model="message"></hy-input>
相当于
<hy-input :modelValue="message" @update:model-value="message=$event"></hy-input>

一个组件可以加多个v-model实现数据双向绑定

Mixin

合并规则

• 情况一：如果是data函数的返回值对象
  • 返回值对象默认情况下会进行合并；
  • 如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；
• 情况二：如何生命周期钩子函数
  • 生命周期的钩子函数会被合并到数组中，都会被调用；
• 情况三：值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。
  • 比如都有methods选项，并且都定义了方法，那么它们都会生效；
  • 但是如果对象的key相同，那么会取组件对象的键值对

全局混入

• 全局的Mixin可以使用 应用app的方法 mixin 来完成注册；
• 一旦注册，那么全局混入的选项将会影响每一个组件；

//main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mixin({
    data() {
        return {
            
        }
    },
    methods: {
        
    },
    created(){
        
    }
})
app.mount('#app');