Vue原理面试题

一、大厂必考原理

1.组件化和MVVM

2.响应式原理

3.vdom和diff算法

4.模板编译

5.组件渲染过程

6.前端路由

1.组件化基础=>（MVVM模型）

 传统组件，知识静态渲染，更新依赖于操作DOM

Vue的核心理念是数据驱动的理念，所谓的数据驱动的理念：当数据发生变化的时候，用户界面也会发生相应的变化，开发者并不需要手动的去修改dom.

这样做给我们带来的好处就是，我们不需要在代码中去频繁的操作dom了，这样提高了开发的效率，同时也避免了在操作Dom的时候出现的错误。

Vue.js的数据驱动是通过MVVM这种框架来实现的，MVVM 框架主要包含三部分：Model,View,ViewMode

数据驱动视图 - Vue MVVM

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到ViewModel层并自动将数据渲染到页面中，视图变化的时候通知viewModel层更新数据

2.Vue响应式原理的实现

组件data的数据一旦改变，立马触发视图的更新。

核心API -- Object.defineProperty

Object.defineProperty有缺点（Vue3启用Proxy)

Proxy的兼容性不太好，且无法使用polyfill

Object.defineProperty基本用法

 Object.defineProperty实现响应式

• 监听对象，监听数组
• 复杂对象，深度监听

 Object.defineProperty的缺点

• 深度监听需要递归到底，一次性计算量大
• 无法监听新增属性、删除属性（要使用Vue.set  Vue.delete）
• 无法原生监听数组，需要特殊处理

总结；

1.核心API -- Object.defineProperty

2.如何监听对象（深度监听），如何监听数组

3.缺点

// 触发更新视图
function updateView() {
    console.log('视图更新')
}

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

// 重新定义属性，监听起来
function defineReactive(target, key, value) {
    // 深度监听
    observer(value)

    // 核心 API
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if (newValue !== value) {
                // 深度监听
                observer(newValue)

                // 设置新值
                // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
                value = newValue

                // 触发更新视图
                updateView()
            }
        }
    })
}

// 监听对象属性
function observer(target) {
    if (typeof target !== 'object' || target === null) {
        // 不是对象或数组
        return target
    }

    // 污染全局的 Array 原型
    // Array.prototype.push = function () {
    //     updateView()
    //     ...
    // }

    if (Array.isArray(target)) {
        target.__proto__ = arrProto
    }

    // 重新定义各个属性（for in 也可以遍历数组）
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

// 准备数据
const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        address: '北京' // 需要深度监听
    },
    nums: [10, 20, 30]
}

// 监听数据
observer(data)

// 测试
// data.name = 'lisi'
// data.age = 21
// // console.log('age', data.age)
// data.x = '100' // 新增属性，监听不到 —— 所以有 Vue.set
// delete data.name // 删除属性，监听不到 —— 所有已 Vue.delete
// data.info.address = '上海' // 深度监听
data.nums.push(4) // 监听数组

3.虚拟DOM(vdom)和diff算法

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

解决方案——vdom

• 有一定的复杂度，想减少计算次数比较难
• 难不能把计算，更多的转移为JS计算？因为JS执行比较快
• vdom——用JS模拟DOM结构，计算出最小的变更，操作DOM

面试题：用JS模拟DOM元素

包含三部分：标签tag，附着在标签上的属性、样式、事件props，子元素children

通过snabbdom 学习vdom

• vue3重写了vdom的代码，优化了性能
• 但vdom的理念不变，面试考点不变

h函数、vnode数据结构、patch函数

vdom总结

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

diff算法

两个数做diff，如这里的vdom diff

 vnode   ->patch ->new vnode

树diff的时间复杂度O（n^3）

• 第一，遍历tree1；第二，遍历tree2
• 第三，排序
• 1000个节点，要计算1亿次，算法不可用

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

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

diff算法总结

• patchVnode
• addVnodes removeVnodes
• updateChildren（key的重要性）

vdom和diff总结

• 细节不重要，updateChildren更新过程也不重要，不要深究
• vnode核心概念很重要：h vnode patch diff key 等
• vnode的存在价值更重要：数据驱动试图，控制DOM操作

4.模板编译

 

with语法 

 

模板编译

总结

vue中使用render代替template 

总结

 5.组件渲染更新过程

vue原理的三大知识点

组件渲染/更新过程 

初次渲染过程

第二步是因为，执行render函数会触发getter操作 

更新过程

触发setter，看是修改的data是否在getter中已经被监听，如果是，就执行render函数

patch的diff算法，会计算出最小差异，更新在DOM上 

完整流程图

模板编译完，生成render函数，执行render函数生成vnode （虚拟DOM的树）

执行render函数的时候会touch getter，即执行函数的时候回触发Data里的getter

触发的时候就会收集依赖，即在模板中出发了哪个变量的getter就会把哪个给观察起来（watcher）

在修改Data的时候，看这个Data是否是之前作为依赖被观察起来的

如果是，就重新出发re-render，重新渲染，重新生成vdom tree，重新touch

异步渲染

1.$nextTick:

vue是异步渲染，$nextTick会待Dom渲染完之后调用

页面渲染时会将data的修改做整合，多次data修改只会渲染一次

2.汇总data的修改，一次性更新试图

3.减少DOM操作次数，提高性能

6.前端路由原理

网页url组成部分

 hash的特点

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

    <script>
        // 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'
        })
    </script>
</body>
</html>

H5 history

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

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

    <script>
        // 页面初次加载，获取 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)
        }

        // 需要 server 端配合，可参考
        // https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
    </script>
</body>
</html>

 总结

 两者选择

to c的要是不需要管seo、搜索引擎也不需要用H5 history 简单一点就好