Vue 3 高级编程技巧

Vue 3 高级编程技巧

1. 计算属性 (Computed Properties)

含义：计算属性在依赖变化时会自动更新。以下是一个示例，展示当 firstName 或 lastName 变化时，fullName 也会更新。

实例：

<script setup>
import { ref, computed } from 'vue';const firstName = ref('John');
const lastName = ref('Doe');// 计算属性
const fullName = computed(() => {return `${firstName.value} ${lastName.value}`;
});const reversedFullName = computed(() => {return fullName.value.split('').reverse().join('');
});const fullNameLength = computed(() => {return fullName.value.length;
});
</script><template><div><input v-model="firstName" placeholder="First Name" /><input v-model="lastName" placeholder="Last Name" /><p>Full Name: {{ fullName }}</p><p>Reversed Full Name: {{ reversedFullName }}</p><p>Full Name Length: {{ fullNameLength }}</p></div>
</template>

2. 插槽 (Slots)

含义：插槽允许组件接收模板内容，并在组件内部渲染这些内容。它们提供了灵活的布局和内容分发机制。使用 #header 或 v-slot 语法来定义插槽内容。

实例：

<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue';
</script><template><ChildComponent><template #header><h1>Header Content</h1></template><p>Default Slot Content</p></ChildComponent>
</template><!-- ChildComponent.vue -->
<script setup>
</script><template><div><slot name="header"></slot><slot></slot></div>
</template>

3. 动态组件 (Dynamic Components)

含义：动态组件允许在运行时根据需要切换不同的组件。结合 component 标签和 is 属性实现。

实例：

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';const currentComponent = ref('ComponentA');
</script><template><component :is="currentComponent" /><button @click="currentComponent = 'ComponentA'">Show Component A</button><button @click="currentComponent = 'ComponentB'">Show Component B</button>
</template>

4. 自定义指令 (Custom Directives)

含义：自定义指令用于直接操作 DOM 元素，可以用于添加事件监听器、修改样式等。

实例：

<script setup>
import { onMounted } from 'vue';const vFocus = {mounted(el) {el.focus();}
};const vHighlight = {mounted(el) {el.style.backgroundColor = 'yellow';}
};const vLog = {mounted(el) {console.log('Element mounted:', el);}
};
</script><template><input v-focus /><div v-highlight>Highlighted Text</div><div v-log>This element logs to console on mount.</div>
</template>

5. watch

含义：watch 用于观察和响应 Vue 实例上的数据变动。当数据发生变化时，watch 可以执行异步操作或开销较大的操作，并获取变化前后的值。

实例：

<script setup>
import { ref, watch } from 'vue';const message = ref('Hello Vue!');
const count = ref(0);
const items = ref(['apple', 'banana', 'cherry']);
const user = ref({ name: 'Alice', age: 30 });// 监听单个响应式变量
watch(message, (newVal, oldVal) => {console.log(`message changed from ${oldVal} to ${newVal}`);
});// 监听对象属性
watch(() => user.value.name,(newName, oldName) => {console.log(`user name changed from ${oldName} to ${newName}`);}
);// 监听数组的单个元素
watch(() => items.value[0],(newVal, oldVal) => {console.log(`First item changed from ${oldVal} to ${newVal}`);}
);// 监听多个响应式变量
watch([message, count], ([newMessage, newCount], [oldMessage, oldCount]) => {console.log(`message changed from ${oldMessage} to ${newMessage}`);console.log(`count changed from ${oldCount} to ${newCount}`);
});// 监听数组的多个元素
watch([() => items.value[0], () => items.value[1]],([newFirst, newSecond], [oldFirst, oldSecond]) => {console.log(`First item changed from ${oldFirst} to ${newFirst}`);console.log(`Second item changed from ${oldSecond} to ${newSecond}`);}
);// 深度监听对象
watch(user,(newVal) => {console.log('user changed:', newVal);},{ deep: true }
);
</script><template><div><input v-model="message" placeholder="Message" /><button @click="count++">Increment Count: {{ count }}</button><button @click="items[0] = 'orange'">Change First Item</button><button @click="items[1] = 'grape'">Change Second Item</button><button @click="user.name = 'Bob'">Change User Name</button></div>
</template>

6. provide + inject

含义：provide 和 inject 用于在组件树中传递数据，适用父子组件,查找第一层父/子组件传递的数据

实例：

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const theme = ref('dark');
provide('theme', theme);
</script><template><ChildComponent />
</template><!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';const theme = inject('theme');
</script><template><div :class="theme">Current theme: {{ theme }}</div>
</template>