🥇 Vue 基础

vue 常用指令

答案

v-if v-show v-bind(:) v-for v-model  v-text v-html v-on(@)

MVC

答案

1. View 传送指令到 Controller


2. Controller 完成业务逻辑后,要求 Model 改变状态


3. Model 将新的数据发送到 View,用户得到反馈

Vue 的 MVVM

答案

MVVM 全称是 Model-View-ViewModel,Vue 是以数据驱动的,一旦 dom 创建,数据更新 dom 也就跟着更新

1、M 就是 Model 模型层,存的一个数据对象.

2、V 就是 View 视图层,所有的 html 节点在这一层.

3、VM 就是 ViewModel,它通过 data 属性连接 Model 模型层,通过 el 属性连接 View 视图层

`v-for`和`v-if`为什么不能一起用

答案

v-for 会比v-if 的优先级更高，连用的话会把v-if 的每个元素都添加一下，造成性能问题。

Vue 组件之间通讯

答案

父子间通信:父亲提供数据通过属性props传给儿子；儿子通过$on 绑父亲的事件，再通过$emit 触发自己的事件（发布订阅）
利用父子关系$parent 、$children ，

获取父子组件实例的方法。

父组件提供数据，子组件注入。provide 、inject ，插件用得多。
ref 获取组件实例，调用组件的属性、方法
跨组件通信Event Bus （Vue.prototype.bus=newVue）其实基于 bus = new Vue）其实基于 bus=newVue）其实基于 on 与$emit
vuex 状态管理实现通信

vue 生命周期的理解

答案

创建前/后,载入前/后,更新前/后,销毁前/后

它的生命周期中有多个事件钩子,让我们在控制整个 Vue 实例的过程时更容易形成好的逻辑.

beforeCreated() 在实例创建之间执行,数据未加载状态
created() 在实例创建、数据加载后,能初始化数据,dom 渲染之前执行
beforeMount() 虚拟 dom 已创建完成,在数据渲染前最后一次更改数据
mounted() 页面、数据渲染完成,真实 dom 挂载完成
beforeUpadate() 重新渲染之前触发
updated() 数据已经更改完成,dom 也重新 render 完成,更改数据会陷入死循环
beforeDestory() 和 destoryed() 前者是销毁前执行（实例仍然完全可用）,后者则是销毁后执行

vuex 几大属性

答案

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

state

答案

1、Vuex 就是一个仓库,仓库里面放了很多对象.其中 state 就是数据源存放地,对应于与一般 Vue 对象里面的 data

2、state 里面存放的数据是响应式的,Vue 组件从 store 中读取数据,若是 store 中的数据发生改变,依赖这个数据的组件也会发生更新

3、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

getter

答案

1、Vuex 就是一个仓库,仓库里面放了很多对象.其中 state 就是数据源存放地,对应于与一般 Vue 对象里面的 data

2、state 里面存放的数据是响应式的,Vue 组件从 store 中读取数据,若是 store 中的数据发生改变,依赖这个数据的组件也会发生更新

3、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

mutation

答案

mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据.

action

答案

action 类似于 mutation,不同在于：

action 提交的是 mutation,而不是直接变更状态.
action 可以包含任意异步操作

vue 优点

答案

低耦合.视图（View）可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的"View"上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变.

可重用性.你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑.

独立开发.开发人员可以专注于业务逻辑和数据的开发（ViewModel）,设计人员可以专注于页面设计,使用 Expression Blend 可以很容易设计界面并生成 xml 代码.

写 React / Vue 项目时为什么要在组件中写 key,其作用是什么

答案

key 的作用是为了在 diff 算法执行时更快的找到对应的节点,提高 diff 速度

Vue 的路由实现

答案

hash 模式和 history 模式

🥈Vue 深入

Vue 为什么采用异步渲染

答案

Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能，Vue 会在本轮数据更新后，在异步更新视图。核心思想 nextTick 。

dep.notify（） 通知 watcher 进行更新，subs[i].update 依次调用 watcher 的 update ，queueWatcher 将 watcher 去重放入队列， nextTick（flushSchedulerQueue ）在下一 tick 中刷新 watcher 队列（异步）。

什么是渐进式

答案

简单的来说就是把框架分层,还有一种理解,如果你有一个现成的服务端应用,也就是非单页应用,可以将 Vuejs 作为该应用的一部分嵌入其中,带来更多的丰富的交互体验

keep-live

答案

把切换出去的组件保留在缓存中,可以保留组件的状态或者避免重新渲染

Computed watch 和 method

答案

computed：默认computed也是一个watcher具备缓存，只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。如果一个数据依赖于其他数据，使用 computed watch：每次都需要执行函数。 watch 更适用于数据变化时的异步操作。如果需要在某个数据变化时做一些事情，使用watch。 method：只要把方法用到模板上了,每次一变化就会重新渲染视图，性能开销大

组件中的data为什么是函数

答案

避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例，如果 data 是一个对象的话，这些实例用的是同一个构造函数。为了保证组件的数据独立，要求每个组件都必须通过 data 函数返回一个对象作为组件的状态。

插槽与作用域插槽的区别

插槽

答案

- 创建组件虚拟节点时，会将组件儿子的虚拟节点保存起来。当初始化组件时，通过插槽属性将儿子进行分类 {a:[vnode],b[vnode]} - 渲染组件时会拿对应的 slot 属性的节点进行替换操作。（插槽的作用域为父组件）

作用域插槽

答案

- 作用域插槽在解析的时候不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会调用此函数进行渲染。 - 普通插槽渲染的作用域是父组件，作用域插槽的渲染作用域是当前子组件。

vue 响应式原理

Object.defineProperty

答案

首先我们想到的是 Object.defineProperty,这是 es5 新增的一个 api,它可以允许我们为对象的属性来设定 getter 和 setter,从而我们可以劫持用户对对象属性的取值和赋值.比如以下代码:

const obj = {};


let val = "cjg";

Object.defineProperty(obj, "name", {

get() {

console.log("劫持了你的取值操作啦");

return val;

},

set(newVal) {

console.log("劫持了你的赋值操作啦");

val = newVal;

},

});


console.log(obj.name);

obj.name = "cwc";

console.log(obj.name);

我们通过 Object.defineProperty 劫持了 obj[name]的取值和赋值操作,因此我们就可以在这里做一些手脚啦,比如说,我们可以在 obj[name]被赋值的时候触发更新页面操作.

发布订阅模式

答案

发布订阅模式是设计模式中比较常见的一种,其中有两个角色：发布者和订阅者.多个订阅者可以向同一发布者订阅一个事件,当事件发生的时候,发布者通知所有订阅该事件的订阅者.我们来看一个例子了解下.

class Dep {

  constructor() {

    this.subs = [];

  }

  // 增加订阅者

  addSub(sub) {

    if (this.subs.indexOf(sub) < 0) {
  
      this.subs.push(sub);
  
    }

  }

  // 通知订阅者

  notify() {

    this.subs.forEach((sub) => {
  
      sub.update();
  
    });

  }

}


const dep = new Dep();


const sub = {

update() {

console.log("sub1 update");

},

};


const sub1 = {

update() {

console.log("sub2 update");

},

};


dep.addSub(sub);

dep.addSub(sub1);

dep.notify(); //

vue.js 首先通过 Object.defineProperty 来对要监听的数据进行 getter 和 setter 劫持,当数据的属性被赋值/取值的时候,vue.js 就可以察觉到并做相应的处理.
通过订阅发布模式,我们可以为对象的每个属性都创建一个发布者,当有其他订阅者依赖于这个属性的时候,则将订阅者加入到发布者的队列中.利用 Object.defineProperty 的数据劫持,在属性的 setter 调用的时候,该属性的发布者通知所有订阅者更新内容.

nextTick

答案

异步方法，异步渲染最后一步，与 JS事件循环联系紧密。主要使用了宏任务微任务（setTimeout、promise那些），定义了一个异步方法，多次调用 nextTick会将方法存入队列，通过异步方法清空当前队列。

Vue组件渲染顺序

答案

渲染顺序：先父后子，完成顺序：先子后父

更新顺序：父更新导致子更新，子更新完成后父

销毁顺序：先父后子，完成顺序：先子后父

数据响应(数据劫持)

答案

看完生命周期后,里面的 watcher 等内容其实是数据响应中的一部分.数据响应的实现由两部分构成: 观察者( watcher ) 和依赖收集器( Dep ),其核心是 defineProperty 这个方法,它可以重写属性的 get 与 set 方法,从而完成监听数据的改变.

Observe (观察者)观察 props 与 state
- 遍历 props 与 state,对每个属性创建独立的监听器( watcher )

使用 defineProperty 重写每个属性的 get/set(defineReactive）
- get: 收集依赖
  - Dep.depend()
    - watcher.addDep()
- set: 派发更新
  - Dep.notify()
  - watcher.update()
  - queenWatcher()
  - nextTick
  - flushScheduleQueue
  - watcher.run()
  - updateComponent()

let data = { a: 1 };

// 数据响应性

observe(data);


// 初始化观察者

new Watcher(data, "name", updateComponent);

data.a = 2;


// 简单表示用于数据更新后的操作

function updateComponent() {

  vm._update(); // patchs

}


// 监视对象

function observe(obj) {

  // 遍历对象,使用 get/set 重新定义对象的每个属性值

  Object.keys(obj).map((key) => {

    defineReactive(obj, key, obj[key]);

  });

}


function defineReactive(obj, k, v) {

  // 递归子属性

  if (type(v) == "object") observe(v);


  // 新建依赖收集器

  let dep = new Dep();

  // 定义get/set

  Object.defineProperty(obj, k, {

    enumerable: true,
  
    configurable: true,
  
    get: function reactiveGetter() {
  
      // 当有获取该属性时,证明依赖于该对象,因此被添加进收集器中
  
      if (Dep.target) {
  
        dep.addSub(Dep.target);
  
      }
  
      return v;
  
    },
  
    // 重新设置值时,触发收集器的通知机制
  
    set: function reactiveSetter(nV) {
  
      v = nV;
  
      dep.nofify();
  
    },

  });

}


// 依赖收集器

class Dep {

  constructor() {

    this.subs = [];

  }

  addSub(sub) {

    this.subs.push(sub);

  }

  notify() {

    this.subs.map((sub) => {
  
      sub.update();
  
    });

  }

}


Dep.target = null;


// 观察者

class Watcher {

  constructor(obj, key, cb) {

    Dep.target = this;
  
    this.cb = cb;
  
    this.obj = obj;
  
    this.key = key;
  
    this.value = obj[key];
  
    Dep.target = null;

  }

  addDep(Dep) {

    Dep.addSub(this);

  }

  update() {

    this.value = this.obj[this.key];
  
    this.cb(this.value);

  }

  before() {

    callHook("beforeUpdate");

  }

}

Vue如何从真实dom到虚拟dom

答案

涉及到Vue中的模板编译原理，主要过程：

将模板转换成 ast 树， ast 用对象来描述真实的 JS语法（将真实 DOM转换成虚拟 DOM）

优化树

将 ast 树生成代码

用 VNode 来描述一个 dom 结构

答案

涉及到Vue中的模板编译原理，主要过程：虚拟节点就是用一个对象来描述一个真实的DOM元素。首先将` template` （真实DOM）先转成` ast` ，` ast` 树通过` codegen` 生成` render` 函数，` render` 函数里的` _c` 方法将它转为虚拟dom

virtual dom 原理实现

答案

创建 dom 树
树的 diff,同层对比,输出 patchs(listDiff/diffChildren/diffProps)
- 没有新的节点,返回
- 新的节点 tagName 与 key 不变, 对比 props,继续递归遍历子树
  - 对比属性(对比新旧属性列表):
    - 旧属性是否存在与新属性列表中
    - 都存在的是否有变化
    - 是否出现旧列表中没有的新属性
  - tagName 和 key 值变化了,则直接替换成新节点
渲染差异
- 遍历 patchs, 把需要更改的节点取出来
- 局部更新 dom

// diff算法的实现

function diff(oldTree, newTree) {

  // 差异收集

  let pathchs = {};

  dfs(oldTree, newTree, 0, pathchs);

  return pathchs;

}


function dfs(oldNode, newNode, index, pathchs) {

let curPathchs = [];

if (newNode) {

// 当新旧节点的 tagName 和 key 值完全一致时

if (oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {

// 继续比对属性差异

let props = diffProps(oldNode.props, newNode.props);

curPathchs.push({ type: "changeProps", props });

// 递归进入下一层级的比较

diffChildrens(oldNode.children, newNode.children, index, pathchs);

} else {

// 当 tagName 或者 key 修改了后,表示已经是全新节点,无需再比

curPathchs.push({ type: "replaceNode", node: newNode });

}

}


// 构建出整颗差异树

if (curPathchs.length) {

if (pathchs[index]) {

pathchs[index] = pathchs[index].concat(curPathchs);

} else {

pathchs[index] = curPathchs;

}

}

}


// 属性对比实现

function diffProps(oldProps, newProps) {

let propsPathchs = [];

// 遍历新旧属性列表

// 查找删除项

// 查找修改项

// 查找新增项 mutation

forin(olaProps, (k, v) => {

if (!newProps.hasOwnProperty(k)) {

propsPathchs.push({ type: "remove", prop: k });

} else {

if (v !== newProps[k]) {

propsPathchs.push({ type: "change", prop: k, value: newProps[k] });

}

}

});

forin(newProps, (k, v) => {

if (!oldProps.hasOwnProperty(k)) {

propsPathchs.push({ type: "add", prop: k, value: v });

}

});

return propsPathchs;

}


// 对比子级差异

function diffChildrens(oldChild, newChild, index, pathchs) {

// 标记子级的删除/新增/移动

let { change, list } = diffList(oldChild, newChild, index, pathchs);

if (change.length) {

if (pathchs[index]) {

pathchs[index] = pathchs[index].concat(change);

} else {

pathchs[index] = change;

}

}


// 根据 key 获取原本匹配的节点,进一步递归从头开始对比

oldChild.map((item, i) => {

let keyIndex = list.indexOf(item.key);

if (keyIndex) {

let node = newChild[keyIndex];

// 进一步递归对比

dfs(item, node, index, pathchs);

}

});

}


// 列表对比,主要也是根据 key 值查找匹配项

// 对比出新旧列表的新增/删除/移动

function diffList(oldList, newList, index, pathchs) {

let change = [];

let list = [];

const newKeys = getKey(newList);

oldList.map((v) => {

if (newKeys.indexOf(v.key) > -1) {

list.push(v.key);

} else {

list.push(null);

}

});


// 标记删除

for (let i = list.length - 1; i >= 0; i--) {

if (!list[i]) {

list.splice(i, 1);

change.push({ type: "remove", index: i });

}

}


// 标记新增和移动

newList.map((item, i) => {

const key = item.key;

const index = list.indexOf(key);

if (index === -1 || key == null) {

// 新增

change.push({ type: "add", node: item, index: i });

list.splice(i, 0, key);

} else {

// 移动

if (index !== i) {

change.push({

type: "move",

form: index,

to: i,

});

move(list, index, i);

}

}

});


return { change, list };

}

Proxy 相比于 defineProperty 的优势

答案

数组变化也能监听到
不需要深度遍历监听

vue-router 有哪几种导航守卫?

答案

全局守卫
路由独享守卫
路由组件内的守卫

Vue 为什么用 function 实现类,而不是 ES6 的 class

答案

很多的 mixin 的函数调用,把 Vue 当参数传入,它的功能个都是给 VUe 的 prototype 上扩展一些方法,Vue 按功能把这些扩展分散到多个模块中去实现,而不是一个模块实现所有,这种方式 Class 是很难实现的,这么做的好处是非常方便代码的维护和管理

在 Vue3 中使用 Function-base API

对比 Class API

更灵活的逻辑复用能力
更好的 TypeScript 类型推到支持
更好的性能
Tree-shaking 友好
代码更容易被压缩

vue3 的优点

答案

更小

移除了一些不常用的 API,引入了 tree-shaking

更快

diff 算法优化

静态提升

事件监听缓存

SSR 优化

TypeScript 支持
API 设计一致性
提升自身可维护性
开放更多的底层功能

【面试】vue常见面试题

🥇 Vue 基础

vue 常用指令

MVC

Vue 的 MVVM

`v-for`和`v-if`为什么不能一起用

Vue 组件之间通讯

vue 生命周期的理解

vuex 几大属性

state

getter

mutation

action

vue 优点

写 React / Vue 项目时为什么要在组件中写 key,其作用是什么

Vue 的路由实现

🥈Vue 深入

Vue 为什么采用异步渲染

什么是渐进式

keep-live

Computed watch 和 method

组件中的data为什么是函数

插槽与作用域插槽的区别

vue 响应式原理

Object.defineProperty

发布订阅模式

nextTick

Vue组件渲染顺序

数据响应(数据劫持)

Vue如何从真实dom到虚拟dom

用 VNode 来描述一个 dom 结构

virtual dom 原理实现

Proxy 相比于 defineProperty 的优势

vue-router 有哪几种导航守卫?

Vue 为什么用 function 实现类,而不是 ES6 的 class

vue3 的优点

评论区

【面试】vue常见面试题

🥇 Vue 基础

vue 常用指令

MVC

Vue 的 MVVM

v-for和v-if为什么不能一起用

Vue 组件之间通讯

vue 生命周期的理解

vuex 几大属性

state

getter

mutation

action

vue 优点

写 React / Vue 项目时为什么要在组件中写 key,其作用是什么

Vue 的路由实现

🥈Vue 深入

Vue 为什么采用异步渲染

什么是渐进式

keep-live

Computed watch 和 method

组件中的data为什么是函数

插槽与作用域插槽的区别

vue 响应式原理

Object.defineProperty

发布订阅模式

nextTick

Vue组件渲染顺序

数据响应(数据劫持)

Vue如何从真实dom到虚拟dom

用 VNode 来描述一个 dom 结构

virtual dom 原理实现

Proxy 相比于 defineProperty 的优势

vue-router 有哪几种导航守卫?

Vue 为什么用 function 实现类,而不是 ES6 的 class

vue3 的优点

评论区

`v-for`和`v-if`为什么不能一起用