前端必会vue面试题（必备）

最新推荐文章于 2024-08-28 09:43:43 发布

yyds2026

最新推荐文章于 2024-08-28 09:43:43 发布

阅读量792

点赞数 1

文章标签：前端框架 vue

本文链接：https://blog.csdn.net/yyds2026/article/details/129549686

版权

本文深入探讨Vue.js的核心概念，包括Vuex的状态管理、模板编译原理、组件通信、性能优化及diff算法。讲解了Vue中computed与watch的区别、初始化页面闪动问题的解决、key的作用、依赖收集过程以及Vue与React在性能优化上的差异。同时，涵盖Vue生命周期方法的使用场景，如在哪个阶段发起异步请求，以及多种组件间通信的方式，如props、ref、事件总线、slot、provide/inject和Vuex。最后，讨论了Vue为何不直接采用类似React的shouldComponentUpdate生命周期方法。

摘要由CSDN通过智能技术生成

Vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

Vue.js的template编译

简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点），详细步骤如下：

首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

Vue 中 computed 和 watch 有什么区别？

计算属性 computed：
（1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；
（2）计算属性内不支持异步操作；
（3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
（4）计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性 watch：
（1）不支持缓存，只要数据发生变化，就会执行侦听函数；
（2）侦听属性内支持异步操作；
（3）侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；
（3）监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。

vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{ {message}}的字样，虽然一般情况下这个时间很短暂，但是还是有必要让解决这个问题的。

首先：在css里加上以下代码：

[v-cloak] {
       display: none;}

如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"

Vue中的key到底有什么用？

key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速

diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异.

diff程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾.

准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug.
快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1).

Vue中如何进行依赖收集？

每个属性都有自己的dep属性，存放他所依赖的watcher，当属性变化之后会通知自己对应的watcher去更新
默认会在初始化时调用render函数，此时会触发属性依赖收集 dep.depend
当属性发生修改时会触发watcher更新dep.notify()

依赖收集简版

let obj = {
    name: 'poetry', age: 20 };

class Dep {
   
    constructor() {
   
      this.subs = [] // subs [watcher]
    }
    depend() {
   
      this.subs.push(Dep.target)
    }
    notify() {
   
      this.subs.forEach(watcher => watcher.update())
    }
}
Dep.target = null;
observer(obj); // 响应式属性劫持

// 依赖收集  所有属性都会增加一个dep属性，
// 当渲染的时候取值了 ，这个dep属性 就会将渲染的watcher收集起来
// 数据更新 会让watcher重新执行

// 观察者模式

// 渲染组件时 会创建watcher
class Watcher {
   
    constructor(render) {
   
      this.get();
    }
    get() {
   
      Dep.target = this;
      render(); // 执行render
      Dep.target = null;
    }
    update() {
   
      this.get();
    }
}
const render = () => {
   
    console.log(obj.name); // obj.name => get方法
}

// 组件是watcher、计算属性是watcher
new Watcher(render);

function observer