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

本文主要是介绍一些日常使用杂碎的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-focusconst 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>
;

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

这篇关于一些日常使用杂碎的vue3知识点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---