前端开发核心知识点深度解析：从CSS到Vue的全面指南

一、CSS篇

1. link与@import的区别

• 加载方式：是HTML标签，并行加载；@import是CSS语法，串行加载

• 兼容性：@import不支持IE5以下

• DOM控制：link可通过JS操作DOM修改，@import不可动态修改

• 权重计算：@import引入的样式优先级低于link

---

二、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操作封装

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);

// 父组件

---

五、路由系统篇

14. 静态路由 vs 动态路由

• 静态路由：预先定义完整路由表

• 动态路由：运行时添加路由规则

• 应用场景：权限控制、按需加载

15. 路由参数传递

// 声明式


// 编程式
this.$router.push({ path: `/user/${userId}` })

// 获取参数
this.$route.params.id

17. 懒加载实现

// 路由懒加载
const User = () => import('./User.vue')

// 组件懒加载

---

六、可视化与样式篇

18. ECharts核心应用

• 核心函数：setOption(), resize(), dispatchAction()

• 常用功能：

  • 数据实时更新：setOption合并新数据

  • 图表自适应：监听resize事件

  • 事件交互：on('click')处理用户操作

12. 字体颜色异常排查

1. CSS优先级冲突（!important覆盖）

2. 继承属性被重置

3. 浏览器缓存未更新

4. 选择器权重计算错误

5. 异步加载样式延迟

---

七、架构原理篇

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高级特性，再到项目实践中的常见问题解决方案。建议读者：

1. 动手实践所有代码示例

2. 使用Chrome DevTools调试DOM和网络请求

3. 结合项目需求选择合适的解决方案

4. 持续关注Vue3和ECMAScript新特性

推荐学习路线：

• 基础：MDN Web Docs → Vue官方文档

• 进阶：《JavaScript高级程序设计》→ Vue源码解析

• 实战：开发一个完整的后台管理系统