关于vuemvc的信息

http://www.itjxue.com  2023-01-14 06:57  来源:未知  点击次数: 

Vue学习系列一 —— MVVM响应式系统的基本实现原理

MVVM是Model-View-ViewModel的简写。它模式是MVC—MVP—MVVM的进化版。

Model负责用JavaScript对象表示,View负责UI界面显示,两者做到了最大限度的分离。

而把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的界面修改同步回Model更新数据。

脏值检查 : angular.js 是通过脏值检测的方式来比对数据是否有变更而决定是否更新视图。

原理是,拷贝一份 copy_viewModel 在内存中,用户操作导致 viewModel 发生改变的行为时,框架都会把 copy_viewModel 和最新的 viewModel 进行深度比较,一旦发现有属性发生变化,则重新渲染与之绑定的DOM节点。

最简单的方式就是通过 setInterval() 定时轮询检测数据变动,angular触发时进入脏值检测。但只限 指定的事件 (如:用户点击,输入操作,ajax请求,setInterval,setTimeout等...),否则需手动调用 apply 函数去强制执行一次脏检查。

数据劫持 : vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter , getter 在数据变动时发布消息给订阅者,触发相应的监听回调,而产生更新数据和视图。

原理图告诉我们,data属性定义了getter、setter对属性进行劫持,当属性值改变是就会notify通知watch对象,而watch对象则会重新触发组件呈现功能,继而更新view上的DOM节点树。

反之,view上输入数据时,也会触发data变更,也会触发订阅者watch更新,这样子model数据就可以实时更新view上的数据变化。这样一个过程就是vue的数据双向绑定了。

vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过 Object.defineProperty() 来实现对属性的劫持,达到监听数据变动的目的。

Object.defineProperty 是ES5一个方法,可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象,对象里目前存在的属性描述符有两种主要形式: 数据描述符 和 存取描述符 。

数据描述符 是一个拥有可写或不可写值的属性。

存取描述符 是由一对getter-setter函数功能来描述的属性。

描述符必须是两种形式之一;不能同时是两者。即:有值和可写,或者可get和set

属性描述符包括:

我们已经知道怎么实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器 Observer ,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者 Watcher 看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器 Dep 来专门收集这些订阅者,然后在监听器 Observer 和订阅者 Watcher 之间进行统一管理的。接着,我们还需要有一个指令解析器 Compile ,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者 Watcher ,并替换模板数据或者绑定相应的函数,此时当订阅者 Watcher 接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。

因此接下去我们执行以下4个步骤,实现数据的双向绑定:

深入响应式原理

剖析Vue原理实现双向绑定MVVM

《响应式系统的基本原理》.js

JavaScript实现MVVM之我就是想监测一个普通对象的变化

vue框架是干什么的

Vue 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 ,Vue.js 也能地驱动复杂的单页应用。

MVC和MVVM的区别 & vue的虚拟DOM的理解

MVC: M,即model,指数据层 V,指view, 即视图层 C, controller,控制器

View层发起数据请求,Controller层接到请求后,接收参数,把命令传向Model层,Model层处理数据后,把数据传回controller,而controller把数据传回客户端,也就是view层

典型代表: nodejs的Egg框架, php的ThinkPHP框架都是使用的MVC模式

MVVM: M: model,数据层 V: view,视图层,即UI , VM (ViewModel)是视图层和数据层的中间层

典型代表: Vue框架

Vue的双向数据绑定就得益于MVVM框架, 视图层改变,底层封装好的VM层会更新数据,而数据改变,VM层会更新视图

一、虚拟DOM就是一个JS对象,用它来描述真实DOM

二、为什么要用虚拟DOM

越多的真实dom操作,越损耗性能

而用虚拟dom操作数据要大大的减少性能损耗,提高渲染效率

二、虚拟DOM的渲染流程

1、获取数据

2、根据数据创建VDOM (相当于给对象赋值)

3、根据VDOM渲染生成真实DOM ( 根据createElement(‘DIV’) )

4、当数据发生改变后,又会生成新的VDOM

5、通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来,然后再进行真实DOM渲染,

一样的内容是不会进行渲染的,这就是VDOM 的 ‘就地复用’ | ‘惰性原则’

mvc与mvvc 与vue

mvc的一点东西

mvvc它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。

view与viewModel(取代mvc中的controller)双向通信

Model与ViewModel双向通信

双向绑定

当内存里某个数值改变的时候会反映到页面上

页面上用户使某个数值改变了就会反映到内存里

例如vue

input中内容变化会使{{n}}变化

用了vue感觉一下就变得容易了很多,几乎不需要dom的操作

但是一旦出现了问题没有扎实得原生js基础很难解决

vue这些框架使前端变得复杂但是容易了,

用jq出现问题很容易解决,大不了用原生js就行了,但是vue出现问题很难快速换其他的方法。

因此在基础不好,对mvc/mvvc不了解的情况下不建议使用vue等框架容易产生依赖不利于深入学习,出现问题又不好解决。

Vue基本用法

Vue:渐进式javascript框架

声明式渲染--组件系统--客户端路由--集中状态管理--项目构建

Vue的基本使用

Vue的两种挂载方式:

模板语法:

1.插值表达式

存在闪动问题:快速刷新浏览器时,有时会显示{{xxx}}内容,然后替换为要显示的值.解决的办法--指令(先隐藏,替换好值之后再显示)

2.指令(指令的本身就是自定义属性)

以v-开头 例如v-cloak

html:

js

效果:

使用v-cloak

html:

css:

效果:

在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中(webpack、vue-router)只有一个空的 div 元素,元素中的内容是通过路由挂载来实现的,这时我们就不需要用到 v-cloak 指令咯。

双向数据绑定:v-model

2.MVVM私享

M(model)

V(view)

VM(view-model)

mvc,mvp和mvvm的区别:

3.事件绑定

事件冒泡和事件捕获

3.1v-on指令

示例:

效果:

3.2事件函数的调用方式

html:

js

3.3事件函数参数传递

普通参数和事件对象

3.4事件修饰符

.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件

.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交

.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号

.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式

.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行

.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

html:

js:

e.prevent等同于

event.preventDefault()

3.5按键修饰符

在Vue中可以通过 config.keyCodes 自定义按键修饰符别名

示例:Vue.config.keyCodes.aaa = 65;

自定义按键:

4.属性绑定

v-bind指令:被用来响应地更新 HTML 属性

html:

js:

效果:

5.v-model的实现原理分析

等价于

第一种实现只是后面两种写法的语法糖.

当在input元素中使用v-model实现双数据绑定,其实就是在输入的时候触发元素的input事件,通过这个语法糖,也能够实现父子组件数据的双向绑定.

父组件:

子组件:

6.样式绑定v-bind:class

1??class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

①动态切换多个class

html

css

js

效果:

②样式绑定到对象

③数组语法:

默认class会被保留合并

2??style

三元表达式:

7.分支循环结构

7.1

v-show与v-if的区别:

v-show:

v-if:

1.原理

2.应用场景

7.2 循环结构

为什么需要独一无二的key的简单示例:

效果:

点击查看更多:

v-for:需要key的原因:

v-for遍历对象

为什么尤雨溪尤大说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'。

(责任编辑:IT教学网)

更多

推荐时间特效文章