mvvm与jquery区别 mvvm jquery

转载

ghpsyn 2023-09-18 19:54:16

文章标签 mvvm与jquery区别数据 html MVVM 文章分类 jQuery 前端开发

问题一：说一下使用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属性，在遍历函数中，利用Object.defineProperty()将每一个data属性绑定在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)
}

问题五：vue中如何解析模板？

1、模板是什么？

模板的本质是字符串，最开始是以字符串形式存在的，

它与html格式相似，却又存在很大区别，html是静态的，而模板中因为存在着一些循环、判断等逻辑，所以它是可以动态展示数据的，

模板最终还需要转换成html，以便显示。

2、render函数

因为字符串并不能处理逻辑，也因为模板需要转换成html渲染出来，这些都需要js来完成，

所以需要先将模板转换成js代码，这写需要通过一个js函数（render函数）来处理的。

mvvm与jquery区别 mvvm jquery_数据