（四）Vue原理_两棵树做深度diff算法，其时间复杂度至少是-CSDN博客

本文链接：https://blog.csdn.net/lj1530562965/article/details/107629005

Vue原理

Vue原理（大厂必考）
如何理解MVVM
监听data变化的核心API是什么
如何深度监听data变化、数组变化
- - Object.defineProperty缺点
  - 总结
虚拟DOM-面试里的网红
用过虚拟DOM吗？
- - snabbdom重点总结
  - vdom总结
虚拟DOM-diff算法概述
- - 树diff的时间复杂度O(n^3)
  - 优化时间复杂度到O(n)
深入diff算法源码
虚拟DOM-考点总结和复习
- - diff算法总结
  - vdom和diff-总结
模板编译前置知识点-with语法
- - 模板编译
  - with语法
vue模板被编译成什么？
回顾和复习已学的知识点
vue组件是如何渲染和更新的
如何用JS实现hash路由
- - 前端路由原理
  - hash的特点
如何用JS实现H5 history路由
vue原理-考点总结和复习

Vue原理（大厂必考）

面试为何会考察原理

面试中如何考察？以何种方式

考察重点，而不是考察细节，掌握好2/8原则
和使用相关联的原理，例如vdom、模板渲染
整体流程是否全面？热门技术是否有深度？

Vue原理包括哪些？

组件化
响应式
vdom和diff
模板编译
渲染过程
前端路由

如何理解MVVM

组件化基础

“很久以前”就有组件化

asp jsp php已经有组件化了
nodejs中也有类似的组件化
在这里插入图片描述

数据驱动视图（MVVM，setState）

传统组件，只是静态渲染，更新还要依赖于操作DOM
数据驱动视图–Vue MVVM
数据驱动视图–React setState（暂时先不看）

Vue MVVM

在这里插入图片描述

总结

组件化
数据驱动视图
MVVM

监听data变化的核心API是什么

Vue响应式

组件data的数据一旦变化，立刻触发视图的更新
实现数据驱动视图的第一步
考察Vue原理的第一题
核心API-Object.defineProperty
如何实现响应式，代码演示
Object.defineProperty的一些缺点（Vue3.0启用Proxy）
在这里插入图片描述

Proxy有兼容性问题

Proxy兼容性不好，且无法polyfill
Vue2.x还会存在一段时间，所以都得学
Vue3.0相关知识，下一章将，这里只是先提一下

Object.defineProperty基本用法

在这里插入图片描述

Object.defineProperty实现响应式

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

如何深度监听data变化、数组变化

Object.defineProperty缺点

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

// 触发更新视图
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) // 监听数组

总结

基础API-Object.defineProperty
如何监听对象（深度监听），监听数组
Object.defineProperty的缺点

虚拟DOM-面试里的网红

虚拟DOM（Virtual DOM）和diff

vdom是实现vue和React的重要基石
diff算法是vdom中最核心、最关键的部分
vdom是一个热门话题，也是面试中的热门话题
DOM操作非常耗费性能
以前用jQuery，可以自行控制DOM操作的时机，手动调整
Vue和React是数据驱动视图，如何有效控制DOM操作？

解决方案-vdom

有了一定复杂度，想减少计算次数比较难
能不能把计算，更多的转移为JS计算？因为JS执行速度很快
vdom-用JS模拟DOM结构，计算出最小的变更，操作DOM
在这里插入图片描述

通过snabbdom学习vdom

简洁强大的vdom库，易学易用
Vue参考它实现的vdom和diff
https://github.com/snabbdom/snabbdom
Vue3.0重写了vdom的代码，优化了性能
但vdom的基本理念不变，面试考点也不变
React vdom具体实现和Vue也不同，但不妨碍统一学习

用过虚拟DOM吗？

snabbdom重点总结

h函数
vnode数据结构
patch函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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">