什么是 MVVM？

Model–View–ViewModel （MVVM）是一个软件架构设计模式。
16ca75871ec53fba_tplv-t2oaga2asx-zoom-in-crop-mark_3024_0_0_0.webp

View层

View层是视图层，就是用户界面。

Model层

Model指数据模型，繁殖后端进行的各种业务逻辑和处理数据凿空，对于前端来说就是后端提供的api接口。

ViewModel层

ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；
Model和View并无直接关联，而是通过ViewModel来进行联系的。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

说说你对SPA的理解

SPA(signal-page-application)单页面应用，只有一个HTML文件，对应的是多页面应用，每个页面都有自己的HTMl文件。
优点：

  • 跳转链接不需要重新加载，可以做页面间的过渡动画；
  • 对服务器压力小；
  • 前后端职责分离，架构清晰，前端负责交互逻辑，后端负责数据处理；

缺点：

  • 不利于SEO

  • 初次加载比较耗时

    Vue是如何实现数据响应的

  • 实现一个监听器Observer：用Object.definProperty()修改响应式对象每一个属性的getter和setter进行数据劫持，当读取响应式对象的属性值时，会进行依赖收集，当数据改变时会触发setter，在setter中对所有依赖进行更新；

  • 实现一个解析器Compile：解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图；
  • Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

  • 实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

    computed 和 watch 的区别和运用的场景？

    computed：计算属性，依赖其他属性值，并且有缓存，只有依赖的属性值改变了，下一次读取时它才会重新计算；
    watch：当监听的数据改变时，执行会嗲函数；
    运用场景：

  • 当我们需要进行数值计算，并且依赖其他属性时可以用computed，因为可以利用computed的缓存特性，避免每次读取都要重新计算；

  • 当我们需要在数据变化时执行异步操作或开销比较大大的操作时，应该使用watch，使用watch选项允许我们执行操作，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

    谈谈你对 Vue 生命周期的理解？

    1.生命周期是什么

    Vue有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新->渲染、卸载等一些列过程

    2.各个生命周期的作用

  1. beforeCreate：组件被创建前；
  2. created：数据初始化完成，可以使用数据；
  3. beforeMount：挂载开始之前；
  4. mounted：挂载完成，此时可以操作DOM；
  5. beforeUpdate：组件更新之前；
  6. update：组件更新完成；
  7. activited：keep-alive专用，组件被激活；
  8. deactivated：keep-alive专用，组件被缓存；
  9. beforeDestory：组件被销毁之前；
  10. destoryed：组件被销毁；

    能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？

    1.hash模式的实现原理

    早期的前端路由的实现就是基于loaction.hash来实现的。其实原理很简单，location.hash的值就是URL中#后面的部分。比如下面这个网站，他的location.hash的值为‘#search’:
    1. https://www.example.com#search
    hash路由模式的实现主要时基于下面几个特征：
  • URL中的hash值只是客户端的一种状态，也就是说当向服务器发出请求时，hash部分不会被发送；
  • hash值的改变们都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换；
  • 可以通过a标签，设置href属性，当用户点击这个标签后，URL的hash值会发声改变；或者使用JavaScript来对location.hash进行赋值，改变URL的hash值；

  • 我们可以通过hashchange事件来见同hash值的变化，从而对页面进行跳转；

    2.history模式的实现原理

    HTML5提供了History API来实现URL的变化。其中最主要的API有以下两恶搞：history.pushState()和history.replaceState()。这两个API可以在不进行刷新的情况下。操作浏览器的历史记录。唯一不同的时，前者新增一条历史记录，后者替换当前历史记录。
    history 路由模式的实现主要基于存在下面几个特性：

  • pushSatte和replace两个APi来操作实现URL的变化；

  • 物品们可以使用popstate事件来监听url的变化，从而对也买你进行跳转（渲染）；

  • history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

    Proxy 与 Object.defineProperty 优劣对比

    Proxy 的优势如下:

  • Proxy可以直接建通对象；

  • Proxy可以直接建通数组变化；
  • Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
  • Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

Object.defineProperty 的优势如下:

  • 兼容性好