前端面试题及答案.pdf

前端面试题及答案.pdf 本文档总结了前端面试题及答案，涵盖了 Vue.js 相关知识点，包括 Vuex 的五个核心概念、Vue 生命周期、Cookie、localStorage 和 sessionStorage 的区别等。 一、Vuex 的五个核心概念 Vuex 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个 Vue 组件的可变化状态。Vuex 有五个核心概念： 1. State：基本数据，相当于 Vue 组件里的某些 data。 2. Getters：从基本数据派生的数据，相当于 computed。 3. Mutations：提交更改数据的方法，同步。 4. Actions：像一个装饰器，包裹 mutations，使之可以异步。 5. Modules：模块化 Vuex。 二、Vue 生命周期 Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染、更新、销毁等一系列过程。生命周期分为三个阶段：初始化、运行中、销毁。 1. beforeCreate：实例、组件通过 new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行 beforeCreate 钩子函数。 2. Created：挂载数据，绑定事件等等，然后执行 created 函数。 3. beforeMount：接下来开始找实例或者组件对应的模板，编译模板为虚拟 Dom 放入到 render 函数中准备渲染，然后执行 beforeMount 钩子函数。 4. Mounted：接下来开始 render，渲染出真实 Dom，然后执行 mounted 钩子函数。 5. beforeUpdate：当组件或实例的数据更改之后，会立即执行 beforeUpdate。 6. Updated：当更新完成后，执行 updated。 7. beforeDestroy：当经过某种途径调用 $destroy 方法后，立即执行 beforeDestroy。 8. Destroyed：组件的数据绑定、监听...去掉后只剩下 Dom 空壳。 三、Cookie、localStorage 和 sessionStorage 的区别 Cookie、localStorage 和 sessionStorage 都是保存在浏览器端，且同源的，但它们有以下区别： 1. 安全性：Cookie 数据始终在同源的 HTTP 请求中携带，而 localStorage 和 sessionStorage 不会自动把数据发给服务器，仅在本地保存。 2. 大小限制：Cookie 数据不能超过 4KB，而 localStorage 和 sessionStorage 虽然也有存储大小的限制，但比 Cookie 大得多，可以达到 5M 或更大。 3. 有效期：Cookie 数据有效期可以设置，而 sessionStorage 仅在当前浏览器窗口关闭前有效，localStorage 则可以长期保存。 通过了解这些知识点，可以帮助前端开发者更好地理解 Vue.js 和前端开发相关概念，并更好地应对面试。