前端常见面试题-vue
Virtual DOM的理解
一、什么是vdom？虚拟dom
Virtual DOM 用JS模拟DOM结构
二、为何要用vdom？
1. DOM操作非常非常“rang贵”，将DOM对比操作放在JS层，提高效率2. DOM结构的对比，放在JS层来做（图灵完备语言：能实现逻辑代码的语言）
三、vdom核心函数有哪些
核心函数：h('标签名', {...属性名...}, [...子元素...])h('标签名', {...属性名...}, '.........')patch(container, vnode)patch(vnode, newVnode)
Vue 路由懒加载
Vue项目中实现路由按需加载（路由懒加载）的3中方式：
1. vue异步组件2. es6提案的import()3. webpack的require.ensure()
一、Vue异步组件技术：{path: '/home',name: 'Home',component: resolve => reqire(['path路径'], resolve)}二、es6提案的import()const Home = () => import('path路径')三、webpack提供的require.ensure(){path: '/home',name: 'Home',component: r => require.ensure([],() => r(require('path路径')), 'demo')}
Proxy与Object.defineProperty()的对比
Proxy的优点：
1. 可以直接监听对象而非属性,并返回一个新对象2. 可以直接监听数值的变化3. 可以劫持整个对象，并返回一个新对象
Proxy的缺点：
Proxy是es6提供的新特性，兼容性不好，所以导致Vue3一致没有正式发布让让广大开发者使用Object.defineProperty的优点：
语法简单，不会像proxy那样生成新对象Object.defineProperty的缺点：
只能劫持对象的属性，我们需要对每个对象的每个属性进行遍历，无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应Vue 组件间的通信
props 和 $emit
父组件向子组件传递数量通过props传递
子组件向父组件传递通过$emit派发事件
children和parent
中央数据总线EventBus
ref 和 refs
Provide 和 inject
attrs和listeners
Vuex
vue的diff算法
问题：渲染真实的DOM开销是很大的，修改了某个数据，如果直接渲染到真实dom上会引起整个DOM树的重绘和重排。
Virtual Dom 根据真实DOM生成的一个Virtual DOM，当Virtual DOM某个节点的数据改变后生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode.
注意：在采取diff算法比较的时候，只会在同层级进行，不会跨层级比较。
当数据发生改变时，set方法会让调用Dep.notify()方法通知所有订阅者Watcher，订阅者就会调用patch函数给真实的DOM打补丁，更新响应的试图。