本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

爱出汗

1663

文章

981043

访问

+关注

分类

暂无分类

日期归档

2023-05(4)

2023-06(3)

web前端面试高频考点——Vue原理（diff算法、模板编译、组件渲染和更新、JS实现路由）

发布于2022-09-18 17:52 阅读(821) 评论(0) 点赞(13) 收藏(0)

系列文章目录

内容	参考链接
Vue基本使用	Vue的基本使用（一文掌握Vue最基础的知识点）
Vue通信和高级特性	Vue组件间的通信及高级特性（多种组件间的通信、自定义v-model、nextTick、插槽）
Vue高级特性	Vue的高级特性（动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router）
Vue原理1	Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
Vue原理2	Vue原理（diff算法、模板编译、组件渲染和更新、JS实现路由）
Vue面试题	web前端面试高频考点——Vue面试题

一、虚拟 DOM - diff 算法概述

diff 算法参考链接

diff 算法是 vdom 中最核心、最关键的部分
diff 算法能在日常使用 vue react 中体现出来（如 key）

diff 算法概述：

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

出处：https://coding.imooc.com/lesson/419.html#mid=33875

在这里插入图片描述
树 diff 的时间复杂度 O（n^3）

第一，遍历 tree1
第二，遍历 tree2
第三，排序
100个节点，要计算100万次，算法不可用

优化时间复杂度到O（n）

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

出处：https://coding.imooc.com/lesson/419.html#mid=33875
在这里插入图片描述

二、模板编译

1、模板编译 - with 语法

模板是 vue 开发中最常用的部分，即与使用相关联的原理
它不是 html，有指令、插值、JS表达式，到底是什么？

模板编译：

前置知识：JS 的 with 语法
vue template complier 将模板编译为 render 函数
执行 render 函数生成 vnode

with 语法：

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

示例：不使用 with，对象里没有定义的属性为 undefined

const obj = {a: 100, b: 200}

console.log(obj.a) // 100
console.log(obj.b) // 200
console.log(obj.c) // undefined

使用 with，对象里没有定义的属性会报错

const obj = {a: 100, b: 200}

// 使用 with，能改变 {} 内自由变量的查找方式
// 将 {} 内自由变量，当作 obj 的属性来查找
with (obj) {
    console.log(a) // 100
    console.log(b) // 200
    console.log(c) // Uncaught ReferenceError: c is not defined
}

2、vue模板被编译成什么

模板编译：

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

示例：

（1）安装 vue-template-compiler

npm i vue-template-compiler --save

（2）创建 index.js 文件

const compiler = require('vue-template-compiler')

......

// 编译
const res = compiler.compile(template)
console.log(res.render)

（3）演示（以下演示均在 index.js 文件的 … 中）

插值：

打印结果即：创建一个 p 标签，子元素是 TextVNode，为一个字符串
_c：createElement，创建元素
_v：createTextVNode，创建文本节点
_s：toString，转为字符串类型
this：const vm = new Vue({…})，即 vm 实例

// 插值
const template = `<p>{{message}}</p>`
// with(this){return _c('p',['p',[_v(_s(message))]])}
// h -> vnode
// createElement -> vnode

表达式：

template 里面的表达式就是被当成 JS 代码执行

// 表达式
const template = `<p>{{flag ? message : 'no message found'}}</p>`
//with(this){return _c('p',[_v(_s(flag ? message : 'no message found'))])}

属性和动态属性：

container，div1 是静态字符串，所以编译后需要用引号包裹
imgUrl 是动态属性，是个变量，所以编译后不用引号包裹

// 属性和动态属性
const template = `
     <div id="div1" class="container">
         <img :src="imgUrl"/>
     </div>
 `
// 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>
`
// with(this){return _c('div',[(flag === 'a')?_c('p',[_v("A")]):_c('p',[_v("B")])])}

循环：

_l：renderList，渲染列表
第二个 return，返回的第一个参数是 tag，第二个参数是属性，第三个参数是子元素

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

事件：

on 里面是事件，函数的名字是变量，没有引号包裹

// 事件
const template = `
    <button @click="clickHandler">submit</button>
`
// with(this){return _c('button',{on:{"click":clickHandler}},[_v("submit")])}

v-model：

// v-model
const template = `<input type="text" v-model="name">`
// 主要看 input 事件
// 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，会在开发环境下编译模板

3、vue 组件中使用 render 代替 template

有些复杂情况中，不能用 template，可以考虑用 render
react 一直都用 render（没有模板）

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

总结：

with 语法
模板到 render 函数，再到 vnode，再到渲染和更新
vue 组件可以用 render 代替 template

4、总结组件渲染/更新过程

一个组件渲染到页面，修改 data 触发更新（数据驱动视图）
其背后原理是什么，需要掌握哪些要点？
考察对流程了解的全面程度

三大知识点：

响应式：监听 data 属性 getter setter
模板编译：模板到 render 函数，再到 vnode
vdom：patch(elem,vnode) 和 patch(vnode, newVnode)

三个过程：

初次渲染过程
更新过程
异步渲染

三、vue组件是如何渲染和更新的

1、初次渲染过程

解析模板为 render 函数（或在开发环境已完成，vue-loader）
触发响应式，监听 data 属性 getter setter
执行 render 函数，生成 vnode，patch(elem, vnode)

2、执行 render 函数会触发 getter

模板中使用到的会触发 get
模板中没有使用到的不会触发 get，因为和视图没有关系

<p>{{message}}</p>

export default {
  data() {
    return {
      message: '杂货铺', // 会触发 get
      city: '北京' // 不会触发 get，因为模板没用到，即和视图没关系
    }
  }
}

3、更新过程

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

在这里插入图片描述

4、vue组件如何进行异步渲染

$nextTick 是异步的
汇总 data 的修改，一次性更新视图
减少 DOM 操作次数，提高性能

四、如何用 JS 实现 hash 路由

vue-router 的路由模式：hash模式，H5 history

1、网页 url 组成部分

http://127.0.0.1:8881/01-hash.html?a=100&b=20#/aaa/bbb

location.protocol // 'http:' 【协议】
location.hostname // '127.0.0.1' 【IP地址/域名】
location.host // '127.0.0.1:8881' 【IP地址带端口】
location.port // '8881' 【端口】
location.pathname // '/01-hash.html' 【文件路径名】
location.search // '?a=100&b=20' 【参数】
location.hash // '#/aaa/bbb' 【#及后面的部分】

2、hash 的特点

hash 变化会触发网页跳转，即浏览器的前进、后退
hash 变化不会刷新页面，SPA 必需的特点
hash 永远不会提交到 server 端（前端自生自灭）

3、hash 变化示例

onhashchange：用来监听 hash 值的变化
href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL

<p>hash test</p>
<button id="btn1">修改 hash</button>

// hash 变化，包括
// a. JS 修改 url
// b. 手动修改 url 的 hash
// c. 浏览器前进、后退
window.onhashchange = (event) => {
    console.log('old url', event.oldURL)
    console.log('new url', event.newURL)

    console.log('hash', location.hash)
}

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

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

在这里插入图片描述

五、如何用 JS 实现 H5 history 路由

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

1、示例

history.pushState(state,title,url)
state：一个与指定网址相关的状态对象，popstate 事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址

<p>history API test</p>
<button id="btn1">修改 url</button>

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

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

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