前端开发核心知识详解：Vue2、JavaScript 与 CSS

一、Vue2 核心知识点

1. Vue2 的双向绑定原理

Vue2 实现双向绑定主要依赖数据劫持与发布 - 订阅者模式。

利用Object.defineProperty方法对数据对象的属性进行劫持，为每个属性定义getter和setter。getter用于收集依赖，当视图中使用到该属性时，对应的Watcher会被添加到Dep（依赖）中；setter则在属性值发生变化时，触发Dep通知所有依赖该属性的Watcher，进而更新视图。

例如，在一个简单的数据对象上实现数据劫持：

javascript 复制代码

function defineReactive(obj, key, value) {
    const dep = new Dep();
    Object.defineProperty(obj, key, {
        get() {
            Dep.target && dep.addSub(Dep.target);
            return value;
        },
        set(newVal) {
            if (value!== newVal) {
                value = newVal;
                dep.notify();
            }
        }
    });
}

而v-model指令实现的双向绑定，本质上是:value与@input的语法糖，在数据和视图之间建立起双向的联系。

2. Vue2 开发注意事项

在 Vue2 开发中，要特别关注响应式数据的问题。由于Object.defineProperty的局限性，对于对象新增属性，Vue 无法自动检测到变化。此时需要使用Vue.set()或this.$set()方法来添加属性，确保数据变化能被正确监听。

对于数组，直接通过索引修改元素或修改数组长度，Vue 也无法检测到变化。应使用push()、pop()、splice()等被 Vue 重写的数组方法，或者使用Vue.set()、splice()方法来更新数组元素。

3. Vue2 数据监听不到的处理

当出现数据监听不到的情况，除了上述提到的使用Vue.set()或this.$set()处理对象新增属性和数组元素修改外，对于批量更新数据，可以利用Vue.nextTick()方法。

它能在下次 DOM 更新循环结束之后执行延迟回调，确保在数据更新后，基于更新后的数据进行操作。

4. v-if 和 v-show 的区别与应用场景

v-if和v-show都能控制元素的显示与隐藏，但原理和应用场景有所不同。v-if是根据条件动态地创建或销毁 DOM 元素，当条件为假时，元素会从 DOM 树中彻底移除，初始渲染时若条件为假则不渲染。因此它适合用于低频切换的场景，比如根据用户权限控制某些功能模块的显示。

v-show则是通过 CSS 的display属性来控制元素的显示与隐藏，无论初始条件如何，元素都会被渲染到 DOM 中，只是通过样式来决定是否显示。这种方式切换开销较小，适用于高频切换的场景，例如选项卡的显示状态切换。

5. 计算属性 computed 和监听属性 watch 的区别

计算属性computed基于依赖缓存结果，只有当依赖的响应式数据发生变化时，才会重新计算。它适合用于将多个数据进行复杂逻辑处理后映射到视图的场景，例如根据firstName和lastName计算出fullName。

监听属性watch则专注于监听特定数据的变化，当监听的数据发生变化时，会执行对应的回调函数。它支持异步操作和深度监听，常用于处理数据变化后的副作用，比如在用户 ID 变化时，发起获取用户详情的请求。

6. Vue2 的生命周期

Vue2 的生命周期包括创建阶段、挂载阶段、更新阶段和卸载阶段。

创建阶段 ：beforeCreate阶段，实例刚被创建，此时还未进行数据观测和事件初始化；created阶段，数据初始化完成，可以在这个阶段发起无 DOM 依赖的接口请求。
挂载阶段 ：beforeMount阶段，模板编译完成，但尚未挂载到 DOM；mounted阶段，DOM 挂载完成，这是发起需要 DOM 的接口请求的最佳时机。
更新阶段 ：beforeUpdate阶段，数据更新前，此时 DOM 尚未更新；updated阶段，DOM 更新完成。
卸载阶段 ：beforeDestroy阶段，实例销毁前，可在此清理定时器等资源；destroyed阶段，实例销毁完成。

二、CSS 核心知识点

1. CSS3 新属性

CSS3 引入了众多强大的新属性。在选择器方面，新增了结构性伪类如**nth-child(n)、first-of-type、not()** ，以及属性选择器如[data-type^="app"]（开头匹配）、[class*="box"]（包含匹配）。

视觉效果上，box-shadow用于添加盒阴影，background: linear-gradient(to bottom, #fff, #000) 可创建渐变背景，**border-radius**实现圆角边框。

2D/3D 转换属性中，transform 用于位移、旋转等操作，perspective 则提供 3D 透视效果。动画与过渡方面，transition 实现过渡效果，**@keyframes**定义关键帧动画。

2. flex 布局

flex布局是一种一维布局模型，通过**display: flex** 在容器上启用。容器属性包括**justify-content** 控制主轴对齐方式，align-items 控制交叉轴对齐方式，flex-wrap 决定是否换行。子元素通过**flex-grow、flex-shrink和flex-basis**属性，来控制在容器中的尺寸分配。

3. CSS 基本布局和定位

CSS 基本布局包括标准流布局、浮动布局、定位布局和 Grid 布局。

标准流布局中，块级元素垂直排列，行内元素水平排列；

浮动布局通过float: left/right使元素脱离标准流，常用于多列布局；

定位布局利用position: static/relative/absolute/fixed实现元素的精确定位，适用于模态框、固定导航栏等场景；

Grid 布局是二维网格系统，适合复杂的响应式布局。

4. 实现左中右三部分布局

要实现一个页面分成左中右 3 部分，中间 400px 固定，左右两边自适应平分，可以使用以下几种方法。

Flex 弹性布局：

html 复制代码

<div style="display: flex; height: 100vh;">
    <div style="flex: 1; background: #f0f0f0;"></div>
    <div style="width: 400px; background: #e0e0e0;"></div>
    <div style="flex: 1; background: #f0f0f0;"></div>
</div>

Grid 网格布局：

css 复制代码

.container {
    display: grid;
    grid-template-columns: 1fr 400px 1fr;
}

绝对定位 + margin（兼容性方案）：

css 复制代码

.left,
.right {
    position: absolute;
    width: 50%;
    height: 100%;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.center {
    margin: 0 50%;
    width: 400px;
    margin-left: calc(-200px);
}

三、JavaScript 核心知识点

1. JavaScript 基本数据类型

JavaScript 有 7 种基本数据类型

包括 ES5 中的string、number、boolean、null、undefined，以及 ES6 新增的Symbol（用于创建唯一标识符）和BigInt（处理大整数精度问题）

这些数据类型具有不可变性，存储在栈内存中

2. JavaScript 数组常用方法

JavaScript 数组提供了丰富的常用方法，可分为迭代方法、修改原数组方法和搜索判断方法。

迭代方法如map()用于映射转换，filter()用于过滤元素，slice()用于截取子数组；

修改原数组方法包括push()、pop()、shift()、unshift()、splice()等；

搜索判断方法有indexOf()查找元素索引，includes()判断数组是否包含某个元素。

3. 删除数组中间某一项

删除数组中间某一项，可以根据是否已知索引选择不同方法。

已知索引时，使用splice(index, 1)方法，它会修改原数组并返回被删除的元素；

若不知道索引，可先通过indexOf()找到索引再使用splice()，或者使用filter()方法过滤掉要删除的元素，返回一个新数组。

4. JavaScript 精度丢失问题解决

对于 JavaScript 精度丢失问题，处理大整数（>2^53）时可使用BigInt类型。

处理小数运算时，可将小数转换为整数进行运算，再将结果转换回小数；

也可以使用专业库如decimal.js，它能精确处理小数运算，避免精度丢失问题。

5. JavaScript 的作用域与作用域链

JavaScript 采用词法作用域，变量的作用域在定义时就确定下来。作用域链是当查找变量时，从当前作用域逐级向上级作用域查找，直到全局作用域的过程。闭包则是函数内部访问外部作用域变量，形成持久化引用的一种机制。

6. 实现自适应布局

实现自适应布局可通过多种方式。媒体查询@media能根据视口宽度切换样式；使用百分比单位设置元素宽度和内边距；借助 Flexbox 和 Grid 布局实现响应式分配；对于图片，使用srcset和picture标签适配不同设备。

7. 对同步和异步的理解

同步代码按顺序执行，前一个任务未完成时，后续任务会被阻塞；而异步代码不会阻塞后续任务执行，通过回调、Promise 或async/await等机制，在任务完成后处理结果。同步适合简单计算、函数调用等场景，异步适用于网络请求、定时器、文件操作等耗时任务，以避免阻塞主线程，提升用户体验。