vue 简单原理
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>todolist</title>
</head>
<body>
<div id="app">
<p>{{name}}</p>
<p q-text="name"></p>
<p>{{age}}</p>
<p>{{doubleAge}}</p>
<input type="text" q-model="name"/>
<button @click="changeName">点击</button>
<div q-html="html"></div>
</div>
<script> class QVue {
constructor(options){
this.$options = options;
// 数据响应
this.$data = options.data || {};
// 监听数据变化
this.observe(this.$data);
// 主要用来解析各种指令，比如v-modal，v-on:click等指令
new Compile(options.el,this);
// 执行生命周期
if(options.created){
options.created.call(this);
}
}
// 观察数据变化
observe(value){
if(!value || typeof value !== "object"){
return;
}
let keys = Object.keys(value);
keys.forEach((key)=> {
this.defineReactive(value,key,value[key]);
// 代理data中的属性到vue实例上
this.proxyData(key);
})
}
// 代理Data
proxyData(key){
Object.defineProperty(this,key,{
get(){
return this.$data[key];
},
set(newVal){
this.$data[key] = newVal;
}
})
}
// 数据响应
defineReactive(obj,key,val){
// 解决数据层次嵌套
this.observe(val);
const dep = new Dep();
Object.defineProperty(obj, key,{
get(){
// 向管理watcher的对象追加watcher实例
// 方便管理
Dep.target && dep.appDep(Dep.target);
return val;
},
set(newVal){
if(newVal === val){
return;
}
val = newVal;
// console.log(`${key}更新了：${newVal}`)
dep.notify();
}
})
}
} // 管理watcher
class Dep {
constructor() {
// 存储
this.deps = [];
}
// 添加watcher
appDep(dep){
this.deps.push(dep);
}
// 通知所有的watcher进行更新
notify(){
this.deps.forEach((dep) => {
dep.update();
})
}
}
// 观察者 做具体更新
class Watcher {
constructor(vm,key,cb){
// Vue实例
this.vm = vm;
// 需要更新的key
this.key = key;
// 更新后执行的函数
this.cb = cb;
// 将当前watcher实例指定到Dep静态属性target
// 用来在类间进行通信
Dep.target = this;
// 触发getter,添加依赖
this.vm[this.key];
Dep.target = null;
}
update(){
this.cb.call(this.vm,this.vm[this.key]);
}
} class Compile {
constructor(el,vm) {
// 要遍历的宿主节点
this.$el = document.querySelector(el);
this.$vm = vm; // 编译
if(this.$el){
// 转换宿主节点内容为片段Fragment元素
this.$fragment = this.node2Fragment(this.$el);
// 执行编译过程
this.compile(this.$fragment);
// 将编译完的HTML结果追加至宿主节点中
this.$el.appendChild(this.$fragment);
}
} // 将宿主元素中代码片段取出来，遍历，这样做比较高效
node2Fragment(el){
const frag = document.createDocumentFragment();
// 将宿主元素中所有子元素**（搬家，搬家，搬家）**至frag中
let child;
// 如果 el.firstChild 为undefined或null则会停止循环
while(child = el.firstChild){
frag.appendChild(child);
}
return frag;
} compile(el){
// 宿主节点下的所有子元素
const childNodes = el.childNodes;
Array.from(childNodes).forEach((node) => {
if(this.isElement(node)){
// 如果是元素
// 拿到元素上所有的执行,伪数组
const nodeAttrs = node.attributes;
Array.from(nodeAttrs).forEach((attr) => {
console.log(attr)
// 属性名
const attrName = attr.name;
// 属性值
const exp = attr.value;
// 如果是指令
if(this.isDirective(attrName)){
// q-text
// 获取指令后面的内容
const dir = attrName.substring(2);
// 执行更新
this[dir] && this[dir](node,this.$vm,exp);
}
// 如果是事件
if(this.isEvent(attrName)){
// 事件处理
let dir = attrName.substring(1); // @
this.eventHandler(node,this.$vm,exp,dir);
}
})
}else if(this.isInterpolation(node)){
// 如果是插值文本
this.compileText(node);
//console.log("编译文本"+node.textContent)
}
// 递归子元素，解决元素嵌套问题
if(node.childNodes && node.childNodes.length){
this.compile(node);
}
})
}
// 是否为节点
isElement(node){
return node.nodeType === 1;
}
// 是否为插值文本
isInterpolation(node){
return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent);
}
// 是否为指令
isDirective(attr){
return attr.indexOf("q-") == 0;
}
// 是否为事件
isEvent(attr){
return attr.indexOf("@") == 0;
} // v-text
text(node,vm,exp){
this.update( node, vm, exp, "text");
}
textUpdater(node,value){
node.textContent = value;
} // 双向绑定
// v-model
model(node,vm,exp){
// 指定input的value属性，模型到视图的绑定
this.update(node,vm,exp,"model");
// 试图对模型的响应
node.addEventListener('input',(e) => {
vm[exp] = e.target.value;
})
}
modelUpdater(node,value){
node.value = value;
} // v-html
html(node,vm,exp){
this.update(node,vm,exp,"html")
}
htmlUpdater(node,value){
node.innerHTML = value;
} // 更新插值文本
compileText(node){
let key = RegExp.$1;
this.update( node, this.$vm, key, "text");
}
// 事件处理器
eventHandler(node,vm,exp,dir){
let fn = vm.$options.methods && vm.$options.methods[exp];
if(dir && fn){
node.addEventListener(dir,fn.bind(vm));
}
} // 更新函数 - 桥接
update(node,vm,exp,dir){
const updateFn = this[`${dir}Updater`];
// 初始化
updateFn && updateFn(node,vm[exp]);
// 依赖收集
new Watcher(vm,exp,function(value){
updateFn && updateFn(node,value);
})
}
} new QVue({
el:"#app",
data:{
name:"I am test",
age:12,
html:"<button>这是一个后插入的按钮</button>"
},
created(){
//console.log("开始吧,QVue");
setTimeout(() => {
this.name = "测试数据，更改了么";
},2000)
},
methods:{
changeName(){
this.name = "点击啦，改变吧";
this.age = 1000000;
}
}
}) </script>
</body> </html>
转自：https://segmentfault.com/a/1190000018614946?utm_medium=referral&utm_source=tuicool
vue 简单原理的更多相关文章
- vue 实现原理及简单示例实现
目录 相关html代码,用于被解析绑定数据 observer代码 Dep代码 Watcher 代码 Compile 代码 vue 简要构造函数 创建vue实例 结语 主要理解.实现如下方法: Obse ...
- vue 编译原理 简介
来源 tinycompile 关于vue的内部原理其实有很多个重要的部分,变化侦测,模板编译,virtualDOM,整体运行流程等. 之前写过一篇<深入浅出 - vue变化侦测原理> 讲了 ...
- vue运行原理
Vue工作原理小结 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简 ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue api 原理]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会 ...
- java中异常处理机制的简单原理
以上是自认为的java异常处理的简单原理,如有不妥之处还请各位大神帮忙指点,谢谢!
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- java——关于异常处理机制的简单原理和应用
异常处理机制的简单原理和应用 一.Execption可以分为java标准定义的异常和程序员自定义异常2种 (1)一种是当程序违反了java语规则的时候,JAVA虚拟机就会将发生的错误表示为一个异常.这 ...
- javascript AJAX简单原理及什么是ajax
AJAX简单原理供初学者理解 AJAX的原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...
- framework7的改进，以及与vue组合使用遇到的问题以及解决方法 (附vue的原理）
framework7官方提供了vue+framework7的组合包,但是那个包用起来复杂度较高,而且不灵活.听说bug也不少. 所以我想用最原始的方式单独使用vue和framework7. 遇到以下问 ...
随机推荐
- 解析sensor_msgs::PointCloud2 ROS点云数据
1.一个仿真的点云数据 header: seq: 2116 stamp: secs: 1586919439 nsecs: 448866652 frame_id: "LidarSensor1& ...
- C语言补漏--内存管理-完结
1.内存分布 2.内存操作函数 数组清空 2. 内存拷贝函数 数组拷贝 3.内存对比 总结 堆区开辟 内存泄漏只申请不释放,导致内存空间持续增长,导致推出 内存污染向没有申请的内存空间写数据 向堆区 ...
- HGAME 2023 WP week1
WEEK1 web Classic Childhood Game 一眼顶真,直接翻js文件,在Events.js中找到mota(),猜测是获取flag,var a = ['\x59\x55\x64\x ...
- JZOJ 2022.07.18【提高组A】模拟
\(\text{T1}\) 很容易想到用 \(f_1 f_2 ... f_k\) 来表示第 \(n\) 项 发现重点关注指数即可,即我们要递推 \(f_1 ... f_k\) 对应的指数 递推涉及 \ ...
- redis（10）事务和锁机制秒杀
Redis事务定义 Redis 事务是一个单独的隔离操作:事务中的所有命令都会序列化.按顺序地执行.事务在执行的过程中,不会被其他客户端发送来的命令请求所打断. Redis 事务的主要作用就是串联多个 ...
- 代码随想录算法训练营day22 | leetcode 235. 二叉搜索树的最近公共祖先 ● 701.二叉搜索树中的插入操作 ● 450.删除二叉搜索树中的节点
LeetCode 235. 二叉搜索树的最近公共祖先 分析1.0 二叉搜索树根节点元素值大小介于子树之间,所以只要找到第一个介于他俩之间的节点就行 class Solution { public T ...
- Atcoder题解：Arc156_c
数据范围 \(10^5\),但是介绍一个 \(O(n\log n)\) 做法. 我们考虑观察样例,发现样例都很小,而且 \(\text{LCS}\) 的长度都是 \(1\),那么我们就猜答案最多为 \ ...
- GPS地图生成03之数据获取
1. 引言¶ 六只脚是国内著名的户外网站,拥有大量的户外GPS轨迹路线,网址为:http://www.foooooot.com/ 2. 数据分析¶ 2.1 获取所有轨迹¶ 搜索关键 ...
- 开源分布式任务调度系统就选：DolphinScheduler
分布式任务调度这个话题是每个后端开发和大数据开发都会接触的话题.因为应用场景的广泛,所以有很多开源项目专注于解决这类问题,比如我们熟知的xxl-job. 那么今天要给大家推荐的则是另一个更为强大的开源 ...
- js中各种函数
//设置不可使用 $("#sydcpihao_"+sysTime).attr('disabled',true); //设置标签中的text $("#sydcdel_&qu ...