面試官：你知道Vue2.x和Vue3.x的差別嗎？ ex 頭條網

2020-10-14 16:28:18 佚名

近两年来，作为前端三大框架之一的Vue大火，在前端开发中应用的越来越广泛，当然，React和Angular的势头也是相当猛烈，作为开发者，都需要了解并掌握。今天我们就来聊一聊，Vue在改版之后，究竟有什么不同。

众所周知，Vue是一个典型的MVVM框架，我们可以看下MVVM示意图：

MVVM示意图

View可以理解为用户展示，Model为数据源（服务端数据），ViewModel为中间层，连接Model和View，那么作为前端，其实我们正处于ViewModel这个层面，将服务端的数据处理整合成适合页面展示的形式，最终渲染到页面上。要想实现这一模式，重要的一点就是实现数据绑定和观测。我们可以通过Object.defineProperty进行数据劫持。

Object.defineProperty(obj,prop,des)的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。还能定义对象可枚举属性，读写权等，对这个语法还不了解的可以自行查找资料学习，话不多说，通过代码我们看一下实际操作，以Vue2.x的思路实现一个简单的数据绑定：

1.HTML部分

<code>
/<code>

2.js部分

<code> // 获取标签
  const inputTag = document.querySelector('#test')
  const pTag = document.querySelector('#inputTxt')
  // 定义空的对象
  let obj = {}
  // 劫持属性
  Object.defineProperty(obj,'name', {
      set(val) {
        inputTag.value = val
        pTag.innerHTML = val
      },
      get(val){
         return val
      }
  })
 // input事件给obj赋值
  function getVal(e){
      obj.name = e.target.value
  }/<code>

3.效果图

效果图

可以看到，我们已经通过Object.defineProperty实现了一个极其简单的数据绑定。当然要实现真正的MVVM模式，还远不止这些，需要结合发布订阅者模式。总的来说，就是三步走：

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

原理并不难，但真正想要完全实现它，还是需要下功夫的，有兴趣的朋友，可以私下学习一下，自己动手实现实现。

下面我们看Vue3.x版本是如何实现数据绑定的

Proxy是es6中新增的功能，也用于对象自定义操作。语法：let p = new Proxy(target, handler)。

1.HTML部分

<code>
/<code>

2.js部分

<code>  // 获取标签
  const inputTag = document.querySelector('#test')
  const pTag = document.querySelector('#inputTxt')
  // 定义空的对象
  let obj = {}
  const handler = {
      set(target, key, value) {
          target[key] = value
          inputTag.value = value
          pTag.innerHTML = value
          return true
      },
      get(target,key) {
          return target[key]
      }
  }
  const proxy = new Proxy(obj,handler)
  
  function getVal(e) {
     proxy.name = e.target.value
  }/<code>

3.效果