《揭秘一线互联网企业 前端JavaScript高级面试》视频教程总结系列五：MVVM和Vue 相关

Posted 2020-11-10 lmyxywy

 系列目录：https://www.cnblogs.com/lmyxywy/p/10931603.html

 

问题一：说一下使用Jquery和使用vue的区别。

 

Jquery是对繁琐的Dom操作进行了封装，同时也在里面封装了兼容浏览器的处理方式，更方便开发人员选取和操作DOM对象，在这里，视图和数据是耦合在一起的，这样不利于复杂业务逻辑的开发；

而vue解耦了视图和数据，将Dom相关操作完全封装在了内部，通过数据来驱动视图，只关心数据的变化，将开发人员从繁琐复杂的Dom操作中解放了出来，能够更加专注于前端业务逻辑的实现。

 

---

 

 

问题二：如何理解MVVM？

 

MVVM是一种基于前端开发的架构模式，它起源于后端MVC框架，是为了适应日渐复杂的前端业务而生。

因为后端MVC模式并不完全适合前端场景，所以前端开拓者们将MVC中的C - Controller，变形为VM - ViewModel。

VM在MVVM模式中相当于一座桥梁，解耦了视图和数据，同时又连接着视图和数据。

视图通过事件绑定的方式改变数据，数据通过数据绑定的方式改变视图，它们都是通过VM来进行交互的。

 

---

 

 

问题三：vue的三要素有哪些？

 

响应式、模板引擎、渲染。

 

---

 

 

问题四：vue是如何监听到data的每个属性变化的？

 

通过Object.defineProperty()方法实现，Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

它接收的第三个参数中含有两个函数，分别是set()和get()，在这两个函数中就可以添加自定义的监听逻辑，从而达到监听数据变化的目的。

vue通过遍历data属性，在遍历函数中，将每一个data属性通过Object.defineProperty()都绑定在了vue对象上，这样vue就可以监听到data属性的变化。

 

下面是实现的核心函数：

var vm= {};
var data = {
    name:‘zhangsan‘,
    age:20
};
var key;
for(key in data){
    (function(key){ // 命中闭包，保证key的独立空间
        Object.defineProperty(vm, key, {
            get:funtion(){
                // 此处可写监听逻辑
                return data[key];
            },
            set:function(newVal){
                // 此处可写监听逻辑
                data[key] = newVal;
            }
        })
    })(key)
}

 

---

 

 

未看完，待续。。。