当前位置：首页 > news >正文

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

news 来源：原创 2025/4/24 8:26:42

一、Vue2 核心知识点

1. Vue2 的双向绑定原理

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

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

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

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 弹性布局：

<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 网格布局：

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

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

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