Vue一些进阶知识-基于官网(笔记)

前言

主要根据vue官网文档完成。对一些平时可能会用到的知识、组件进行收集，为的是对vue的可用性有一个大致的了解。博客中的组件介绍可能只涉及简单用法，完整用法还是以官网为准。

基础

启动过程：

主文件(main.js)是程序的起点，在主文件里挂在容器。如app.mount('#app')。然后系统会去找id为app的页面作为首页。在主文件里可以定义一些全局通用的组件

app.component(
　　// 注册的名字
　　'MyComponent',
　　// 组件的实现
　　{
　　/* ... */
　　}
)

api风格：

选项式：传统的方法、参数使用data、method关键字分隔的方式。

组合式：方法和参数写在一起的方式。官方推荐组合式

参数

组件上的参数名可以动态配置。

<a :[someAttr]="value"> ... </a>

绑定数据data

在声明修改vue绑定值后，更新到DOM里存储的值会以异步的方式执行。

可以通过nextTick 去定义 更新完成后执行的操作。类似的是通过async 、await去让异步执行的接口查询方法同步执行。

this.message = 'Hello World';
this.$nextTick(() => {})

computed

computed方法与普通方法区别是computed方法会有缓存，在内部的计算参数更新后才会执行更新。而方法每次都会更新。

对于computed里的参数方法，不应该去修改其他参数值，以及执行异步操作，应该只用于计算值。

computed方法与普通方法区别是computed方法会有缓存，在内部的计算参数更新后才会执行更新。而方法每次都会更新。

对于computed里的参数方法，不应该去修改其他参数值，以及执行异步操作，应该只用于计算值。

class与style属性

class属性也可以通过参数来绑定

<div
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
    ></div>
data() {
    return {
    　　isActive: true,
        hasError: false
    }
}        

等同于

<div class="static active"></div>

也可以直接传一个对象，对象内属性名与boolean值

自定义组件上定义的class会继承到组件内部

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

父子组件交互

父组件通过@定义方法名，子组件通过this.$emit()调用父类方法

<button @click="$emit('enlarge-text')">Enlarge text</button>

插槽

对于父类组件里定义的内容希望展示在子组件，可以通过slot 标签，会让父类组件中子组件标签内定义的内容在slot标签位置展示

<AlertBox>
    Something bad happened.
</AlertBox>
<template>
    <div class="alert-box">
        <strong>This is an Error for Demo Purposes</strong>
        <slot />
    </div>
</template>

默认内容：可以在slot标签内定义内容，作为父组件没有定义内容时的默认展示信息

多组插槽：使用template标签包住，用#定义插槽名（也可以动态配置：#[dynamicSlotName]）。子组件里slot用name接收。

父组件：

<BaseLayout>
　　<template #header>
　　<h1>Here might be a page title</h1>
　　</template>
<!-- 隐式的默认插槽 -->
　　<p>A paragraph for the main content.</p>
　　<p>And another one.</p>
　　<template #footer>
　　　　<p>Here's some contact info</p>
　　</template>
</BaseLayout>

子组件：

<div class="container">
　　<header>
　　　　<slot name="header"></slot>
　　</header>
　　<main>
　　　　<slot></slot>
　　</main>
　　<footer>
　　　　<slot name="footer"></slot>
　　</footer>
</div>

最终渲染：

<div class="container">
　　<header>
　　　　<h1>Here might be a page title</h1>
　　</header>
　　<main>
　　　　<p>A paragraph for the main content.</p>
　　　　<p>And another one.</p>
　　</main>
　　<footer>
　　　　<p>Here's some contact info</p>
　　</footer>
</div>

其他

prop中的type可以定义成多个可能的类型

引用组件的 v-model 上所添加的修饰符，可以在组件里的prop 通过 modelModifiers 访问到

透传

子组件如果只存在一个根节点（多个根节点不会发生），那么会继承父组件的style、class、监听事件。称为透传。可以通过inheritAttrs: false 来避免透传。透传的参数可以在子组件上通过$attrs访问

依赖注入

如果存在多层组件，且中间组件用不到位于顶端的组件里的方法和参数，那么一层层使用props进行注入就会很麻烦，这时可以通过依赖注入实现。

父组件里使用provide传出：

export default {
　　provide() {
　　　　return {
　　　　　　// 将数据或方法作为键值对传递给子组件
　　　　　　someData: '这是传递给子组件的数据',
　　　　　　someMethod: () => {
　　　　　　　　console.log('这是传递给子组件的方法');
　　　　　　}
　　　　};
　　}
};

子组件里使用inject接收：

export default {
　　inject: ['someData', 'someMethod'],
　　mounted() {
　　　　console.log(this.someData); // 输出："这是传递给子组件的数据"
　　　　this.someMethod(); // 输出："这是传递给子组件的方法"
　　}
};

异步组件

异步组件指的是某些不需要页面开始就加载的组件可以异步加载，不会阻塞主线程。

使用defineAsyncComponent去定义异步组件

如：

<script>
　　import { defineAsyncComponent } from 'vue'
　　export default {
　　　　components: {
　　　　　　AdminPage: defineAsyncComponent(() =>
　　　　　　import('./components/AdminPageComponent.vue')
　　　　)}
　　}
</script>
<template>
　　<AdminPage />
</template>

全局组件：

app.component('MyComponent', defineAsyncComponent(() =>
　　import('./components/MyComponent.vue')
))

如果追求其他一些配置，可以：

const AsyncComp = defineAsyncComponent({
　　// 要加载的组件
　　loader: () => import('./Foo.vue'),
　　// 加载异步组件过程中展示的组件
　　loadingComponent: LoadingComponent,
　　// 展示加载组件前的延迟时间，默认为 200ms
　　delay: 200,
　　// 加载失败后展示的组件
　　errorComponent: ErrorComponent,
　　// 如果提供了一个 timeout 时间限制，并超时了
　　// 也会显示这里配置的报错组件，默认值是：Infinity
　　timeout: 3000
})

原生HTML里使用vue注意

1. html里不分大小写，会统一成小写
2. 需要显性声明闭合标签
3. 某些元素位置位置会被限制。例如 <ul>，<ol>，<table> 和 <select>，相应的，某些元素仅在放置于特定元素中时才会显示，例如 <li>，<tr> 和 <option>。

<table>
　　<blog-post-row></blog-post-row>
</table>

不生效，需要写成

<table>
　　<tr is="vue:blog-post-row"></tr>
</table>

事件的修饰词

如

<button @click.stop="childClick">子元素</button>

1. once 。表示当前事件只会执行一次。执行完成后就会移除。
2. stop。表示不会向父类组件触发。如父组件和子组件都设定了点击事件，子类点击事件配置为<button @click.stop="childClick">子元素</button>。那么点击子类组件就不会触发父类的事件
3. prevent。组件当前标签默认的事件执行。如form的submit按钮点击默认会提交事件，而.prevent会阻止表单提交
4. capture。修改事件的传播机制。如默认父子组件的相同事件，会先执行子组件事件，再执行父组件事件，在父组件上使用capture，就会先执行父组件事件，再执行子组件事件。
5. self。只会在标签本身修饰的信息上操作才会触发。如

<template>
　　<div @click.self="divClick">
　　　　点击我！
　　　　<button>不要点击我</button>
　　</div>
</template>

点击button不会触发divClick事件，在点击”点击我！”才会触发

6、passive。表示方法会异步执行，不会影响操作默认的动作。如定义一个滚动事件，不希望滚动时不会先执行定义的滚动事件，执行完再继续滚动，而是滚动和事件执行同步进行。

<template>
　　<div @scroll.passive="handleScroll">
　　　　<!-- 页面内容 -->
　　</div>
</template>

<script>
　　export default {
　　　　methods: {
　　　　　　handleScroll() {
　　　　　　// 处理滚动事件的逻辑
　　　　　　}
　　　　}
　　}
</script>

绑定参数修饰词

<MyComponent v-model.lazy="myText" />

1. lazy。输入内容后不立刻修改绑定值。当用户的input中失去焦点或者用户点击回车按钮时，才会将后台的数据进行修改。
2. number。默认下系统会将数字转成字符串，number可以转成number类型
3. trim。默认下会保留空格，trim会去除内容的空格

对于引用组件上自定义参数+修饰词，可以在子组件上的props里通过自定义参数名+”Modifiers” 来获取，而可以通过自定义参数名获取原值。

父组件：

<MyComponent v-model:title.capitalize="myText">

子组件：

export default {
　　props: ['title', 'titleModifiers'],
　　emits: ['update:title'],
　　created() {
　　　　console.log(this.titleModifiers) // { capitalize: true }
　　}
}

逻辑复用

Mixin

单独的参数、方法封装成一个文件，使用Mixin引入使用。

<script>
　　import { shopMixin } from '@/store/mixin';
　　export default {
　　　　mixins: [shopMixin],
　　}

</script>

组合式函数

比mixin更易拓展。vue3新特性。

自定义组件

定义一个能实现特定功能的组件。如自动聚焦

组件：

const focus = {
　　mounted: (el) => el.focus()
}
export default {
　　directives: {
　　// 在模板中启用 v-focus
　　　　focus
　　}
}

使用：

<input v-focus />

也可以全局定义：

const app = createApp({})
　　// 使 v-focus 在所有组件中都可用
　　app.directive('focus', {
　　/* ... */
})

自定义插件

对于一些全局使用的方法、组件。可以考虑封装成一个插件。在Vue定义时注册。

动画

Transition

应用于组件变化的动画。

<button @click="show = !show">Toggle</button>
<Transition>
　　<p v-if="show">hello</p>
</Transition>

如果组件本身配置css的动画，那么会兼容

自定义配置Transition不同节点的动画：

1、v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。

2、v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

3、v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。

4、v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。

5、v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

6、v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

可以自定义class名称。

enter-from-class

enter-active-class

enter-to-class

leave-from-class

leave-active-class

leave-to-class

如：

<!-- 假设你已经在页面中引入了 Animate.css -->
<Transition
　　name="custom-classes"
　　enter-active-class="animate__animated animate__tada"
　　leave-active-class="animate__animated animate__bounceOutRight"
>
<p v-if="show">hello</p>
</Transition>

Transition标签只能影响内部直接的子组件，如果是存在嵌套关系，可以通过css选择器实现。

如：

<Transition name="nested">
　　<div v-if="show" class="outer">
　　　　<div class="inner">
　　　　　　Hello
　　　　</div>
　　</div>
</Transition>
/* 延迟嵌套元素的进入以获得交错效果 */
.nested-enter-active .inner {
　　transition-delay: 0.25s;
}

分类

配置name属性

<Transition name="fade">
...
</Transition>

对应的css动画节点名称v变成name。如

.v-enter-active 就要变成.fade-enter-active

更多使用见官网...

TransitionGroup

应用于循环组件的动画。

样式和Transition 一致，前缀改成list

<TransitionGroup name="list" tag="ul">
　　<li v-for="item in items" :key="item">
　　　　{{ item }}
　　</li>
</TransitionGroup>
.list-enter-active,
.list-leave-active {
　　transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
　　opacity: 0;
　　transform: translateX(30px);
}

KeepAlive

使组件保持活跃状态，状态不会被清除

如果想定义一个动态组件，在组件切换为其他类型时，前一个组件实例就会被清除，再次切换回来之前的数据也会被重置。使用KeepAlive可以在切换时也保持之前的数据状态。

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
　　<component :is="activeComponent" />
</KeepAlive>

可以通过include 定义需要缓存状态的组件实例名。实例名用name定义

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
　　<component :is="view" />
</KeepAlive>
<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
　　<component :is="view" />
</KeepAlive>
<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
　　<component :is="view" />
</KeepAlive>

使用max来限制最大缓存实例数

<KeepAlive :max="10">
　　<component :is="activeComponent" />
</KeepAlive>

使用activated 和 deactivated 作为组件的钩子函数。

Teleport

将组件移到制定的元素下面。

<div class="outer">
　　<h3>Tooltips with Vue 3 Teleport</h3>
<div>
<button @click="open = true">Open Modal</button>
<div v-if="open" class="modal">
　　<p>Hello from the modal!</p>
　　<button @click="open = false">Close</button>
</div>
<style scoped>
.modal {
　　position: fixed;
　　z-index: 999;
　　top: 20%;
　　left: 50%;
　　width: 300px;
　　margin-left: -150px;
}
</style>

如果直接使用，遇到outer下直接的元素进行布局调整就会冲突，影响class=modal的弹窗展示。这种情况可以使用Teleport 标签包裹并制定要转移的标签下面

<Teleport to="body">
　　<div v-if="open" class="modal">
　　<p>Hello from the modal!</p>
　　<button @click="open = false">Close</button>
　　</div>
</Teleport>