前端开发核心知识点深度解析：从CSS到Vue的全面指南
一、CSS篇
1. link与@import的区别
-
加载方式：
<link>是HTML标签，并行加载；@import是CSS语法，串行加载 -
兼容性：
@import不支持IE5以下 -
DOM控制：
link可通过JS操作DOM修改，@import不可动态修改 -
权重计算：
@import引入的样式优先级低于link
<!-- link示例 -->
<link rel="stylesheet" href="style.css">
<!-- @import示例 -->
<style>
@import url('style.css');
</style>
二、JavaScript篇
2. 原型链机制
-
原型对象：每个函数都有
prototype属性，实例通过__proto__访问 -
继承链：
实例 → 构造函数.prototype → Object.prototype → null -
属性查找：沿原型链向上查找，直到找到或到达末端
function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function() {
console.log(this.name + ' eats');
};
const cat = new Animal('Tom');
cat.eat(); // 通过原型链调用
3. 闭包原理
-
定义：函数与其词法环境的引用绑定
-
特性：保持对外部变量的访问权
-
应用：私有变量、函数工厂、模块化
-
内存泄漏：需手动解除引用
function createCounter() {
let count = 0;
return {
increment: () => count++,
get: () => count
};
}
4. ES5与ES6核心区别
| 特性 | ES5 | ES6 |
|---|---|---|
| 变量声明 | var（函数作用域） | let/const（块级作用域） |
| 函数 | 函数声明 | 箭头函数 |
| 面向对象 | 构造函数 | class语法 |
| 模块化 | 无 | import/export |
| 异步处理 | 回调函数 | Promise |
三、Vue.js篇
5. 常用指令
-
核心指令：v-bind, v-model, v-for, v-if, v-show
-
事件处理：v-on
-
特殊属性：v-slot, v-pre
-
自定义指令：实现DOM操作封装
<template>
<div v-if="show" v-bind:class="{active: isActive}">
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</div>
</template>
6. Vue2生命周期
| 阶段 | 钩子函数 | 应用场景 |
|---|---|---|
| 创建阶段 | beforeCreate | 初始化事件/生命周期 |
| created | 数据观测完成 | |
| 挂载阶段 | beforeMount | 编译模板 |
| mounted | DOM挂载完成 | |
| 更新阶段 | beforeUpdate | 数据变化，DOM未更新 |
| updated | DOM更新完成 | |
| 销毁阶段 | beforeDestroy | 实例销毁前清理 |
| destroyed | 实例销毁 |
7. mounted阶段特性
-
DOM状态：已完成初始渲染
-
注意事项：子组件可能未完全挂载
-
典型应用：发起API请求、操作DOM
11. v-if与v-show
-
渲染方式：v-if条件性渲染，v-show控制display属性
-
切换成本：v-if更高的切换开销，v-show更高的初始渲染成本
-
内存管理：v-if会销毁组件，v-show保持组件状态
四、组件通信篇
13. 通信方式对比
| 类型 | 方法 | 适用场景 |
|---|---|---|
| 父子组件 | props/$emit | 直接层级关系 |
| 兄弟组件 | Event Bus/Vuex | 无直接关系组件 |
| 隔代组件 | provide/inject | 深层嵌套 |
| 任意组件 | Vuex状态管理 | 复杂应用数据共享 |
19. $emit应用
// 子组件
this.$emit('update-data', newData);
// 父组件
<child-component @update-data="handleUpdate"/>
五、路由系统篇
14. 静态路由 vs 动态路由
-
静态路由：预先定义完整路由表
-
动态路由：运行时添加路由规则
-
应用场景：权限控制、按需加载
15. 路由参数传递
// 声明式
<router-link :to="{ name: 'user', params: { id: 123 }}">
// 编程式
this.$router.push({ path: `/user/${userId}` })
// 获取参数
this.$route.params.id
17. 懒加载实现
// 路由懒加载
const User = () => import('./User.vue')
// 组件懒加载
<template>
<LazyComponent v-if="show"/>
</template>
六、可视化与样式篇
18. ECharts核心应用
-
核心函数：
setOption(),resize(),dispatchAction() -
常用功能：
-
数据实时更新：
setOption合并新数据 -
图表自适应：监听
resize事件 -
事件交互：
on('click')处理用户操作
-
12. 字体颜色异常排查
-
CSS优先级冲突（!important覆盖）
-
继承属性被重置
-
浏览器缓存未更新
-
选择器权重计算错误
-
异步加载样式延迟
七、架构原理篇
20. Vue核心机制
-
响应式系统：Object.defineProperty（Vue2）/Proxy（Vue3）
-
虚拟DOM：Diff算法优化渲染性能
-
模板编译：将模板转为渲染函数
21. MVVM模式解析
graph LR
Model[数据模型] --> ViewModel[视图模型]
ViewModel --> View[视图]
View --> ViewModel
-
数据绑定：实现Model到View的自动同步
-
DOM监听：View变化实时更新Model
总结
本文涵盖了前端开发的核心知识点体系，从CSS基础到Vue.js高级特性，再到项目实践中的常见问题解决方案。建议读者：
-
动手实践所有代码示例
-
使用Chrome DevTools调试DOM和网络请求
-
结合项目需求选择合适的解决方案
-
持续关注Vue3和ECMAScript新特性
推荐学习路线：
-
基础：MDN Web Docs → Vue官方文档
-
进阶：《JavaScript高级程序设计》→ Vue源码解析
-
实战：开发一个完整的后台管理系统