造轮子之Vue实现原理，几十行代码实现Vue

Vue.js框架的原理其实很简单，就是利用了Object.defineProperty()方法进行了数据劫持，重写里面的get和set方法，数据发生变动，相应的set()方法变回响应，进而拿到更新的数据来更新dom，今天抽时间写了一个仿Vue.js的demo，暂且叫Mvc.js吧，初步实现了Vue的模板渲染功能，和大家分享，下面还是先上代码。

<html><head><meta charset="utf-8"><title>vue2原理</title></head><body><h1 id="app">测试：{{message}}版本：{{db.ver}}</h1><hr><button onclick="change()">点击切换文字</button></body><script>class Mvc{/*** [constructor 构造方法]* @param  {[type]} config [配置数据]* @return {[type]}        [void]*/constructor(config){this.labelsHandle={};//标签缓存this.data=JSON.parse(JSON.stringify(config.data));//原始数据this.el=config.el;//元素标记this.htmlHandle=document.querySelector(this.el).innerHTML;//原始模板缓存this.listener(this.data,this,"data","");this.reView();}/*** [listener 监听数据变化]* @param  {[type]} data   [数据]* @param  {[type]} parent [数据父节点]* @param  {[type]} key    [数据索引]* @param  {[type]} varName[变量名称]* @return {[type]}        [void]*/listener(data,parent,key,varName){varName+=(varName=="")?key:"."+key;console.log(varName);if(typeof data=="object"){parent=data;for(var i in data){this.listener(data[i],parent,i,varName);}}else{let This=this;Object.defineProperty(parent,key,{get:function(){return data;},set:function(newVal){data=newVal;This.setLabels(data,varName);This.reView();}})this.getLabels(data,varName);}}/*** [getLabels 收集标签]* @param  {[type]} data    [description]* @param  {[type]} varName [description]* @return {[type]}         [description]*/getLabels(data,varName){varName=varName.slice(5);if(typeof this.labelsHandle[varName]=="undefined"){this.labelsHandle[varName]=data;}}/*** [setLabels 修改标签]* @param {[type]} data    [description]* @param {[type]} varName [description]*/setLabels(data,varName){varName=varName.slice(5);this.labelsHandle[varName]=data;}/*** [reView 模板渲染]* @return {[type]} [description]*/reView(){let element=document.querySelector(this.el);let html=this.htmlHandle;for(var i in this.labelsHandle){html=html.replace(`{{${i}}}`,this.labelsHandle[i]);}element.innerHTML=html;}}</script><script>var app=new Mvc({el:'#app',data:{message: 'Hello Mvc!',db:{ver:"v1.0"}}});this.change=function(){app.data.message=""+Math.random();}</script>
</html>

可以看到使用方法和Vue一样

var app=new Mvc({
       el:'#app',
       data:{
       message: 'Hello Mvc!',
       db:{
           ver:"v1.0"
       }
       }
       });

然后是模板部分

<h1 id="app">测试：{{message}}版本：{{db.ver}}</h1>

当更新数据时，相应的模板就会重新渲染，如app.data.message="Hello World"

代码很简单都写了注释

造轮子之Vue实现原理，几十行代码实现Vue相关推荐

vue openlayer单击地图事件循环多次执行_12道vue高频原理面试题,你能答出几道?
前言本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B ...
vue key重复_12道vue高频原理面试题，你能答出几道？
前言本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B ...
12道vue高频原理面试题,你能答出几道?
前言本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B ...
vue文件快速生成模板代码
vue文件快速生成模板代码输入 vue 按 tab 键
来一起造轮子：手写 Vue3 reactivity 模块
最近和一个猎头聊天,说到现在前端供需脱节的境况.一方面用人方招不到想要的中高级前端,另一方面市场上有大量初级前端薪资要不上价. 特别是用 Vue 框架的,因为好上手,所以很多人将 Vue 作为入门框架 ...
来一起用 Vue3.0 造轮子
Vue.js 3.0 "One Piece" 已正式发布,33% 的渲染速度提升.41% 的体积缩小.54% 的内存用量下降.代码可维护和可复用性提升--两个字来形容:真香! 你开 ...
来一起造轮子：手写 Vue3 reactivity 模块
最近和一个猎头聊天,说到现在前端供需脱节的境况.一方面用人方招不到想要的中高级前端,另一方面市场上有大量初级前端薪资要不上价. 特别是用 Vue 框架的,因为好上手,所以很多人将 Vue 作为入门框架 ...
【Vue3 造轮子项目 ------ kaite-ui】基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI
基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI 前言前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解 ...
经常造轮子的 AI 工程师水平通常不会太差
题图 | 邵姺画引子 | 造轮子还是不造轮子,这是一个问题理查德·费曼教授去世后,人们在他的黑板上发现了 What I cannot create, I do not understand 这句话 ...

造轮子之Vue实现原理，几十行代码实现Vue

造轮子之Vue实现原理，几十行代码实现Vue相关推荐

最新文章

热门文章