1200字范文 > web前端面试高频考点——Vue原理（理解MVVM模型深度/监听data变化监听数组变化

web前端面试高频考点——Vue原理（理解MVVM模型深度/监听data变化监听数组变化

时间：2018-08-25 16:07:17

系列文章目录

文章目录

系列文章目录一、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模型

组件化

组件化就是将一个页面拆分成一个个小的功能模块每个功能模块完全属于自己这部分独立的功能使得整个页面的管理和维护变得非常容易。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' // set

3、vue如何深度监听 data 变化

Object.defineProperty 缺点

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

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

// 触发更新视图function updateView() {console.log('视图更新');}// 重新定义属性，监听起来function defineReactive(target, key, value) {// 深度监听observer(value)// 核心 APIObject.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)// 核心 APIObject.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、虚拟 DOM

vdom 是实现 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="/snabbdom/0.7.3/snabbdom.js"></script><script src="/snabbdom/0.7.3/snabbdom-class.js"></script><script src="/snabbdom/0.7.3/snabbdom-props.js"></script><script src="/snabbdom/0.7.3/snabbdom-style.js"></script><script src="/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', () => {// 生成 newVnodeconst 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 都是新旧对比})

改变前：

改变后：