vue3.0实现原理
vue3.0.js
------------------
function Vue(option){
this.$el = document.querySelector(option.el); //获取挂载节点
this.$data = option.data;
this.$methods = option.methods;
this.deps = {}; //所有订阅者集合 目标格式（一对多的关系）：{msg: [订阅者1, 订阅者2, 订阅者3], info: [订阅者1, 订阅者2]}
this.observer(this.$data); //调用观察者
this.compile(this.$el); //调用指令解析器
}
Vue.prototype.compile = function (el) {
let nodes = el.children; //获取挂载节点的子节点
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.children.length) {
this.compile(node) //递归获取子节点
}
if (node.hasAttribute('l-model')) { //当子节点存在l-model指令
let attrVal = node.getAttribute('l-model'); //获取属性值
node.addEventListener('input', (() => {
this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一个订阅者
let thisNode = node;
return () => {
this.$data[attrVal] = thisNode.value //更新数据层的数据
}
})())
}
if (node.hasAttribute('l-html')) {
let attrVal = node.getAttribute('l-html'); //获取属性值
this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者
}
if (node.innerHTML.match(/{{([^\{|\}]+)}}/)) {
let attrVal = node.innerHTML.replace(/[{{|}}]/g, ''); //获取插值表达式内容
this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者
}
if (node.hasAttribute('l-on:click')) {
let attrVal = node.getAttribute('l-on:click'); //获取事件触发的方法名
node.addEventListener('click', this.$methods[attrVal].bind(this.$data)); //将this指向this.$data
}
}
}
Vue.prototype.observer = function (data) {
const that = this;
for(var key in data){
that.deps[key] = []; //初始化所有订阅者对象{msg: [订阅者], info: []}
}
let handler = {
get(target, property) {
return target[property];
},
set(target, key, value) {
let res = Reflect.set(target, key, value);
var watchers = that.deps[key];
watchers.map(item => {
item.update();
});
return res;
}
}
this.$data = new Proxy(data, handler);
}
function Watcher(el, attr, vm, attrVal) {
this.el = el;
this.attr = attr;
this.vm = vm;
this.val = attrVal;
this.update(); //更新视图
}
Watcher.prototype.update = function () {
this.el[this.attr] = this.vm.$data[this.val]
}
-----------------------------------------------
vue3.0.html
---------------------------------------------
<!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>Document</title>
<script src="./vue3.0.js"></script>
</head>
<body>
<!--
实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Proxy来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者
-->
<div id="app">
<input type="text" l-model="msg" >
<p l-html="msg"></p>
<input type="text" l-model="info" >
<p l-html="info"></p>
<button l-on:click="clickMe">点我</button>
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "恭喜发财",
info: "好好学习, 天天向上"
},
methods: {
clickMe(){
this.msg = "我爱敲代码";
}
}
})
</script>
</body>
</html>
vue3.0实现原理相关推荐
- Vue3.0之双向绑定原理——Proxy
了解代理模式 一个例子 作为一个单身钢铁直男程序员,小王最近逐渐喜欢上了前端小妹,不过呢,他又和前台小妹不熟,所以决定委托与前端小妹比较熟的UI小姐姐帮忙给自己搭桥引线.小王于是请UI小姐姐吃了一顿大 ...
- vue3.0原理 —— complier
一.为什么要用vue3.0 1.核心代码进行了压缩,核心代码+composition API(合成函数):13.5KB,最小11.75kb 2.所有的runtime(运行时间):22.5kb(vue2 ...
- Vue3.0 备受热捧！2020 前端开发进阶必读
你好,我是汤小洋. 前华为全栈工程师,南京大学软件工程硕士,拥有11年全栈开发及内部培训分享经验. 作为一名前端人,学习从不是一件容易的事,这是我一路走过来的真实感受."只要付出,就有收获& ...
- Vue最全知识点，面试必备（基础到进阶，覆盖vue3.0，持续更新整理，欢迎补充讨论）
声明:本篇文章纯属笔记性文章,非整体原创,是对vue知识的整理,对自己有很大帮助才分享出来,参考文章传送:1.童欧巴对vue知识的整理 2.我是你的超级英雄对vue知识的整理 3.vue官网 基础篇 ...
- Vue3.0笔记（B站天禹老师）
Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多.2600+次提交.30+个RFC.600+次PR.99位贡献者 g ...
- vue3.0导出excel带格式
这个真的困扰了我整整一天,我尝试了xlxs file-saver两个组件的版本,怎么搞都不行 先不说vue3.0 不能import进来,只能require('xlxs'),require('file- ...
- 【Vue系列】Vue3.0知识点汇总整理
目录 一.Vue3简介 1.Vue3带来了什么? 二.创建Vue3工程 1.使用vue-cli创建 2.使用vite创建 补充:分析Vue3的工程结构 三.常用Composition API 1.初识 ...
- vue3.0初体验（例子解读reactive响应式）
目录 准备 vue3 reactive原理例子重点讲解 vue3 reactive原理例子完整代码 准备: 下载vue-next 安装依赖 npm install 核心部分package,里面的vue ...
- vue2和vue3响应式原理
vue2响应式原理:核心使用Object.defineProperty给属性定义get和set方法 注意:对象的多次递归,针对数组需要重写数组方法 函数劫持:把函数内部进行重写同时继续调用老的方法,在 ...
最新文章
- JSP自定义标签rtexprvalue属性
- linux小白-基础命令-useradd
- 2021.02.01.stata注释方法
- cli parser_Java命令行界面（第27部分）：cli-parser
- leetcode 501. 二叉搜索树中的众数 思考分析
- 四、COSMIC功能点实操
- 在ubuntu中为程序添加图标快捷键
- Android笔记 杀死进程demo
- 测试监视器锁的等待/通知机制
- 第七届 蓝桥杯 省赛 第六题 方格填数（next_permutation）
- LED显示驱动（二）：显示驱动FPGA验证流程与注意细节
- android 控件获取rect,Android自定义View圆形进度条控件（三）
- iOS开发日记40-详解React Native
- 【linux】具体芯片MACHINE_START处理
- 【广工考试笔记】计算机系统结构考试速成笔记
- python123外汇兑换计算器_使用python+PyQt5 实现等额本金计算器
- java 吃豆豆游戏背景底纹_java swing开发简单的大鱼吃豆子小游戏，可用于毕业设计(附详细设计文档)...
- 论文参考文献生成代码（2021.2.25）
- RGB 色值与十六进制色值互转
- openwrt软路由实现ipv6上网配置