以下是 Vue.js 的重要知识点及代码示例:
1. 响应式数据
Vue 通过 ref
和 reactive
实现数据响应式。
<script setup>
import { ref, reactive } from 'vue';const count = ref(0); // 基本类型用 ref
const user = reactive({ name: 'Alice', age: 25 }); // 对象用 reactivefunction increment() {count.value++; // ref 需要 .value 访问user.age++;
}
</script><template><button @click="increment">{{ count }}</button><p>{{ user.name }} - {{ user.age }}</p>
</template>
2. 模板语法
- 插值:
{{ }}
- 指令:
v-bind
,v-model
,v-if
,v-for
等
<template><!-- 绑定属性 --><a :href="url">Link</a><!-- 双向绑定 --><input v-model="message"><!-- 条件渲染 --><div v-if="isVisible">显示内容</div><!-- 列表渲染 --><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template>
3. 组件通信
-
Props(父传子):
<!-- 父组件 --> <ChildComponent :message="parentMsg" /><!-- 子组件 --> <script setup> const props = defineProps({message: String }); </script>
-
自定义事件(子传父):
<!-- 子组件 --> <button @click="$emit('update', data)">提交</button><!-- 父组件 --> <ChildComponent @update="handleUpdate" />
4. 计算属性 & 侦听器
-
计算属性:缓存结果,依赖变化时重新计算
<script setup> import { computed } from 'vue'; const fullName = computed(() => `${firstName} ${lastName}`); </script>
-
侦听器:监听数据变化执行副作用
<script setup> import { watch } from 'vue'; watch(count, (newVal, oldVal) => {console.log(`Count changed from ${oldVal} to ${newVal}`); }); </script>
5. 生命周期钩子
常用钩子:onMounted
, onUpdated
, onUnmounted
(Vue 3 组合式 API)
<script setup>
import { onMounted } from 'vue';onMounted(() => {console.log('组件挂载完成');fetchData(); // 初始化数据
});
</script>
6. Vue Router
-
路由配置:
// router.js const routes = [{ path: '/', component: Home },{ path: '/about', component: About } ];
-
导航守卫:
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isLoggedIn) next('/login');else next(); });
7. Vuex(状态管理)
-
核心概念:
// store.js const store = createStore({state: { count: 0 },mutations: {increment(state) { state.count++; }},actions: {asyncIncrement({ commit }) {setTimeout(() => commit('increment'), 1000);}} });
-
组件中使用:
<script setup> import { useStore } from 'vuex'; const store = useStore(); const count = computed(() => store.state.count); </script>
8. 组合式 API(Composition API)
Vue 3 的特性,替代 Options API:
<script setup>
import { ref, onMounted } from 'vue';// 逻辑复用示例:鼠标跟踪
function useMouse() {const x = ref(0);const y = ref(0);onMounted(() => {window.addEventListener('mousemove', (e) => {x.value = e.clientX;y.value = e.clientY;});});return { x, y };
}const { x, y } = useMouse();
</script><template>鼠标位置:{{ x }}, {{ y }}</template>
总结
以上是 Vue 的核心知识点,实际开发中还可能涉及:
- 自定义指令
- 过渡动画(
<transition>
) - 服务端渲染(SSR)
- 性能优化(如
v-once
、keep-alive
) - TypeScript 集成等
可以根据项目需求进一步深入!