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 中是一个用于封装和扩展功能的工具。想象一下你有一个工具箱(插件),里面装了很多你常用的工具(功能)。每次你需要这些工具时,只需拿出工具箱即可,不用每次都重新制造它们。
创建自定义插件的步骤很简单:
- 定义插件:创建一个 JavaScript 对象,这个对象有一个
install
方法。 - 在
install
方法中添加功能:这个方法会在插件被使用时自动调用。在这里,你可以给 Vue 实例添加全局功能,比如方法、组件或指令。 - 使用插件:在 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>
;
如果对你有所帮助的话 就点个关注吧