关于vue的面试题汇总-2023

Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、数据绑定和响应式设计而闻名。以下是对Vue面试题中涉及的关键知识点的详细解释： 1. **Vue的双向绑定原理**： Vue的双向绑定是通过`Object.defineProperty`实现的，它会监听对象属性的变化。在Vue实例初始化时，对`data`中的每个属性使用`Object.defineProperty`进行数据劫持，设置getter和setter。当数据被修改时，setter会触发，更新对应的`Watcher`对象，进而调用`update`方法更新视图。这是一个基于发布-订阅模式的响应式系统，确保数据变化时视图能够实时更新。 2. **Vue的生命周期钩子函数**： - `beforeCreate`：组件实例刚创建，数据观测（data observer）和事件还未配置。 - `created`：组件实例创建完成，数据观测和事件配置完成，但DOM还未生成。 - `beforeMount`：在挂载开始之前被调用，相关的render函数首次被调用。 - `mounted`：组件实例挂载完成，对应的DOM元素被插入到页面中。 - `beforeUpdate`：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。 - `updated`：组件数据更新后，DOM已更新。 - `beforeDestroy`：实例销毁之前调用。 - `destroyed`：实例销毁后调用，所有绑定的事件都将移除。 3. **method, computed, watch的区别**： - `method`：定义的普通方法，每次调用都会执行。 - `computed`：计算属性，结果会被缓存，只有依赖改变时才会重新计算，适用于需要进行复杂计算的情况，减少不必要的计算，提高性能。 - `watch`：观察者，可以监听某个数据的变化并执行回调，通常用于处理复杂的逻辑，例如根据数据变化执行异步操作。 4. **CSS Flexbox实现骰子的3点效果**： 使用Flexbox布局，通过`display: flex;`开启弹性布局，`align-self: center;`使第二个元素居中，`align-self: right;`使第三个元素靠右，实现骰子的3点显示。 5. **CSS伪类选择器**： - `:first-child`选择器匹配父元素的第一个子元素。 - `:last-child`选择器匹配父元素的最后一个子元素。 - `:nth-of-type(n)`选择器匹配其父元素的第n个同类型子元素。 - `:checked`选择器匹配已选中的复选框或单选按钮。 - `:disabled`选择器匹配禁用的表单元素。 - `:before`和`:after`创建元素前面或后面的内容。 - `:not(selector)`选择器匹配不满足给定选择器的元素。 6. **文本垂直居中方法**： - 垂直居中可以通过设置相同的padding值实现。 - 利用`display: table`和`display: table-cell`以及`vertical-align: center`将元素模拟为表格单元格进行垂直居中。 - 使用`position: relative; top: 50%; transform: translateY(-50%);`组合实现垂直居中。 - CSS3的`display: box`和`box-align: center`配合实现弹性盒模型的垂直居中。 这些知识点涵盖了Vue的基本概念、数据绑定机制、组件生命周期、计算属性和观察者，以及CSS布局和选择器。理解和掌握这些内容对于准备Vue面试至关重要。