vue2面试常见面试题收集

Posted 2022-10-08

​Virtual DOM的理解

一、什么是vdom？

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()

//1、Vue异步组件技术：
  
    path: /home,
    name: Home,
    component: resolve => require([path路径], resolve)
  

//2、es6提案的import()
  const Home = () => import(path路径)

//3、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的优点：

E9以下的版本不兼容

Object.defineProperty的缺点：

只能劫持对象的属性，我们需要对每个对象的每个属性进行遍历，无法监控到数组下标的变化，
导致直接通过数组的下标给数组设置值，不能实时响应

Vue 组件间的通信

1.  props 和 $emit
2.  父组件向子组件传递数量通过props传递
3.  子组件向父组件传递通过$emit派发事件
4.  parent
5.  中央数据总线EventBus
6.  ref 和 refs
7.  Provide 和 inject
8.  listeners
9.  Vuex

谈谈你对生命周期的理解

生命周期：Vue实例从开始创建、初始化数据、编译模板、挂载DOM-》渲染、更新-》渲染、卸载等一系列过程，称为Vue的生命周期

 vue.js的生命周期一共有10个： 
【beforeCreate】：实例初始化之后，this指向创建实例，不能访问到data、computed、watch、method上订单方法和数据 
【created】：实例创建完成，可访问data、computed、watch、method上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组 
【beforeMount】：在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数 
【mounted】：实例挂载到DOM上，此时可以通过DOMAPi获取到DOM节点，$ref属性可以访问 
【beforeUpdate】：响应式数据更新时调用，发生在虚拟DOM打补丁之前 
【updated】：虚拟DOM重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作 
【activated】：keep-alive开启时调用 【deactivated】：keep-alive关闭时调用 
【beforeDestroy】：实例销毁之前调用。实例仍然完全可用，this仍能获取到实例 
【destroy】：实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

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打补丁，更新响应的试图。

vue-router导航守卫

一、导航守卫大体分为三类：

1. 全局守卫钩子 
2. 独享守卫钩子 
3. 路由组件守卫钩子

二、全局守卫钩子（在路由切换全局执行） 全局守卫钩子函数有三种：

const router = new VueRouter(....) // 全局前置守卫 
router.beforeEach((to, from, next) =>  // do something ) // 全局解析守卫 
router.beforeResolve((to, from, next) =>  // do something ) // 全局后置守卫 
router.afterEach((to, from) =>  // do something ) 
注意： 	
  to：route即将进入的路由 	
  from：route即将离开的路由 	
  next：function这个是必须要调用的 	
  next()接受参数：     
  next()：直接执行下一个钩子，如果执行完了导航状态为comfirmed状态 	
  next(false)：中断当前导航，回到from的位置 	
  next(/hello)或next(path:/hello)：路由到任意地址，可以携带参数等 	
  next(error)：会回到router.onError(callback)

三、独享守卫钩子 独享守卫是定义在单独的某一个路由里的

const router = new VueRouter(   
  routes: [     
    path: /foo,      
    component: Foo,       
    beforeEnter: (to, from, next) =>  // do something ,      
    beforeLeave: (to, from, next) =>  // do something   
  ] 
)

四、路由组件守卫钩子 路由组件即是在vue-router中注册的组件叫路由组件

beforeRouteEnter(to, from, next)  
beforeRouteUpdate(to, from, next)  
beforeRouteLeave(to,from, next)

Vuex的理解及使用场景

Vuex 是一个专为 Vue 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。

1. Vuex 的状态存储是响应式的；当 Vue 组件从 store 中读取状态的时候， 
   若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新 
2. 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation， 
   这样使得我们可以方便地跟踪每一个状态的变化

Vuex主要包括以下几个核心模块：

1. State：定义了应用的状态数据 
2. Getter：在 store 中定义“getter”（可以认为是 store 的计算属性），
   就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，            
   且只有当它的依赖值发生了改变才会被重新计算 
3. Mutation：是唯一更改 store 中状态的方法，且必须是同步函数 
4. Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作 
5. Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中

Vue底层实现原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调
Vue是一个典型的MVVM框架，模型（Model）只是普通的javascript对象， 
修改它则试图（View）会自动更新。这种设计让状态管理变得非常简单而直观

Vue实现这种数据双向绑定的效果，需要三大模块:

1. Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者. 
2. Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。 
3. Watcher：链接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，
           执行指令绑定的相应的回调函数，从而更新试图。

Observer（数据监听器）Observer的核心是通过Object.defineProprtty()来监听数据的变动，
这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就
要通知订阅者，订阅者就是Watcher Watcher（订阅者）Watcher订阅者作为Observer和Compile之间通信的桥梁，

主要做的事情是：

1.在自身实例化时往属性订阅器(dep)里面添加自己   
2.自身必须有一个update()方法   
3.待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调 Compile（指令解析器）
  Compile主要做的事情是解析模板指令，将模板中变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定
  更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新试图

​ ​