web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）(web前端面试常见问题)

web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM） 系列文章目录内容参考链接Vue基本使用Vue的基本使用（一文掌握Vue最基础的知识点）Vue通信和高级特性Vue组件间的通信及高级特性（多种组件间的通信、自定义v-model、nextTick、插槽）Vue高级特性Vue的高级特性（动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router）Vue原理1Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）Vue原理2Vue原理（diff算法、模板编译、组件渲染和更新、JS实现路由）Vue面试题web前端面试高频考点——Vue面试题文章目录系列文章目录一、Vue原理1、理解MVVM模型2、监听 data 变化的核心 API3、vue如何深度监听 data 变化4、vue如何监听数组变化5、虚拟 DOM（1）解决方案：VDOM（2）用 JS 模拟 DOM 结构（3）通过 snabbdom 学习 vdom（4）vdom 总结一、Vue原理1、理解MVVM模型

推荐整理分享web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）(web前端面试常见问题)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:web前端面试基础知识,web前端面试题目及答案汇总,web前端面试题2021及答案,web前端面试题目及答案汇总,web前端面试常问知识,web前端面试常问知识,web前端常见面试题,web前端常见面试题,内容如对您有帮助，希望把文章链接给更多的朋友！

组件化

组件化就是将一个页面拆分成一个个小的功能模块每个功能模块完全属于自己这部分独立的功能使得整个页面的管理和维护变得非常容易。asp jsp php 已经有组件化了nodejs 中也有类似的组件化

数据驱动视图

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

MVVM 模型

2、监听 data 变化的核心 API组件 data 的数据一旦变化，立刻触发视图的更新实现数据驱动视图的第一步核心 API - Object.defineProperty由于 Object.defineProperty 有一些缺点，Vue3.0 使用 Proxy但 Proxy 兼容性不好，且无法 polyfill

Object.defineProperty() 基本用法

示例：基本用法

const data = {}const name = 'zhangsan'Object.defineProperty(data, "name", { get: function () { console.log('get') }, set: function (newVal) { console.log('set') name = newVal }})console.log(data.name) // get zhangsandata.name = 'lisi' // set3、vue如何深度监听 data 变化

Object.defineProperty 缺点

深度监听，需要递归到底，一次性计算量大无法监听新增属性/删除属性（Vue.set、Vue.delete）

示例：视图更新三次，新增和删除属性监听不到

// 触发更新视图function updateView() { console.log('视图更新');}// 重新定义属性，监听起来function defineReactive(target, key, value) { // 深度监听 observer(value) // 核心 API Object.defineProperty(target, key, { get() { return value }, set(newValue) { if(newValue !== value) { // 深度监听 observer(value) // 设置新值 // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值 value = newValue // 触发更新视图 updateView() } } })}// 监听对象属性function observer(target) { if (typeof target !== 'object' || target === null) { // 不是对象或数组 return target } // 重新定义各个属性（for in 也可以遍历数组） for (let key in target) { defineReactive(target, key, target[key]) }}// 准备数据const data = { name: 'zhangsan', age: 20, info: { address: '北京' // 需要深度监听 }}// 监听数据observer(data)// 测试data.name = 'lisi'data.age = 21// console.log('age', data.age)data.x = '100' // 新增属性，监听不到 —— 所以有 Vue.setdelete data.name // 删除属性，监听不到 —— 所以有 Vue.deletedata.info.address = '上海' // 深度监听// data.nums.push(4) // 监听数组

4、vue如何监听数组变化

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(value) // 设置新值 // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值 value = newValue // 触发更新视图 updateView() } } })}// 监听对象属性function observer(target) { if (typeof target !== 'object' || target === null) { // 不是对象或数组 return target } // 如果是数组，就把 arrProto 赋值给数组的原型 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.nums.push(4) // 监听数组

5、虚拟 DOMvdom 是实现 vue 和 react 的重要基石diff 算法是 vdom 中最核心、最关键的部分DOM 操作非常耗费性能以前用 jQuery，可以自行控制 DOM 操作的时机，手动调整Vue 和 React 是数据驱动视图，使用 VDOM（1）解决方案：VDOM有了一定复杂度，想减少计算次数比较难能不能把计算，更多的转移为 JS 计算？因为 JS 执行速度很快vdom - 用 JS 模拟 DOM 结构，计算出最小的变更，操作 DOM（2）用 JS 模拟 DOM 结构

示例：JS 模拟 DOM 结构

HTML 代码

<div id="div1" class="container"> <p>vdom</p> <ul style="font-size: 20px"> <li>a</li> </ul></div>

JS 代码

{ tag: 'div', props: { className: 'container', id: 'div1' } children: [ { tag: 'p', children: 'vdom' }, { tag: 'ul', props: {style: 'font-size: 20px'} children: [ { tag: 'li', children: 'a' } ] } ]}（3）通过 snabbdom 学习 vdom简洁强大的 vdom 库，易学易用Vue参考它实现的 vdom 和 diffsnabbdom参考连接

示例：

<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>const snabbdom = window.snabbdom// 定义 patchconst patch = snabbdom.init([ snabbdom_class, snabbdom_props, snabbdom_style, snabbdom_eventlisteners])// 定义 hconst h = snabbdom.hconst container = document.getElementById('container')// 生成 vnodeconst 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) // vnode = newVnode // patch 之后，应该用新的覆盖现有的 vnode ，否则每次 change 都是新旧对比})

改变前：

改变后：

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

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路，持续更新中…