面试--Vue

1.你对MVVM是怎么理解的？

　　MVVM是Model-View-ViewModel缩写。Model层代表数据模型，View代表视图层，ViewModel是MVVM的核心，它是连接View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据，实现数据的双向绑定。可以不用再去低效又麻烦地通过操纵 DOM 去更新视图，专心处理和维护 ViewModel层。

2.你对Vue响应式原理是怎么理解的？是否可以实现一个简版的？Vue3使用Proxy重写，相比Vue2的Object.defineProperty，有哪些优势？

　   2.1响应式原理

• Vue2的响应式是基于Object.defineProperty实现的
• Vue3的响应式是基于ES6的Proxy来实现的

　  2.2 Vue2 Object.defineProperty简版实现代码

// 响应式函数
function reactive(obj, key, value) {
  Object.defineProperty(data, key, {
    get() {
      console.log(`访问了${key}属性`)
      return value
    },
    set(val) {
      console.log(`将${key}由->${value}->设置成->${val}`)
      if (value !== val) {
        value = val
      }
    }
  })
}

const data = {
  name: '林三心',
  age: 22
}
Object.keys(data).forEach(key => reactive(data, key, data[key]))
console.log(data.name)
// 访问了name属性
// 林三心
data.name = 'sunshine_lin' // 将name由->林三心->设置成->sunshine_lin
console.log(data.name)
// 访问了name属性
// sunshine_lin

　　弊端：data新增了hobby属性，进行访问和设值，但是都不会触发get和set，所以弊端就是：Object.defineProperty只对初始对象里的属性有监听作用，而对新增的属性无效。这也是为什么Vue2中对象新增属性的修改需要使用Vue.$set来设值的原因。

// 接着上面代码

data.hobby = '打篮球'
console.log(data.hobby) // 打篮球
data.hobby = '打游戏'
console.log(data.hobby) // 打游戏

　  2.3 Vue3 proxy简版实现代码