理解vue与MVVM三要素
MVVM到底是什么,跟Jquery有什么区别?
MVVM理解,跟MVC区别
- Model View Controller,一般是用户操作view视图按钮,触发controller内方法,cotroller修改model数据,model通知view,算是后端开发的主流思想
- vue中template为View, data对象为Model,new Vue({el,data,methods})为ViewModel,连接视图view与data,view通过DOMlistenser事件'on'绑定来操作model,model通过数据绑定dataBinding操作view
数据,视图层是否分离
- vue中,proxy代理_data数据,并且不允许直接修改。template为视图
- 不分离背离了开放封闭的原则,不利于维护,功能扩展
以数据驱动视图
- 只修改数据,就会触发封装好的dom操作。不需要手动进行dom操作
MVVM 实现三要素
如何监听变化,实现响应式
- Object.defineProperty设置get,set监听data变化
- vm.data,利用Object.defineProperty,proxy代理data对象,便于render函数中的this取值
视图模板解析,模板引擎
- 本质是字符串,有v-if,v-for等逻辑,需要以js执行
将js中data对象属性捆绑到render函数,最后返回vnode,render函数中结构与snabbdom中h函数相似
// vue
function render () {
with (this) { //将_c,_v,price的this省略,相当于this._c,this._vthis.price
_c('div', {attrs: {'id': 'app'}}, [_c('span', [_v(_s(price))])]) //_c创建vnode,_v字符串节点,_s字符串转话
}
}
// snabbdom
h('div#app', [
h('span', vm.price)
])
dom如何生成的,如何在监听变化后渲染,使用patch方法与snabbdom相同
- 首次渲染
更新渲染
vm._update(vnode) {
const prevVnode = vm.vnode
vm._vnode = vnode
if (!prevVnode) {
vm.$el = vm.__patch__(vm.$el,vnode) //初次渲染
} else {
vm.$el = vm.__patch__(prevVnode,vnode)
}
}
function updateComponent() {
vm._update(vm._render()) //此处render即是模板转化的render函数,执行后可生成vnode
}
来源:https://segmentfault.com/a/1190000016066200
理解vue与MVVM三要素的更多相关文章
- MVVM 和 VUE三要素:响应式、模板引擎、渲染
MVVM 和 VUE三要素:响应式.模板引擎.渲染:https://blog.csdn.net/weixin_37644989/article/details/94409430
- vue三要素及底层实现机制
深入解析Vue 我们首先来熟悉一下我们这个文档所学习内容的流程. 先对比一下jQuery和Vue的区别,再讲述Vue的MVVM模型,接着讲解Vue的实现流程. 当然,我是不相信没有对比哪来的伤害,没有 ...
- js架构设计模式——你对MVC、MVP、MVVM 三种组合模式分别有什么样的理解?
你对MVC.MVP.MVVM 三种组合模式分别有什么样的理解? MVC(Model-View-Controller)MVP(Model-View-Presenter)MVVM(Model-View-V ...
- 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)
[Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809
- 深入理解vue
一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到 ...
- 【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ 作者:李 ...
- Http协议:彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
转载:http://mp.weixin.qq.com/s/uWPls0qrqJKHkHfNLmaenQ 导语 Http 缓存机制作为 web 性能优化的重要手段,对从事 Web 开发的小伙伴们来说是必 ...
- 实现一个类 Vue 的 MVVM 框架
Vue 一个 MVVM 框架.一个响应式的组件系统,通过把页面抽象成一个个组件来增加复用性.降低复杂性 主要特色就是数据操纵视图变化,一旦数据变化自动更新所有关联组件~ 所以它的一大特性就是一个数据响 ...
- [信息安全] 4.一次性密码 && 身份认证三要素
[信息安全]系列博客:http://www.cnblogs.com/linianhui/category/985957.html 在信息安全领域,一般把Cryptography称为密码,而把Passw ...
随机推荐
- C语言复习-字符串与指针
C语言复习-字符串与指针 例一: [字符串处理 去除C代码中的注释] C/C++代码中有两种注释,/* */和//.编译器编译预处理时会先移除注释.就是把/*和*/之间的部分去掉,把//以及之后的部分 ...
- [CSP-S2019]格雷码 题解
CSP-S2 2019 D1T1 考场上第一遍读题的时候感觉不是很一眼……不是很符合D1T1的气质 之前完全没听说过格雷码是什么玩意,还是我太菜了 仔细读题后发现应该是有规律可循的 赛后据说有$O(1 ...
- 项目介入EF Core
目前.Net主流的ORM有SqlSugar.Entity Framework.Dapper,其它的我就不列举了.其实和Java那边ibatis相比,他们都比较轻量.之前用ibatis开发,真的很麻烦, ...
- hadoop平台环境搭建
centos01 配置静态ip vim /etc/sysconfig/network-scripts/ifcfg-eth0 见图1 修改主机名 vim /etc/sysconfig/network 见 ...
- ES6常用总结(一)
let,const let声明变量,const声明常量,两者均为块级作用域 let,const在块级作用域内不允许重复声明 const声明的基本数据类型不可以修改,引用数据类型可以修改.具体看我的另一 ...
- Unity技巧集合
地址:http://blog.csdn.net/stalendp/article/details/17114135 这篇文章将收集unity的相关技巧,会不断地更新内容. 1)保存运行中的状态 uni ...
- html打印后不刷新当前页
这种方法可以在打印的页面中添加样式,新页面跳转打印 doPrint(ids){ var titleHTML=document.getElementById(ids).innerHTML; var Op ...
- 剑指 Offer 46. 把数字翻译成字符串
题目描述 给定一个数字,我们按照如下规则把它翻译为字符串:0 翻译成 "a" ,1 翻译成 "b",--,11 翻译成 "l",--,25 ...
- Java获取CPU序列号
获取CPU序列号 /** * 获取CPU序列号 * @return */ public static String getCpuId() throws IOException { Process pr ...
- java实现zip文件的解压
使用到的包 org.apache.commons 下载文件 url:文件所在地址需要是http:// filePath:将下载的文件保存的路径 public static void getDownlo ...