一些日常使用杂碎的vue3知识点

nextTick

确保 DOM 更新完成后进行操作： 有时你需要在数据变化后立即对 DOM 进行操作，比如获取一个元素的高度或进行动画处理。在数据更新后，DOM 的更新是异步的。使用 nextTick 可以确保你的操作在 DOM 更新完成后执行。

<script setup>

import { ref } from 'vue'

const msg = ref(123)

const divRef = ref(null)

const hanleFn = async () => {

msg.value = 456,

console.log(divRef.value.innerHTML) //123
await nextTick()
console.log(divRef.value.innerHTML) //456
}

</script>

<template>

<div @click="hanleFn" ref="divRef" >{{ msg }}</div>

</template>

teleport

Teleport 是 Vue 3 引入的一个组件，它用于将子组件或元素渲染到 DOM 中的其他位置，而不是它们的父组件所在的位置。这对于创建模态框、通知或工具提示等组件非常有用，因为这些组件通常需要在页面的其他部分显示，而不受父组件的结构影响。

// App.vue
<template>

<div>

<button @click="showModal = true">显示模态框</button>

<Modal v-if="showModal" @close="showModal = false" />

</div>

</template>

<script setup>

import { ref } from 'vue';

import Modal from './Modal.vue';

const showModal = ref(false);

</script>
// Model.vue
<template>

<teleport to="body">

<div class="modal-overlay" @click="closeModal">

<div class="modal-content" @click.stop>

<h2>这是模态框标题</h2>

<p>这是模态框内容。</p>

<button @click="closeModal">关闭</button>

</div>

</div>

</teleport>

</template>

<script setup>

import { defineEmits } from 'vue';

const emit = defineEmits();

const closeModal = () => {

emit('close');

}

</script>

<style>

.modal-overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0, 0, 0, 0.5);

display: flex;

justify-content: center;

align-items: center;

}

.modal-content {

background: white;

padding: 20px;

border-radius: 5px;

}

</style>

watchEffect

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
立即执行：当你调用 watchEffect 时，传入的回调函数会在 watchEffect 运行时立即执行一次。这有助于在组件或响应式数据初始化时立即运行某些逻辑。
自动追踪依赖：在回调函数内部，你可以访问响应式数据。watchEffect 会自动追踪这些数据的依赖关系，并在这些数据发生变化时重新执行回调函数。

<script>
import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {

console.log(`Count is ${count.value}`);

});

// 立即执行一次回调，输出: "Count is 0"

count.value = 1; // 之后的变化会重新执行回调，输出: "Count is 1"
const stop = watchEffect(() => {}) // 当不再需要此侦听器时:
stop()

</script>

组合式函数

组合式函数（Composition Functions）在 Vue 3 中是通过 setup 函数来创建的，用于将逻辑组织在一起。这些函数可以封装和复用组件逻辑，使代码更模块化和可维护。
组合式函数约定以 use 开头命名

//useCounter.js
import { ref } from 'vue';

function useCounter() {

const count = ref(0);

function increment() {

count.value++;

}

return {

count,

increment

};

}

自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。

自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

<script setup>

// 在模板中启用 v-focus

const vFocus = {

mounted: (el) => el.focus()

}

</script>

<template>

<input v-focus />

</template>

指令钩子

一个指令的定义对象可以提供几种钩子函数 (都是可选的)

const myDirective = {

// 在绑定元素的 attribute 前

// 或事件监听器应用前调用

created(el, binding, vnode) {

// 下面会介绍各个参数的细节

},

// 在元素被插入到 DOM 前调用

beforeMount(el, binding, vnode) {},

// 在绑定元素的父组件

// 及他自己的所有子节点都挂载完成后调用

mounted(el, binding, vnode) {},

// 绑定元素的父组件更新前调用

beforeUpdate(el, binding, vnode, prevVnode) {},

// 在绑定元素的父组件

// 及他自己的所有子节点都更新后调用

updated(el, binding, vnode, prevVnode) {},

// 绑定元素的父组件卸载前调用

beforeUnmount(el, binding, vnode) {},

KKKK// 绑定元素的父组件卸载后调用

unmounted(el, binding, vnode) {}

}

对应的例子 点击下拉框显示 点击其他地方下拉框消失

const clickAwayDirective = KK{

beforeMount(el, binding) {

el.clickAwayHandler = (event) => {

if (!(el === event.target || el.contains(event.target))) {

binding.value(event);

}

};

document.addEventListener('click', el.clickAwayHandler);

},

unmounted(el) {
KK
document.removeEventListener('click', el.clickAwayHandler);

delete el.clickAwayHandler;

}

};

export default clickAwayDirective;
//App.vue
template>

<div>

<button @click="toggleDropdown">Toggle Dropdown</button>

<div v-if="isDropdownOpen" v-click-away="closeDropdown" class="dropdown">

<p>Dropdown Content</p>

</div>

</div>

</template>

  

<script setup>

import { ref } from 'vue';

import clickAwayDirective from './clickAwayDirective'; // 根据实际路径调整

  

const isDropdownOpen = ref(false);

  

function toggleDropdown() {

isDropdownOpen.value = !isDropdownOpen.value;

}

  

function closeDropdown() {

isDropdownOpen.value = false;

}

</script>

  

<script>

import clickAwayDirective from './clickAwayDirective'; // 根据实际路径调整

  

export default {

directives: {

clickAway: clickAwayDirective

}

};

</script>

  

<style>

.dropdown {

position: absolute;

background: white;

border: 1px solid #ccc;

padding: 10px;

}

</style>

自定义插件

我们想要在追加全局功能的时候都有什么呢

//全局组件:app.component('ComponentName', Component)` 进行注册。
//全局指令: app.directive('directiveName', directiveDefinition).
//全局属性性:app.config.globalProperties.$globalMethod = () => { console.log('This is a global method'); };
//全局插件
//app.use(myPlugin);

自定义插件在 Vue 中是一个用于封装和扩展功能的工具。想象一下你有一个工具箱（插件），里面装了很多你常用的工具（功能）。每次你需要这些工具时，只需拿出工具箱即可，不用每次都重新制造它们。

创建自定义插件的步骤很简单：

1. 定义插件：创建一个 JavaScript 对象，这个对象有一个 install 方法。
2. 在 install 方法中添加功能：这个方法会在插件被使用时自动调用。在这里，你可以给 Vue 实例添加全局功能，比如方法、组件或指令。
3. 使用插件：在 Vue 应用中，通过 app.use(plugin) 将插件注册到 Vue 实例上。

// myPlugin
export default {

install(app) {

// 使用 app.provide 提供全局数据

app.provide('themeColor', 'blue');

}

};
//App.vue
import { createApp } from 'vue';

import App from './App.vue';

import myPlugin from './myPlugin';

const app = createApp(App);

app.use(myPlugin);

app.mount('#app');;
//任一组件
<script setup>

import { inject } from 'vue';

const themeColor = inject('themeColor');

</script>
;

如果对你有所帮助的话 就点个关注吧