VUE3浅析---内置指令以及生命周期

VUE3的内置指令用法实例以及生命周期函数的使用和原理探索

文章目录

一、内置指令

1、v-text：更新元素的文本内容

const text = "这是测试v-text"
<h1 v-text="text"></h1>

2、v-html：更新元素的文本内容，并且是可以识别html标签的

const html = "<span style='color:red;'>这是测试v-html</span>"
<h1 v-html="html"></h1>

3、v-bind：绑定某一个属性，简写为：

  const id = "123"
  const  flag = true
  const style = {
    
    color: "green"}
  
  <h1 :id="id">这是v-bind绑定id</h1>
  <h1 class="c" :class="['a','b']">这是v-bind绑定class，测试动态增加class</h1>
  <h1 :class="[flag ? 'a' : 'b']">这是v-bind绑定class,测试表达式</h1>
  <h1 :style="style">这是v-bind绑定style</h1>
  
	<style>
		.a {
    
     color:red; }
		.b{
    
     font-size: smaller; }
		.c {
    
     font-family: 'Times New Roman', Times, serif; }
	</style>

4、v-once：只会渲染一次元素

h1标签加了v-once之后，无论按钮点击多少下，值始终为0，不会改变。v-once的使用场景为：当多次触发某些操作时，又不想频繁更新某一个组件时，就可以使用v-once来限制对应的组件。

   import {
    
     ref } from 'vue'
   let count = ref<number>(0)
	const once = () => {
    
    
	  count.value++;
	  console.log(count.value)
	}
  
  <button @click="once" style="height: 100px; width: 100px; background: green;"></button>
  <div>
   <h1 v-text="count" v-once></h1> 
  </div>

5、v-memo：一般配置v-for来使用，使用场景和v-once一样，可以灵活定义限制条件，当v-memo不传值时，作用和v-once一样。

v-memo的作用场景和v-once的使用场景相似，但是比v-once更加灵活，v-memo可以通过自定义限制条件，通过条件是否满足，进而来处理组件。以下场景：当点击了按钮之后，clicked的值变成了0，并且同时我们改变了第一条数据和第二条数据的值，但是发现，渲染的时候只改变了第一条数据。而第二条数据并没有发生变化，这就说明，v-memo中条件成立的数据才会被重新渲染。

import {
    
     ref, reactive } from 'vue'
const clicked = ref(1)
const list = reactive([
    {
    
     id: 0, name: "000" },
    {
    
     id: 1, name: "111" },
    {
    
     id: 2, name: "222" },
    {
    
     id: 3, name: "333" },
]);
const memo = () => {
    
    
    clicked.value = 0;
    list[0].name = "1"; //修改结果 1
    list[2].name = "2"; // 修改结果 2
};
<button @click="memo" style="height: 100px; width: 100px; background: green">memo</button>
<div v-for="(item, index) in list" v-memo="[index == clicked]" :key="index">
	<p>index: {
    
    {
    
     item }} - selected: {
    
    {
    
     clicked }}</p>
</div>

5、v-for：循环，一般在使用的时候，要指定一个key，指定key作用于后续的diff算法有关系

<div v-for="(item, index) in list" :key="index">
	<p> {
    
    {
    
     item }} </p>
</div>

6、v-on：监听绑定事件，也可以简写为@

用来绑定事件，可以是一个方法名，也可以是一个表达式。对于普通函数的调用，还可以通过以下修饰符来处理自定义事件，比如使用.stop来阻止组件的事件触发。

.stop：阻止父组件事件的触发。也就是只执行自己的函数事件。
.{keyAlias} ：只在某些按键下触发处理函数。
.prevent：阻止表单默认事件，会阻止form当中的action行为

<button v-on:click="change" style="width: 100px; height: 30px; background: green">改变值</button>
<button @click="change" style="width: 100px; height: 30px; background: green">改变值</button>

// .once只会让事件触发一次
<button @click.once="change" style="width: 100px; height: 30px; background: green">改变值</button>

// .stop会阻止parent事件的触发
  <div @click="parent">
    <p>{
    
    {
    
     message }}</p>
    <button @click.stop="change1" style="width: 100px; height: 30px; background: green">改变值</button>
  </div>

// .prevent阻止跳转到https://www.baidu.com
  <form action="https://www.baidu.com">
    <button @click.prevent="change2" style="width: 100px; height: 30px; background: green">
      改变值
    </button>
  </form>

import {
    
     ref } from 'vue'

const message = ref('This is a page about stuff')
const change = () => {
    
    
  console.log('change被点击了')
  message.value = 'Hello Vue 3!'
}

const change2 = () => {
    
    
  console.log('change2被点击了')
  message.value = 'Hello Vue 3!'
}

动态事件：

<button v-on:[event]="change" style="width: 100px; height: 30px; background: green">改变值</button>
<button @[event]="change" style="width: 100px; height: 30px; background: green">改变值</button>

7、v-model：绑定模型，将数据绑定某一个组件上。

<input v-model="message" />

import {
    
     ref } from 'vue'
const message = ref('This is a page about stuff')

8、v-pre：将标签里的文本按照Vue的模版语法显示，常见是就是显示{ {}}

<span v-pre>{
    
    {
    
     const a = 1; const b = 2; }}</span>

9、v-show：显示或者隐藏组件

v-show的原理是在组件上增加display样式属性，来达到显示或者隐藏组件的目的。频繁的操作显示隐藏的场景时，使用v-show性能更好。

<button @click="isShow = !isShow" style="width: 100px; height: 30px; background: green">显示隐藏</button>
<span v-show="isShow">显示了</span>

const isShow = ref(true)

10、v-if：显示或者隐藏

v-if的原理是通过创建或者销毁组件，来达到显示或者隐藏组件的目的，一般用在组件在第一次加载的场景时，使用v-if性能更好。

<button @click="isShow = !isShow" style="width: 100px; height: 30px; background: green">显示隐藏</button>
<span v-if="isShow">显示了</span>

const isShow = ref(true)

11、v-solt：插槽

vue中的插槽使得组件设计更加灵活，可以在组件中使用插槽设计灵活的满足组件上动态的化的展示。

11.1、匿名插槽

当我们直接使用<solt></solt>定义插槽的时候，此时的插槽称为匿名插槽。也就是说没有名字的插槽，实际上VUE会这个插槽默认设置一个default的名字。

扫描二维码关注公众号，回复： 15331948 查看本文章

// SoltComponetents.vue
<template>
    <div class="header">
        <slot>这是子组件header内容</slot>
    </div>
</template>

<script setup lang="ts"></script>
<style></style>

// PComponents.vue
<template>
    <SoltComponetents>
        <template #default></template>
    </SoltComponetents>
</template>

<script setup lang="ts">
import SoltComponetents from '../solt/SoltComponetents.vue'
</script>

<style>
.header {
    
    
  background: turquoise;
  width: 100px;
  height: 100px;
}
.main {
    
    
  background: rgb(226, 148, 92);
  width: 100px;
  height: 100px;
}
.bottom {
    
    
  background: rgb(43, 31, 204);
  width: 100px;
  height: 100px;
}
</style>

11.2、具名插槽

当我们直接使用<solt name="main"></solt>定义插槽的时候，此时的插槽称为具名插槽。也就是说给插槽起了个名字叫做main。父组件在使用插槽的时候，使用<template #main></template>使名称为main的插槽生效，其中#main是v-solt:main的缩写。

// SoltComponetents.vue
<template>
    <div class="main">
        <slot name="main">这是子组件main内容</slot>
    </div>
</template>

<script setup lang="ts"></script>
<style></style>

// PComponents.vue
<template>
    <SoltComponetents>
        <template #main></template> 
    </SoltComponetents>
</template>

<script setup lang="ts">
import SoltComponetents from '../solt/SoltComponetents.vue'
</script>

<style>
.header {
    
    
  background: turquoise;
  width: 100px;
  height: 100px;
}
.main {
    
    
  background: rgb(226, 148, 92);
  width: 100px;
  height: 100px;
}
.bottom {
    
    
  background: rgb(43, 31, 204);
  width: 100px;
  height: 100px;
}
</style>

11.3、作用域插槽（插槽传值）

当我们直接使用<solt name="bottom"></solt>定义插槽的时候，可以在插槽内定义数据，并将数据传递到父组件使用

// SoltComponetents.vue
<template>
    <div class="bottom">
        <slot name="bottom" :data="data" :count="count">{
    
    {
    
     pData }}</slot>
    </div>
</template>

<script setup lang="ts">
import {
    
     ref } from 'vue'

const data = ref('这是子组件定义的数据')
const count = ref(100)
</script>

<style></style>

// PComponents.vue
<template>
    <SlotComponetents>
        // <template #bottom="pros"> {
    
    { pros.data }} -- {
    
    { pros.count }} </template> // 如果参数比较多，接受的时候直接使用对象接受，比如使用pros接受，使用pros.count获取对象中count属性的值
        // 如果参数比较少，接受的时候直接使用ES6的{}进行解构接受，这样看起来比较直观
        <template #bottom="{ data, count }"> {
    
    {
    
     data }} -- {
    
    {
    
     count }} </template> 
    </SlotComponetents>
</template>

<script setup lang="ts">
import SlotComponetents from '../slot/SlotComponetents.vue'
</script>

<style>
.header {
    
    
  background: turquoise;
  width: 100px;
  height: 100px;
}
.main {
    
    
  background: rgb(226, 148, 92);
  width: 100px;
  height: 100px;
}
.bottom {
    
    
  background: rgb(43, 31, 204);
  width: 100px;
  height: 100px;
}
</style>

11.4、动态插槽名

动态插槽就是动态的设置插槽的名称，以达到动态设置插槽的目的，实际项目中经常使用，这里不做介绍。

注意：

在父组件中使用插槽的时候，如果直接使用插槽组件，那么插槽组件中定义的多个插槽都可以被展示，一旦在父组件中的插槽组件中加入<template v-solt></template>或者<template></template>标签，那么匿名插槽将不会展示。
在父组件中使用插槽的时候，在父组件中的插槽组件中加入<template #default></template>标签或者一旦指定了任意插槽的名字，即使当前指定的插槽的名称不是匿名插槽的名字，匿名插槽也会被展示。

二、生命周期

1、生命周期钩子介绍：

VUE3 setup语法糖模式下，主要有以下几个生命周期函数。

onBeforeMount：页面加载完成前执行这个生命周期函数，此时不可以获取操作DOM
onMounted：页面加载完成后执行这个生命周期函数，此时可以获取操作DOM
onBeforeUpdate：在改变变量的值之前执行这个生命周期函数
onUpdated：在改变变量的值之后执行这个生命周期函数
onBeforeUnmount：页面加载销毁前执行这个生命周期函数，此时可以获取操作DOM
onUnmounted：页面加载销毁后执行这个生命周期函数，此时不可以获取操作DOM
onActivated：使用<keep-alive></keep-alive>缓存组件时，当组件被加载后会执行这个函数
onDeactivated：使用<keep-alive></keep-alive>缓存组件时，当组件被销毁后会执行这个函数

// // PComponents.vue
<template>
    <button
        @click="show = !show"
        style="width: 80px; height: 40px; background: green"
    >
        删除组件
    </button>
    <keep-alive>
        <SlotComponetents v-if="show">
            <template #bottom="pro">
                {
    
    {
    
     pro.data }} -- {
    
    {
    
     pro.count }}
            </template>
        </SlotComponetents>
    </keep-alive>
</template>

<script setup lang="ts">
import SlotComponetents from '../slot/SlotComponetents.vue'
import {
    
     ref } from 'vue'
const show = ref(true)
</script>

<style>
.header {
    
    
  background: turquoise;
  width: 600px;
  height: 100px;
}
.main {
    
    
  background: rgb(226, 148, 92);
  width: 600px;
  height: 100px;
}
.bottom {
    
    
  background: rgb(43, 31, 204);
  width: 600px;
  height: 100px;
}
</style>

// SoltComponetents.vue
<template>
    <div class="bottom" ref="mainDiv">
        <slot name="bottom" :data="data" :count="count"></slot>
        <button
            @click="add"
            style="width: 80px; height: 40px; background: green"
        >
            加1
        </button>
    </div>
</template>

<script setup lang="ts">
import {
    
    
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue'

const data = ref('这是子组件定义的数据')
const count = ref(100)

const mainDiv = ref<HTMLElement>()

const add = () => {
    
    
  count.value = count.value + 1
}

// 页面加载完成前执行这个生命周期函数，此时不可以获取操作DOM
onBeforeMount(() => console.log('before mount', '获取DOM:', mainDiv.value))

// 页面加载完成后执行这个生命周期函数，此时可以获取操作DOM
onMounted(() => console.log('mounted', '获取DOM:', mainDiv.value))

// 在改变变量的值之前执行这个生命周期函数
onBeforeUpdate(() => console.log('before update', '获取DOM:', mainDiv.value?.innerHTML))

// 在改变变量的值之后执行这个生命周期函数
onUpdated(() => console.log('updated', '获取DOM:', mainDiv.value?.innerHTML))

// 页面加载销毁前执行这个生命周期函数，此时可以获取操作DOM
onBeforeUnmount(() => console.log('before unmount', '获取DOM:', mainDiv.value))

// 页面加载销毁后执行这个生命周期函数，此时不可以获取操作DOM
onUnmounted(() => console.log('unmounted', '获取DOM:', mainDiv.value))

// 使用<keep-alive></keep-alive>缓存组件时，当组件被加载后会执行这个函数
onActivated(() => console.log('active', '获取DOM:', mainDiv.value?.innerHTML))

// 使用<keep-alive></keep-alive>缓存组件时，当组件被销毁后会执行这个函数
onDeactivated(() => console.log('inactive', '获取DOM:', mainDiv.value?.innerHTML))
</script>

<style></style>

2、源码解读：

2.1、注册生命周期函数：

VUE3的生命周期函数的定义在apiLifecycle.ts这个文件中定义的，在这个文件中，通过一下方式导出了常用的生命周期函数，每一个生命周期函数都调用了createHook这个函数，参数实际上是各个生命周期函数的缩写。

export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
export const onMounted = createHook(LifecycleHooks.MOUNTED)
export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
export const onUpdated = createHook(LifecycleHooks.UPDATED)
export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)
export const onServerPrefetch = createHook(LifecycleHooks.SERVER_PREFETCH)

2.2、`createHook`函数实际上会调用`injectHook`，`injectHook`中有一个特殊的参数`target`代表的是当前组件的实例`currentInstance`，而之后，所有的生命周期函数都会被注册到当前实例`currentInstance`上：

// 主要是将生命周期函数挂载到当前实例上，以便于后期渲染页面时调用
export function injectHook(
    type: LifecycleHooks,
    hook: Function & {
    
     __weh?: Function },
    target: ComponentInternalInstance | null = currentInstance,
    prepend: boolean = false
): Function | undefined {
    
    
    if (target) {
    
    
	    // 先从当前实例上获取生命周期函数，如果没有那就初始化为一个空的数组
        const hooks = target[type] || (target[type] = []);
        // cache the error handling wrapper for injected hooks so the same hook
        // can be properly deduped by the scheduler. "__weh" stands for "with error
        // handling".
        const wrappedHook =
            hook.__weh ||
            (hook.__weh = (...args: unknown[]) => {
    
    
			    // 如果当前实例被销毁了，那就不用注册了，直接返回，相当于做了一个缓存
                if (target.isUnmounted) {
    
    
                    return;
                }
                // disable tracking inside all lifecycle hooks
                // since they can potentially be called inside effects.
                // 这里先取消依赖收集，防止重复收集依赖，因为在组件初始化的时候，就已经进行过依赖收集了。
                pauseTracking();
                // Set currentInstance during hook invocation.
                // This assumes the hook does not synchronously trigger other hooks, which
                // can only be false when the user does something really funky.
                // 将target设置为当前实例
                setCurrentInstance(target);
                // 并且执行相应的生命周期函数
                const res = callWithAsyncErrorHandling(
                    hook,
                    target,
                    type,
                    args
                );
                // 释放当前实例
                unsetCurrentInstance();
                // 恢复依赖收集
                resetTracking();
                return res;
            });
        if (prepend) {
    
    
            hooks.unshift(wrappedHook);
        } else {
    
    
            hooks.push(wrappedHook);
        }
        return wrappedHook;
    } else if (__DEV__) {
    
    
        const apiName = toHandlerKey(
            ErrorTypeStrings[type].replace(/ hook$/, "")
        );
        warn(
            `${
      
      apiName} is called when there is no active component instance to be ` +
                `associated with. ` +
                `Lifecycle injection APIs can only be used during execution of setup().` +
                (__FEATURE_SUSPENSE__
                    ? ` If you are using async setup(), make sure to register lifecycle ` +
                      `hooks before the first await statement.`
                    : ``)
        );
    }
}

2.3、调用生命周期函数：

生命周期函数的调用在renderer.ts中，componentUpdateFn函数中会进行函数的调用

const componentUpdateFn = () => {
    
    
	// 先判断下当前组件是不是已经挂载了
    if (!instance.isMounted) {
    
    
        let vnodeHook: VNodeHook | null | undefined;
        const {
    
     el, props } = initialVNode;
        const {
    
     bm, m, parent } = instance;
        const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);

        toggleRecurse(instance, false);
        // beforeMount hook
        // bm就是beforeMount钩子的缩写，如果当前实例上有bm，则先执行bm
        if (bm) {
    
    
            invokeArrayFns(bm);
        }
        
	    // ………………省略部分源码………………

        if (el && hydrateNode) {
    
    
            // vnode has adopted host node - perform hydration instead of mount.
           // ………………省略部分源码………………
           
        // 此时还没有DOM的化，执行下边的逻辑之后，就会将DOM挂载到VNode上，之后就存在DOM了，执行mounted操作就可以操作DOM了。
        } else {
    
    
            if (__DEV__) {
    
    
                startMeasure(instance, `render`);
            }
            const subTree = (instance.subTree = renderComponentRoot(instance));
            if (__DEV__) {
    
    
                endMeasure(instance, `render`);
            }
            if (__DEV__) {
    
    
                startMeasure(instance, `patch`);
            }
            // 将VNode装载到容器当中，此后就会有DOM
            patch(
                null,
                subTree,
                container,
                anchor,
                instance,
                parentSuspense,
                isSVG
            );
            if (__DEV__) {
    
    
                endMeasure(instance, `patch`);
            }
            initialVNode.el = subTree.el; // 挂载DOM
        }
        // mounted hook
        // m就是mounted的缩写，这里执行onMounted生命周期函数
        if (m) {
    
    
            queuePostRenderEffect(m, parentSuspense);
        }
	    // ………………省略部分源码………………
    } else {
    
    

		// ………………省略部分源码………………

        // beforeUpdate hook
        // bu就是beforeUpdate的缩写，这里开始执行onBeforeUpdate生命周期函数
        if (bu) {
    
    
            invokeArrayFns(bu);
        }
        // onVnodeBeforeUpdate
        if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {
    
    
            invokeVNodeHook(vnodeHook, parent, next, vnode);
        }
        
        // ………………省略部分源码………………
        
        // updated hook
        // u就是updated，这里开始执行onUpdated生命周期函数
        if (u) {
    
    
            queuePostRenderEffect(u, parentSuspense);
        }

		// ………………省略部分源码………………
        
    }
};

// unmount进行组件卸载，这里调用unmountComponent函数清空收集的所有依赖
const unmount: UnmountFn = (
    vnode,
    parentComponent,
    parentSuspense,
    doRemove = false,
    optimized = false
) => {
    
    
	// ………………省略部分源码………………
	
	// 清空收集的所有依赖
    unmountComponent(vnode.component!, parentSuspense, doRemove)

	// 清空所有的依赖之后，就会执行onBeforeUnmount生命周期函数
	if (shouldInvokeDirs) {
    
    
	    invokeDirectiveHook(vnode, null, parentComponent, "beforeUnmount");
	}

    // 接着还会调用该函数删除DOM下边的所有子树
	unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true);

	// 最后执行onUnmounted函数，此时表明组件已经卸载完成
	invokeDirectiveHook(vnode, null, parentComponent, 'unmounted')
    
    // ………………省略部分源码………………
};