【前端面试专题】【4】Vue2 原理

组件化

组件化基础

组件化的概念在很早之前就已经有了

• asp jsp php 中已经存在组件化
• nodejs 中也有类似的组件化

数据驱动视图（MVVM，setState(React)）

• 传统组件，只是静态渲染，更新还要依赖于操作 DOM（jQuery）
• 数据驱动视图 - Vue MVVM
• 数据驱动视图 - React setState

Vue MVVM

MVVM = Model + View + ViewModel，即通过改变 Model 数据就可以更新 View 视图。

响应式原理

组件 data 的数据一旦变化，立刻触发视图的更新，这是什么原理？

• 核心 API - Object.defineProperty
• Object.defineProperty 的一些缺点（Vue3 启用 Proxy）

Object.defineProperty 基本用法

<script>
  let data = {}
  let name = 'Jae'
  Object.defineProperty(data, 'name', {
    get: function() {
      console.log('get')
      return name
    },
    set: function(newVal) {
      console.log('set')
      name = newVal
    }
  })

  console.log(data.name)
  data.name = 'Jack'
</script>

输出为：

get
Jae
set

Object.defineProperty 实现响应式

• 监听对象，监听数组
• 复杂对象，深度监听
• 几个缺点

监听对象，代码示例：

// 触发更新视图
function updateView() {
  console.log('视图更新') // 只做一个入口的展示
}

// 重新定义属性，监听起来
function defineReactive(target, key, value) {
  // 核心 API
  Object.defineProperty(target, key, {
    get() {
      return value
    },
    set(newVal) {
      if (newVal !== value) {
        // 设置新值
        // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
        value = newVal
        // 触发更新视图
        updateView()
      }
    } 
  })
}

// 监听对象属性
function observer(target) {
  if (typeof target !== 'object' || target === null) {
    // 不是对象或数组
    return target
  }
  // 重新定义各个属性
  for (let key in target) {
    defineReactive(target, key, target[key])
  }
}

// 准备数据
let data = {
  name: 'Jae',
  age: 20,
  info: {
    address: '某某地址' // 深度监听
  }
}

// 监听数据
observer(data)

// 测试
data.name = 'Jack'
data.age = 22
data.info.address = '北京' // 深度监听

打开控制台，可以看到输出为：

视图更新
视图更新

也就是说对于 address 的深度监听没有生效，需要改造一下 defineReactive 函数：

function defineReactive(target, key, value) {
  observer(value) // 深度监听
  // 核心 API
  Object.defineProperty(target, key, {
    get() {
      return value
    },
    set(newVal) {
      if (newVal !== value) {
        observer(newVal) // 深度监听
        // 设置新值
        // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
        value = newVal
        // 触发更新视图
        updateView()
      }
    } 
  })
}

利用递归来解决，此时可以引出 Object.defineProperty 的一个缺点：深度监听，需要递归到底，一次性计算量大

在测试的时候，加上两个测试例子：

data.x = '100' // 新增属性，监听不到 —— 所以需要 Vue.set
delete data.name // 删除属性，监听不到 —— 所以需要 Vue.delete

到控制台看一下会发现加上这两个例子后并没有多出两次触发更新，这也就是 Object.defineProperty 的第二个缺点：无法监听新增属性/删除属性

监听数组，上面的测试样例换一下：

// 准备数据
let data = {
  nums: [1, 2, 3]
}

// 监听数据
observer(data)

// 测试
data.nums.push(4)

打开控制台发现并没有输出“视图更新”，因为 Object.defineProperty 是不具备监听数组的能力的，需要专门处理一下数组：

// 重新定义数组原型
const oldArrayPrpperty = Array.prototype
// 创建新对象，原型指向 oldArrayPrpperty，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayPrpperty);
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(ele => { // 举例几个常用的数组方法
  arrProto[ele] = function() {
    updateView() // 触发视图更新
    oldArrayPrpperty[ele].call(this, ... arguments) // 相当于 Array.prototype.push.call(this, ...arguments)
  }
})

// 监听对象属性
function observer(target) {
  if (typeof target !== 'object' || target === null) {
    // 不是对象或数组
    return target
  }
  // 如果是数组
  if (Array.isArray(target)) {
    target.__proto__ = arrProto
  }
  // 重新定义各个属性
  for (let key in target) {
    defineReactive(target, key, target[key])
  }
}

注意： 有些同学可能有疑问，为什么不能在 Array.prototype.push 上新增 updateView() 方法呢？这样会污染全局的 Array 原型，在进行框架设计的时候不要这么做

总结，Object.defineProperty 缺点：

• 深度监听，需要递归到底，一次性计算量大
• 无法监听新增属性/删除属性
• 无法原生监听数组，需要特殊处理

虚拟 DOM（Virtual DOM） 和 diff

• DOM 操作非常耗费性能
• 使用 jQuery，可以自行控制 DOM 操作的时机，手动调整
• Vue 和 React 都是数据驱动视图，如何有效控制 DOM 操作？

解决方案 - vdom： 用 JS 模拟 DOM 结构，计算出最小的变更，操作 DOM，因为 JS 执行速度快

那么如何用 JS 模拟 DOM 结构？举个例子：

<div id="div1" class="container">
  <p>段落文字</p>
  <ul style="font-size:20px;">
    <li>1</li>
    <li>2</li>
  </ul>
</div>

{
  tag: 'div',
  props: {
    className: 'container',
    id: 'div1'
  },
  children: [
    {
      tag: 'p',
      children: 'vdom'
    },
    {
      tag: 'ul',
      props: { style: 'font-size:20px' },
      children: [
        {
          tag: 'li',
          children: '1'
        },
        {
          tag: 'li',
          children: '2'
        }
      ]
    }
  ]
}

通过 snabbdom 学习 vdom

• 简洁强大的 vdom 库，易学易用
• Vue 参考它实现的 vdom 和 diff
• 官方地址

官方用法示例：

import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
} from "snabbdom";

const patch = init([
  // 通过传入模块初始化 patch 函数
  classModule, // 开启 classes 功能
  propsModule, // 支持传入 props
  styleModule, // 支持内联样式同时支持动画
  eventListenersModule, // 添加事件监听
]);

const container = document.getElementById("container");

const vnode = h("div#container.two.classes", { on: { click: someFn } }, [
  h("span", { style: { fontWeight: "bold" } }, "This is bold"),
  " and this is just normal text",
  h("a", { props: { href: "/foo" } }, "I'll take you places!"),
]);
// 传入一个空的元素节点 - 将产生副作用（修改该节点）
patch(container, vnode);

const newVnode = h(
  "div#container.two.classes",
  { on: { click: anotherEventHandler } },
  [
    h(
      "span",
      { style: { fontWeight: "normal", fontStyle: "italic" } },
      "This is now italic type"
    ),
    " and this is still just normal text",
    h("a", { props: { href: "/bar" } }, "I'll take you places!"),
  ]
);
// 再次调用 patch
patch(vnode, newVnode); // 将旧节点更新为新节点

本地代码调试：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container"></div>
  <button id="btn-change">change</button>

  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
</body>
</html>

<script>
  const snabbdom = window.snabbdom

  // 定义 patch
  const patch = snabbdom.init([
    snabbdom_class,
    snabbdom_props,
    snabbdom_style,
    snabbdom_eventlisteners
  ])

  // 定义 h
  const h = snabbdom.h

  const container = document.getElementById('container')

  // 生成 vnode
  const vnode = h('ul#list', {}, [
    h('li.item', {}, 'item 1'),
    h('li.item', {}, 'item 2')
  ])
  patch(container, vnode)

  document.getElementById('btn-change').addEventListener('click', () => {
    // 生成 newVnode
    const newVnode = h('ul#list', {}, [
      h('li.item', {}, 'item 1'),
      h('li.item', {}, 'item B'),
      h('li.item', {}, 'item 3')
    ])
    patch(vnode, newVnode)
  })
</script>

可以看到，item1 并没有变化，只是第二项从 item2 变成了 itemB，然后新增了第三项的 item3。也就是说 vdom 找出了需要变化的 dom 进行更新，而不是所有的 dom 都进行更新。

vdom 总结：

• 用 JS 模拟 DOM 结构（vnode）
• 新旧 vnode 对比，得出最小的更新范围，最后更新 DOM
• 数据驱动视图的模式下，有效控制 DOM 操作

diff 算法

• diff 即对比，是一个广泛的概念，如 linux diff 命令，git diff 等
• 两个 js 对象可以做 diff
• 两棵树可以做 diff，如 vdom diff

• 第一，遍历 tree1；第二，遍历 tree2
• 第三，排序
• 时间复杂度为O(n^3)，如果有1000个节点，要计算10亿次

从上述分析来看，时间复杂度为 O(n^3) 的树 diff 算法肯定是不可用的，有没有办法能优化时间复杂度呢？

• 只比较同一层级，不跨级比较
• tag 不相同，则直接删掉重建，不再深度比较
• tag 和 key 两者都相同，则认为是相同节点，不再深度比较

推荐去学习一下 snabbdom 的源码，有几个重点的函数实现方式可以注意下，这里就不多演示：

• patchVnode
• addVnodes removeVnodes
• updateChildren

这样时间复杂度就被优化到了 O(n)

模板编译

前置知识：JS 的 with 语法

• 改变 {} 内自由变量的查找方式，当作 obj 的属性来查找
• 如果找不到匹配的 obj 属性，就会报错
• with 要慎用，因为它打破了作用域规则，易读性变差

const obj = { a: 1, b: 2 }
with(obj) {
  console.log(a) // 1
  console.log(b) // 2
  consolg.log(c) // Uncaught ReferenceError: c is not defined
}

编译模板

• 模板不是 html，有指令、插值、JS 表达式。能实现判断、循环
• html 是标签语言，是静态的，只有 JS 才能实现判断、循环
• 模板一定是转换为某种 JS 代码，即编译模板

接下来我们学习一下 vue-template-compiler 如何将模板编译成 JS，先通过 npm init -y 与 npm i vue-template-compiler 初始化项目，然后进行学习：

const compiler = require('vue-template-compiler')
// 插值
const template = `<p>{{message}}</p>`
// 编译
const res = compiler.compile(template)
console.log(res.render) // with(this){return _c('p',[_v(_s(message))])}

这个 _c 、_v 、_s 可以通过翻阅 Vue 源码找到缩写函数得含义：

function installRenderHelpers(target) {
  target._v = createTextVNode;
  target._s = toString;
  target._l = renderList;
}
// _c = createElement，相当于前面章节提到的 h 函数

也就是说 return _c('p',[_v(_s(message))]) 可以转换成比较看得懂的 return createElement('p', [createTextVNode(toString(message))])

再来看看其他的模板语法：

// 表达式
const template = `<p>{{flag ? message : 'no message'}}</p>`
const res = compiler.compile(template)
console.log(res.render) // with(this){return _c('p',[_v(_s(flag ? message : 'no message'))])}

// 属性和动态属性
const template = `
  <div id="div1" class="container">
    <img :src="imgUrl" />
  </div>
`
const res = compiler.compile(template)
console.log(res.render) // with(this){return _c('div',{staticClass:"container",attrs:{"id":"div1"}},[_c('img',{attrs:{"src":imgUrl}})])}

// 条件
const template = `
  <div>
    <p v-if="flag === 'a'">A</p>
    <p v-else>B</p>
  </div>
`
const res = compiler.compile(template)
console.log(res.render) // with(this){return _c('div',[(flag === 'a')?_c('p',[_v("A")]):_c('p',[_v("B")])])}

// 循环
const template = `
  <ul>
    <li v-for="item in list" :key="item.id">{{item.title}}</li>
  </ul>
`
const res = compiler.compile(template)
console.log(res.render) // with(this){return _c('ul',_l((list),function(item){return _c('li',{key:item.id},[_v(_s(item.title))])}),0)}

// 事件
const template = `
  <button @click='handleClickSubmit'>提交</button>
`
const res = compiler.compile(template)
console.log(res.render) // with(this){return _c('button',{on:{"click":handleClickSubmit}},[_v("提交")])}

// v-model
const template = `<input type="text" v-model="name">`
const res = compiler.compile(template)
console.log(res.render) // with(this){return _c('input',{directives:[{name:"model",rawName:"v-model",value:(name),expression:"name"}],attrs:{"type":"text"},domProps:{"value":(name)},on:{"input":function($event){if($event.target.composing)return;name=$event.target.value}}})}

总结：

• 模板编译为 render 函数，执行 render 函数返回 vnode
• 基于 vnode 再执行 patch 和 diff
• 使用 webpack vue-loader，会在开发环境下编译模板（性能提升方式之一）

vue 组件中使用 render 代替 template

Vue.component('heading', {
  // template: `xxxx`
  render: function(createElement) {
    return createElement(
      'h' + this.level,
      [
        createElement('a', {
		  attrs: {
  		    name: 'headerId',
  		    href: '#' + 'headerId'
          }
        }, 'this is a tag')
      ]
    )
  }
})

组件渲染/更新过程

初次渲染过程

• 解析模板为 render 函数（或已在开发环境完成，vue–loader）
• 触发响应式，监听 data 属性 getter setter
• 执行 render 函数，生成 vnode（会触发模板中的 getter）

更新过程

• 修改 data，触发 setter（此前在 getter 中已被监听）
• 重新执行 render 函数，生成 newVnode
• patch(vnode, newVnode)

异步渲染

目的：减少 DOM 操作次数，提高性能

前端路由原理

网页 url 组成部分

// http://127.0.0.1:8001/01-hash.html?a=1&b=2/#/aaa/bbb
location.protocol // 'http:'
location.hostname // '127.0.0.1'
location.host // '127.0.0.1:8001'
location.port // '8001'
location.pathname // '01-hash.html'
location.search // '?a=1&b=2'
location.hash // '#/aaa/bbb'

hash 的特点

• hash 变化会触发网页跳转，即浏览器的前进与后退
• hash 变化不会刷新页面，这是 SPA 必须的特点
• hash 永远不会提交到 server 端

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash</title>
</head>
<body>
  <p>hash</p>
  <button id="btn">修改 hash</button>
</body>
</html>

<script>
  // hash 变化，包括：
  // 1.JS 修改 url
  // 2.手动修改 url 的 hash
  // 3.浏览器前进或后退
  window.onhashchange = event => {
    console.log('旧的url：', event.oldURL)
    console.log('新的url：', event.newURL)
    console.log('hash：', location.hash)
  }

  // 页面初次加载，获取 hash
  document.addEventListener('DOMContentLoaded', () => {
    console.log('hash：', location.hash)
  })

  // JS 修改 url
  document.getElementById('btn').addEventListener('click', () => {
    location.href = '#/user'
  })
</script>

H5 history

• 用 url 规范的路由，但跳转时不刷新页面
• history.pushState
• window.onpopstate

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>history</title>
</head>
<body>
 <button id="btn">修改 url</button>
</body>
</html>

<script>
 // 页面初次加载，获取 path
 document.addEventListener('DOMContentLoaded', () => {
   console.log('load', location.pathname)
 })

 // 打开一个新的路由
 // 【注意】用 pushState 方式，浏览器不会刷新页面
 document.getElementById('btn').addEventListener('click', () => {
   const state = { name: 'page1' }
   console.log('切换路由到page1')
   history.pushState(state, '', 'page1')
 })

 // 监听浏览器前进、后退
 window.onpopstate = event => {
   console.log('onpopstate', event.state, location.pathname)
 }
</script>

总结

• hash - window.onhashchange
• H5 history - history.pushState 和 window.onpopstate
• H5 history 需要后端配合（统一返回 index.html）

两者选择

• to B 的系统推荐用 hash，简单易用，对 url 规范不敏感
• to C 的系统，可以考虑用 H5 history