vue三要素及底层实现机制
深入解析Vue
我们首先来熟悉一下我们这个文档所学习内容的流程。
先对比一下jQuery和Vue的区别,再讲述Vue的MVVM模型,接着讲解Vue的实现流程。
当然,我是不相信没有对比哪来的伤害,没有伤害哪能让人记忆深入骨髓咧,向来都是被伤害过的人我才会记得你,我要恨你一辈子 ~ ~ 哈哈,这当然是个泛词,我们今天的重点也不是要你真的去恨谁哈,一起来看今日焦点,jQuery 和 Vue的生死之战。
我们来看看jQuery 和 Vue 分别具有什么夺命技能,来来来,看官们看好了。
一、jQuery和Vue的区别
数据和视图分离,解耦(就是都单独分开来)
以数据驱动视图,只关心数据变化,DOM被封装
jQuery:中规中矩的JS门派的后生, 主要的技能就是操作DOM来更改数据,和用DOM来变化数据和视图的更新,
Vue: 独树一派, 拥有响应式,模板引擎解析器,和渲染机制必杀技。
二、Vue的MVVM模型
Vue的MVVM模型讲的是M-> model(数据模型),V-> view(视图、模板),VM-> ViewModel,VM是M和V之间的桥梁,如果没有VM的话,那么Vue就无法实现数据驱动视图进行更新的操作了,
首先我们来介绍一下三者在Vue 里面的表现形式:
三者之间的绑定方式是:
View在ViewModel这个桥梁上利用DOM-listener事件绑定监听事件,将DOM节点上发生的事件传给model,
Model在ViewModel这个桥梁上利用Data-bindings数据绑定事件,将Model数据发生改变的事件传给View,
这样就实现了视图层和数据层双向数据绑定。
下面用一个图来解释一下三者相对应一个Vue 代码中的对应的部分:
三、MVVM框架的三要素
1、响应式 : vue如何监听到data的每个属性变化?
利用Object.defineProperty定义属性,第一个参数对象,第二个属性名
将data里面的属性代理到vm上
利用Object.defineProperty
console.log(obj.name); // 可以监听到
使用defineProperty我们就可以监听到数据变化了。其中这个也是 vue 做响应工做核心的方法了。
obj.name = 'lisi'; // 可以监听到
下面我们来模拟一下
var mv = {}
var data = {
price: 100,
name: 'zhangsan'
}
var key, value;
for (key in data) {
// 命中闭包。新建一个函数,保证 key 的独立的作用域
(function (key) {
Object.defineProperty(mv, key, {
get: function () {
console.log('get');
return data[key];
},
set: function (newVal) {
console.log('set');
data[key] = newVal
}
})
})(key);
}
2、模板解析: vue的模板如何被解析,指令如何处理?
1) vue里面为什么要解析模板?
- 这个模板本质是字符串,
- 但它和html很像但有很大区别,
- 是在这个模板里的html有逻辑,v-for, v-if等等,
- 最终必须解析成html来显示,
- 模板最终必须转换成 JS 代码, 因为:
- 有逻辑(v-if v-for),必须用 JS 才能实现( 图灵完备)
- 转换为 html 渲染页面,必须用 JS 才能实现
- 因此,模板最重要转换成一个 JS 函数
因为只有JS才能实现将代码转化成html格式渲染到浏览器上
for example:
<div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
以上就是一个模板啦
2) render函数
with 用法(vue render有用到,所以说下用法 ,具体开发中建议不使用)
简要说明
with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性。要给对象创建新的属性,必须明确地引用该对象。
render 函数
基础事例
VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数。
比如如下我想要实现如下html:
我们来尝试使用 render函数重写上面的demo,如下:
- 模板中所有信息都包含在了 render 函数中
- this 即 vm
- price 即 this.price 即 vm.price, 即 data 中的 price
- _c 即 this._c 即 vm._c
通过控制台打印,我们就知道了 _c就是一个创建dom 元素的方法, _v 是一个创节点的方法, _s 是 toString 方法。
3、渲染: vue的模板如何被渲染成html? 以及渲染过程?
四、Vue的实现流程
1、首先模板解析器解析成render函数
2、响应式监听
3、将数据渲染进模板里,
4、data属性变化,触发render
jQuery:“ 您能别秀了吗 ”
vue三要素及底层实现机制的更多相关文章
- MVVM 和 VUE三要素:响应式、模板引擎、渲染
MVVM 和 VUE三要素:响应式.模板引擎.渲染:https://blog.csdn.net/weixin_37644989/article/details/94409430
- 【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ 作者:李 ...
- Http协议:彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
转载:http://mp.weixin.qq.com/s/uWPls0qrqJKHkHfNLmaenQ 导语 Http 缓存机制作为 web 性能优化的重要手段,对从事 Web 开发的小伙伴们来说是必 ...
- 2、docker安装:内核要求、docker三要素、安装、helloworld、底层原理
1.前提说明 1.CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 2.前提条件:内 ...
- 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)
[Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809
- 理解vue与MVVM三要素
MVVM到底是什么,跟Jquery有什么区别? MVVM理解,跟MVC区别 Model View Controller,一般是用户操作view视图按钮,触发controller内方法,cotrolle ...
- Web Service基础——规范及三要素
1. Java中的Web Service规范 Java 中共有三种WebService 规范,分别是JAX-WS(JAX-RPC).JAX-RS.JAXM&SAAJ(废弃). 1.1 JAX- ...
- Docker Note1——架构和三要素
Docker官方文档: https://docs.docker.com/ 一.docker架构 C/S架构,主要由 client / daemon / containers / images 组成. ...
- WebService基础学习(二)—三要素
一.Java中WebService规范 JAVA 中共有三种WebService 规范,分别是JAX-WS.JAX-RS.JAXM&SAAJ(废弃). 1.JAX-WS规范 ...
随机推荐
- 【xsy3423】党² 线段树+李超线段树or动态半平面交
本来并不打算出原创题的,此题集CF542A和sk的灵感而成,算个半原创吧. 题目大意: 给定有$n$个元素的集合$P$,其中第$i$个元素中包含$L_i,R_i,V_i$三个值. 给定另一个有$n$个 ...
- AppScan安全测试入门操作
appscan:可以对网站等 Web 应用进行自动化的应用安全扫描和测试,也就是经常说的安全测试 工作原理:是通过对web应用进行安全攻击来检查网站是否存在漏洞. 初步了解到的 创建新的扫描-> ...
- 页面按钮埋点+跟踪location.search
<a href="javascript: void(0)" onclick="setUrl('https://baoxian.pingan.com/pa18shop ...
- js04
接着看一些js的基础,这里主要说一下js的对象. 1.对象: js中的所有事物都可以看作是对象:字符串.数值.数组.函数... 内建对象:String Date Array ...
- laydata 点击日期闪现
因项目需求需要多个日期,然后点击日期就会出现闪现的情况,导致选择不了日期 html代码 <table class="form"> <tr> <th c ...
- mysql互为主从实战设置详解及自动化备份(Centos7.2)
mysql互为主从实战设置详解(Centos7.2) 第一步:mysql配置 my.cnf配置 服务器1 (10.89.10.90) [mysqld] server-id=1 log-bin=/ ...
- HBase Cli相关操作
修改HBase表结构之前首先需要disable表,然后进行更改相关表结构信息,最后enable表,如下 1. 动态添加一个或多个列簇 hbase(main):034:0> describe 'H ...
- (转)IBM AIX系统为rootvg实现镜像
IBM AIX系统为rootvg实现镜像 AIX系统安装的时候,没有选择安装镜像,因此在系统安装完成后,出于安全方面的考虑,决定为rootvg创建镜像. 工具/原料 AIX rootvg lspv c ...
- JavaMail之-通过邮件激活账号
关键点就在于: 根据用户的给出的email,给这个email发送一个邮件.这个邮件中应该带有一个激活码?(32位UUID,64位UUID). 大概步骤: 1, 注册功能 - 只要用户注册成功,就给他 ...
- artTemplate-优秀的前端模板引擎
artTemplate-优秀的前端模板引擎 1.html中引入artTemplate的js文件: <script type="text/javascript" src=&qu ...