Skip to content
大纲

Vue

思考一下问题:

  • 之前的 MVC
    • Model 在 MVC 中实际是数据模型的概念,View 是视图,是将数据内容呈现给用户的界面界面层,Controller 是数据模型与 View 之间的桥梁层
  • 如何理解 MVVM 原理
    • MVVM 想较于 MVC,在 Model 和 View 之间多了叫做 View-Model 的一层,将模型与视图做了一层绑定关系,视图完全由接口返回数据驱动,由开发者所控制的逻辑非常轻量。
    • 如何将数据模型与页面视图绑定起来呢?
      • Angularjs 的主动轮询检查新旧值变化更新视图
      • Vue 利用 ES5 的 Object.defineProperty 的 getter/setter 方法绑定,Vue3.0 基于 Proxy 和 Reflect
      • backbone 的发布订阅模式
  • 响应式数据更新的原理是什么
    • 当 Object.defineProperty 方法在给数据 Model 对象定义属性的时候先挂载一些方法,在这些方法里实现与界面的值绑定响应关系,当应用的属性被读取或者写入的时候便会触发这些方法,从而达到数据模型里的值发生变化时同步响应到页面上。
      • new Vue 在实例化时,首先将 data 方法里返回的对象属性都挂载上 setter 方法,而 setter 方法里将页面上的属性进行绑定,当页面加载时,DOMContentloaded 事件触发后,调用 mounted 挂载函数,开始获取接口数据,获取完成后给 data 里属性赋值,赋值的时候触发前面挂载好的 setter 方法,从而引起页面的联动,达到响应式效果。
  • Vue 中如何检测数组变化,Vue3 中如何检测数组变化
    • roxy 是 ES6 里的新构造函数,作用就是代理,想做一层在原对象操作前的拦截、检查、代理就可以用 Proxy
    • Reflect 是 ES6 里的新的对象:是 JS 中对象操作方法函数集合,Reflect 提供的方法完全与 Proxy 构造函数里 Hander 参数对象中的钩子属性一一对应。
  • 为何 Vue 采用异步渲染
  • nextTick 实现原理
  • Vue 组件的生命周期
  • ajax 请求放在哪个生命周期中
  • 何时需要使用 beforeDestory
  • Vue 父子组件生命周期调用顺序
  • Vue 中 computed 的特点
  • Watch 中 deep:true 是如何实现的
  • Vue 中事件绑定的原理
  • Vue 中 v-html 会导致哪些问题?
  • Vue 中 v-if 和 v-show 的区别
  • 为什么 v-for 和 v-if 不能连用
  • v-model 中的实现原理,如何自定义 v-model
  • 组件中的 data 为什么是一个函数
  • Vue 组件如何通信
  • 什么是作用域插槽
  • 用 vnode 来描述一个 DOM 结构
  • diff 算法的时间复杂度
  • diff 算法原理
  • v-for 中为什么要用 key
  • 描述组件渲染和更新过程
  • Vue 中模版编译原理
  • Vue 中常见的性能优化
  • Vue 中相同逻辑如何抽离
  • 为什么要使用异步组件
  • keep-alive 的实现原理
  • 实现 hash 和 history 路由
  • Vue-Router 中导航守卫有哪些
  • action 和 mutation 的区别
  • 简述 Vuex 工作原理
  • Vue3.0 有哪些改进