码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-08-06 10:55:23      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:code   return   str   prope   ref   闭包   教程   property   架构   

 系列目录: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)
}

 


 

 

未看完,待续。。。

 

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

标签:code   return   str   prope   ref   闭包   教程   property   架构   

原文地址:https://www.cnblogs.com/lmyxywy/p/11307016.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!