×

尤雨溪

为什么尤雨溪尤大说VUE没有完全遵循MVVM?为什么学习Vue框架

admin admin 发表于2022-09-05 20:55:28 浏览167 评论0

抢沙发发表评论

本文目录

为什么尤雨溪尤大说VUE没有完全遵循MVVM


严格的MVVM要求View不能和Model直接通信,而Vue在组件提供了$refs这个属性,让Model可以直接操作View,违反了这一规定,所以说Vue没有完全遵循MVVM。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。

当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验,如Silverlight、音频、视频、3D、动画……,这导致了软件UI层更加细节化、可定制化。-尤雨溪

同时,在技术层面,WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。-尤雨溪

MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去,以应对客户日益复杂的需求变化。-尤雨溪

因为WPF技术出现,从而使MVC架构模式有所改进,MVVM 模式便是使用的是数据绑定基础架构。它们可以轻松构建UI的必要元素。

可以参考The Composite Application Guidance for WPF(prism)

View绑定到ViewModel,然后执行一些命令在向它请求一个动作。而反过来,ViewModel跟Model通讯,告诉它更新来响应UI。这样便使得为应用构建UI非常的容易。

往一个应用程序上贴一个界面越容易,外观设计师就越容易使用Blend来创建一个漂亮的界面。同时,当UI和功能越来越松耦合的时候,功能的可测试性就越来越强。

在MVP模式中,为了让UI层能够从逻辑层上分离下来,设计师们在UI层与逻辑层之间加了一层interface。无论是UI开发人员还是数据开发人员,都要尊重这个契约、按照它进行设计和开发。这样,理想状态下无论是Web UI还是Window UI就都可以使用同一套数据逻辑了。-尤雨溪

借鉴MVP的IView层,养成习惯。View Model听起来比Presenter要贴切得多;会把一些跟事件、命令相关的东西放在MVC的’C’,或者是MVVM的’Vm’。


为什么学习Vue框架


vue框架算是最近前端开发很好的工具。可以突破以前所没有实时更新页面。很有发展前景,很多大公司现在正在使用。
Vue框架诞生于2014年,其作者为中国人——尤雨溪,也是新人最容易入手的框架之一,不同于React和Angular,其中文文档也便于大家阅读和学习。Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的设计模式为MVVM模式(Model-》View-》View-Model)和一个可组合的组合型组件系统,具有简单的、灵活的API(接口)。该框架继承了React的虚拟DOM技术和Angular的双向数据绑定技术,是一款较新的功能性框架。
在这里介绍下什么是虚拟DOM和双向数据绑定:
1、虚拟DOM(Virtual DOM),顾名思义,从字面上理解就是虚构的DOM树,当我们用传统的原生API或者jQuery去操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程。即使计算机硬件一直在更新迭代,但是操作真实DOM的代价仍旧很昂贵,真实的DOM节点,哪怕是一个最简单的div也包含很多属性,所以频繁的操作,会导致页面卡顿,影响用户的体验。为了解决这个浏览器性能问题,虚拟DOM(Virtual DOM)就被设计出来了,其核心算法是Diff算法。它会将一次操作过程中对真实DOM所有更新的diff内容保存到本地的一个js对象中,最终将这个js对象一次性attach到DOM树上,通知浏览器去执行绘制工作,避免了大量的无谓的计算量。
用js对象模拟DOM节点的好处是:页面的更新可以先全部反应在js对象上,操作内存中的js对象的速度明显要快的多。等更新完成后,在将最终的js对象映射成真实的DOM,交由浏览器去绘制。(提高了性能,并且运行速度快)
2、双向数据绑定,在讲双向数据绑定前,我们要想说下单向数据绑定,单向数据绑定,就是把Model绑定到View上,当我们用JavaScript代码更新Model时,View就会自动更新了(Model--》View)。那么双向数据绑定就是,用户更新了View,Model的数据也会自动被更新(Model《--》View)。什么情况下用户可以更新View呢?举个最直接的例子,填写表单,当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那么就相当于我们把Model和View做了双向数据绑定。其原理是我们要对input进行value 的属性绑定(v-bind:value=”...”)将Model中的变量绑定到View上(Model-》View)以及当用户对input进行操作时,进行事件监听(v-on:input=”...”)将View上的更新传回Model中(View-》Model)从而实现双向数据绑定,在Vue中,以上操作过于繁琐,便提供了v-model直接实现双向数据绑定的效果。
在进行Vue项目开发过程中,我们可以通过script标签引入式写法来引入vue或者是nodejs自带的包管理工具npm安装vue。并且通过new Vue()进行新建一个Vue的实例对象,其下有很多属性,包括el、data、methods、computed、watch等等,el为指向页面的节点元素,data存储数据,数据类型包括simple datatype(简单数据类型)以及complex datatype(复杂数据类型),用插值表达式{{}}显示,在插值显示的时候,不需要写上data,methods内存储方法,通过fn()的形式调用方法,computed内存储也是方法,但是其为计算数据,复杂逻辑的应该存储在computed中,计算属性是基于它们的依赖进行缓存的,由于computed带有一层缓存,所以只有在它的相关依赖发生改变时才会重新运行,而methods则是调用一次生成一次,computed中的方法调用时不需要加()的,watch为监听,监控,监听data中的属性值也可以监控对象,存在两个参数(currentValue当前值和prevValue之前值)。
-尤雨溪

尤雨溪懂个锤子vue是什么梗


尤雨溪不懂VUE,他就是开发VUE的,又不是使用VUE的。就像设计工具的人不一定是最会使用工具的。当初那个设计曲别针的,估计也没想到曲别针还能用来开锁或者当手机的取卡针。

尤雨溪(Evan You)Vue.js作者:尤雨溪(Evan You),前端框架 Vue.js 作者,独立开源开发者,现居美国新泽西。曾就职于 Google Creative Labs 和 Meteor Development Group。-尤雨溪

由于工作中大量接触开源的 Java 项目,最后自己也走上了开源之路,现在全职开发和维护 Vue.js。Vue 一开始完全是一个个人兴趣项目。

2013 年的时候我还在 Google Creative Lab,那时候前端框架还处于比较草莽的阶段,React 刚刚发布还没几个人知道,最成熟的是 AngularJS (Angular1)。

Vue 的发展历程:

Vue 的发展历程,从最初的实验阶段(2013年中到2014年2月),0.x 阶段 (2014年2月到2015年10月),1.x 阶段 (2015年10月到2016年9月),到现在的2.x 阶段 (2016年9月至今),加上正式对外发布的时间,到今天已经有足足5年多的时间了。-尤雨溪

0.x-1.0 的改动主要集中在模版语法上,在 1.0 之后,模版语法就相对稳定,没有再经历过特别大的改动了。2.0 的改动则专注于内部的渲染机制变化,引入了 Virtual DOM。

从而获得了服务端渲染、原生渲染、手写渲染函数等能力。目前 3.0 正在竭力的开发过程中,主要集中于利用 ES2015 的新特性、改进内部架构和性能优化上。


webpack作者评价vite


评价:Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生ES-Module的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口,并表示自己 ”再也回不去 webpack 了“ 。-尤雨溪

webpack缺点是缓慢的服务器启动

当冷启动开发服务器时,基于打包器的方式是在提供服务前去急切地抓取和构建你的整个应用。

vite改进

Vite 通过在一开始将应用中的模块区分为依赖和源码两类,改进了开发服务器启动时间。

依赖大多为纯JavaScript并在开发时不会变动。一些较大的依赖(例如有上百个模块的组件库)处理的代价也很高。依赖也通常会以某些方式(例如 ESM 或者 CommonJS)被拆分到大量小模块中。

Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快10-100倍。

源码通常包含一些并非直接是 JavaScript 的文件,需要转换(例如 JSX,CSS 或者 Vue/Svelte 组件),时常会被编辑。同时,并不是所有的源码都需要同时被加载。(例如基于路由拆分的代码模块)。-尤雨溪

Vite以原生ESM方式服务源码。这实际上是让浏览器接管了打包程序的部分工作:Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码,即只在当前屏幕上实际使用时才会被处理。

webpack: 分析依赖=》 编译打包=》 交给本地服务器进行渲染。首先分析各个模块之间的依赖,然后进行打包,在启动webpack-dev-server,请求服务器时,直接显示打包结果。

webpack打包之后存在的问题:随着模块的增多,会造成打出的 bundle 体积过大,进而会造成热更新速度明显拖慢。

vite: 启动服务器=》 请求模块时按需动态编译显示。是先启动开发服务器,请求某个模块时再对该模块进行实时编译,因为现代游览器本身支持ES-Module,所以会自动向依赖的Module发出请求。

所以vite就将开发环境下的模块文件作为浏览器的执行文件,而不是像webpack进行打包后交给本地服务器。

分析了webpack和vite的打包方式后,也就明白了为什么vite比webpack打包快,因为它在启动的时候不需要打包,所以不用分析模块与模块之间的依赖关系,不用进行编译。这种方式就类似于我们在使用某个UI框架的时候,可以对其进行按需加载。-尤雨溪

热更新方面,效率更高。当改动了某个模块的时候,也只用让浏览器重新请求该模块,不需要像webpack那样将模块以及模块依赖的模块全部编译一次。


有哪些顶级水平的中国程序员


一、尤雨溪

江湖流传一个小故事:一款名叫Clear的软件,在正式推出的第一天,就登场了Apple Store付费榜和总榜第二。而身在美国的中国留学生尤雨溪,仅仅花了两天的时间,就copy出了一个html5版的Clear,并且放出了源代码。-尤雨溪

2014年2月,开发了一个前端开发库Vue.js。没错,现在就是前端在广泛使用的Vue框架!Vue.js一经发布,就受到了很多人的追捧,可以说Vue.js就是人们苦苦寻找的那个好用的前端框架。

后来的尤雨溪在patreon进行了众筹,因为他希望自己可以全职去开发Vue.js。众筹的效果是非常满意的,每个月他几乎可以收到1万美元的赞助。

二、陈皓

江湖人称"浩哥/耗子哥",对新手总是热心的帮助,一位百科全书类的前辈。陈皓,网名左耳朵耗子,酷壳coolshell.cn博客博主,文章篇篇经典,强烈推荐大家去看看。

17年以上软件从业经历,擅长底层技术架构,曾在汤森路透、亚马逊、阿里云等公司就职,目前创业中。他很谦虚,他说“我不是高手,我也不是牛人,我只是在跟随着我的兴趣和喜好去学习一些技术。”而我觉得,他是一个对技术和生活都有非常深地思考的人,很多观点都能让人醍醐灌顶。-尤雨溪

职业要求

一般的程序员都有在专业领域的学习,还有很小一部分程序员是自学的,尽管一些专业性的学校或者综合大学可以提供,但是也需要一些别的途径来提供相关的人才。

尽管学历是比较重要的,但是公司经常把重点放在应聘者的工作经验上,很多刚从大学毕业的大学生虽然有引人注目的学位证书,但是他们找不到工作是因为他们缺乏经验。

一个程序员虽然没有正规的学历,但是如果一个人拥有程序设计的深厚知识背景或者丰富的工作经验的话,那么他的机会要比有学历的应届毕业生大得多。所以要尽量抓住有用的工作和实习机会,这样的话在毕业后你就会发现,多实习让你有更多的经验,在找工作的时候就有更多的机会。-尤雨溪

对于职业程序员,另外一个重要的方面就是,程序员需要不断提升自己的业务技术,他的技术必须一直保持在一个较高的水平,并且要不断发展,程序员也要寻找贸易的机会,要参加研讨会,在周刊上发表文章和接受职业教育,这些使程序员在自己的领域中分级或者不断并排前进。-尤雨溪


尤雨溪的介绍


尤雨溪是HTML5版Clear的打造人,他认为,未来App的趋势是轻量化和细化,能解决问题的应用就是好应用。而在移动互联网时代大的背景下,个人开发者的机遇在门槛低,成本低,跨设备和多平台四个方面。