3.12笔记 数组操作方法、虚拟 DOM、Vue Router 的路由模式、Vuex 的异步处理以及 SPA知识点

咕咕叫
95 阅读5分钟

数组操作方法

在 JavaScript 中，数组操作是日常开发中不可或缺的一部分。以下几种常见的数组操作方法，你是否都了如指掌呢？

push()

push() 方法用于在数组的末尾添加一个或多个元素，并返回数组的新长度。需要注意的是，该方法会直接改变原数组

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出：[1, 2, 3, 4]

在 Vue.js 中，由于数据驱动视图的机制，使用 push() 方法修改数组会触发视图更新，因为原数组被改变。

shift()

shift() 方法则用于删除数组的第一个元素，并将剩余元素的索引向前移动一位。同样，它也会改变原数组，并返回被删除的元素。

let arr = [1, 2, 3];
let deletedElement = arr.shift();
console.log(arr); // 输出：[2, 3]
console.log(deletedElement); // 输出：1

在 Vue.js 中，shift() 方法对数组的修改同样会触发视图更新。

reverse()

reverse() 方法用于反转数组中元素的顺序，直接在原数组上进行操作，改变数组元素的排列。

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // 输出：[3, 2, 1]

由于原数组被改变，在 Vue.js 中使用 reverse() 方法也会触发视图更新。

concat()

与上述方法不同，concat() 方法不会改变原数组，而是返回一个新数组，将原数组和其他数组或元素连接起来。

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2);
console.log(newArr); // 输出：[1, 2, 3, 4]
console.log(arr1); // 输出：[1, 2]，原数组未改变

在 Vue.js 中，由于 concat() 方法不改变原数组，因此不会触发视图更新。若想更新视图，需要将返回的新数组赋值给原数组。

this.myArray = this.myArray.concat(newElements);

虚拟 DOM

虚拟 DOM 是 Vue.js 的核心概念之一，它以 JavaScript 对象为基础，不依赖真实平台环境，从而具备了跨平台的能力。这意味着虚拟 DOM 不仅可以在浏览器中使用，还能在 Weex、Node.js 等其他平台上运行。

虚拟 DOM 的主要作用是优化性能。在 Vue.js 中，当数据发生变化时，虚拟 DOM 会先在内存中生成一个虚拟 DOM 树，与之前的虚拟 DOM 树进行比较，计算出需要更新的最小 DOM 操作，然后批量更新真实 DOM，避免了频繁直接操作 DOM 带来的性能开销。

Vue Router 的路由模式

在单页面应用（SPA）中，路由是实现不同页面跳转的关键。Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。

Hash 模式

Hash 模式利用 URL 的 hash 部分（即 # 后面的内容）来模拟完整的 URL。由于浏览器不会将 hash 部分发送到服务器，因此不会触发页面刷新，适用于对 SEO 要求不高的场景。

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
});

History 模式

History 模式则使用 HTML5 的 History API（如 pushState 和 replaceState）来实现完整的 URL 路由，没有 # 符号，使 URL 更加美观，对 SEO 更友好。但需要服务器的支持，以确保在直接访问或刷新页面时能正确返回应用的入口文件。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
});

Vuex 的异步处理

Vuex 是 Vue.js 的状态管理库，用于集中管理应用的状态。在实际开发中，我们经常需要处理异步操作，如通过 AJAX 获取数据。

dispatch 和 commit 的区别

  • dispatch：用于调用 Vuex 中的 actions，适合处理异步操作，如向后台提交数据或获取数据。actions 中可以包含异步逻辑，通过 context.commit 调用 mutations 来更新状态。
// actions 示例
actions: {
  fetchData({ commit }) {
    axios.get('/api/data')
      .then(response => {
        commit('updateData', response.data);
      });
  }
}

// 调用 actions
this.$store.dispatch('fetchData');
  • commit：用于直接调用 mutations，适合同步操作。mutations 是同步函数，用于直接修改 state。
// mutations 示例
mutations: {
  updateData(state, payload) {
    state.data = payload;
  }
}

// 调用 mutations
this.$store.commit('updateData', newData);

SPA 的优缺点

单页面应用（SPA）在现代前端开发中占据重要地位，它具有以下优点：

  • 无刷新切换内容：通过在客户端动态更新页面内容，提高了用户体验。
  • 前后端分离：符合前后端分离的开发思想，后台只需提供数据接口，前端负责渲染。
  • 减轻服务器压力：展示逻辑和数据渲染在前端完成，服务器任务更明确。
  • 后端数据接口可复用：设计良好的 JSON 格式数据接口可以在 PC、移动端等多端通用。

然而，SPA 也存在一些缺点：

  • 不利于 SEO：由于应用数据是通过请求接口动态渲染，搜索引擎可能无法正确解析内容，对 SEO 不利。
  • 首页加载慢：大部分资源需要在首页加载，可能导致首页白屏等问题。

keep-alive

keep-alive 是 Vue.js 中一个抽象组件，用于缓存组件实例，避免重复渲染，提高性能。它不会渲染成 DOM 元素，也不出现在父组件链中。

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

keep-alive 提供了多个属性用于精细控制缓存行为：

  • include：定义缓存白名单，keep-alive 会缓存命中的组件。
  • exclude：定义缓存黑名单，被命中的组件将不会被缓存。
  • max：定义缓存组件上限，超出上限时使用 LRU（Least Recently Used）策略置换缓存数据。

用 JavaScript 实现数组去重

数组去重是前端开发中的常见需求，以下是几种实现方式：

使用 Set

Set 是 ES6 引入的数据结构，不允许重复值，因此可以轻松实现数组去重。

let arr = [1, 2, 2, 3, 4, 4];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // 输出：[1, 2, 3, 4]

使用 filter() 和 indexOf()

通过 filter() 方法结合 indexOf()，可以筛选出数组中的唯一值。

let arr = [1, 2, 2, 3, 4, 4];
let uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // 输出：[1, 2, 3, 4]

使用 Map

利用 Map 的键值对特性，也可以实现数组去重。

let arr = [1, 2, 2, 3, 4, 4];
let seen = new Map();
let uniqueArr = arr.filter(item => !seen.has(item) && seen.set(item, true));
console.log(uniqueArr); // 输出：[1, 2, 3, 4]

以上方法各有优劣，在实际开发中可根据具体场景选择合适的去重方式。

avatar
文章
阅读
粉丝