VUE原理（大厂必考）

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

回顾之前的VUE面试题

• v-show和v-if的区别
• 为何v-for中要用key
• 描述VUE组件生命周期(有父子组件的情况)
• VUE组件如何通讯
• 描述组件渲染和更新的过程
• 双向数据绑定v-model的实现原理

组件化基础

• "很久以前"就有组件化
  • asp、jsp、php已经有组件化了
  • nodejs中也有类似的组件化
  • 传统组件，只是静态渲染，更新还要依赖于操作DOM
  • 数据驱动视图 - Vue MVVM
  • 数据驱动视图 - React setState

Vue响应式

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

Proxy有兼容性问题

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

Object.defineProperty基本用法

const data = {}
   var name = 'zhangSan'
   Object.defineProperty(data, "name", {
   	get: function() {
   		console.info('get')
   		return name
   	},
   	set: function(newVal) {
   		console.info('set')
   		name = newVal
   	}
   })
   console.info(data.name)
   data.name = 'list'

• 监听对象，监听数组
• 监听复杂对象，深度监听
• 几个缺点
  • 深度监听，需要递归到底，一次性计算量大；vue3中proxy什么时候用，什么时候监听。
  • 无法监听新增/删除属性（Vue.set Vue.delete）
  • 无法原生监听数组，需要特殊处理

运行课件代码

1、npm i http-server -g
2、http-server -p 8001
3、chrome访问localhost:8080/index.html

虚拟DOM（Virtual DOM）和diff

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

解决方案 - vdom

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

用JS模拟DOM结构

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

	//用JS(vdom)模拟上述DOM结构
	var vdom = {
		tag: 'div',
		props: {
			className: 'container',
			id: 'div1'
		},
		children: [
			{
				tag: 'p',
				children: 'vdom'
			},
			{
				tag: 'ul',
				props: {
					style: 'font-size: 20px'
				},
				children: [
					{
						tag: 'li',
						children: 'a'
					}
				]
			}
		]
	}

通过snabbdom学习dom

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

diff算法

• diff算法是vdom中最核心、最关键的部分
• diff算法能在日常使用vue react中体现出来（如key）
• diff算法是前端热门话题，面试“宠儿”

diff算法概述

• diff即对比，是一个广泛的概念，如linux diff命令、git diff等
• 两个js对象也可以做diff，如https://github.com/cujojs/jiff
• 两棵树做diff，如这里的vdom diff

树diff的时间复杂度O(n^3)

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

优化时间复杂度到O(n)

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

snabbdom - 源码解读

vdom和diff - 总结

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

模板编译

• 模板是vue开发中最常用的部分，即与使用相关联的原理

• 它不是html，有指令、插值、JS表达式，到底是什么？

• 面试不会直接问，但会通过“组件渲染和更新过程”考察

• 前置只是：JS的with语法

  const obj = {a: 100, b: 200}
  console.info(obj['a'])	//100
  console.info(obj['b'])	//200
  console.info(obj['c'])	//undefined
  with(obj) {
  	console.info(a)		//100
  	console.info(b)		//200
  	console.info(c)		//会报错
  }
  

• vue templete complier将模板编译为render函数

• 执行render函数生成vnode

with语法

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

编译模板

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

1、npm init -y
2、npm install vue -template-compiler --save

标签：info,VUE,console,DOM,面试,01,组件,diff,vdom
来源： https://blog.csdn.net/qq_32629809/article/details/119041226