当前位置: 首页 > Web前端 > vue.js

仿Vue(二)构造函数

时间:2023-03-31 20:11:09 vue.js

2.构造函数MyVue自己动手做,你会对本题有更深的理解:实现构造函数MyVue。上一篇文章遗留了以下问题:构造函数没有集成,无法替换name.firstName的层级属性。不使用虚拟DOM。今天主要的解决方案是实现MyVue的构造函数,并在其原型中添加render、compiler、update这三个方法。01.实现构造函数MyVue(先声明,实际的Vue会不一样)。构造函数只能使用new调用获取元素和数据调用render函数`keyword')}//内部数据以_开头,只读数据以$this._data=options.data;this._el=options.el;//准备模板和父节点this.$el=this._template=document.querySelector(this._el);this._parent=this._template.parentNode;//开始渲染this.render();}02、render函数接下来,在MyVue的prototype中添加render函数,还没有其他生命周期函数,直接编译吧~MyVue.prototype.render=function(){this.compiler();}03。最后,编译函数在MyVue的原型中加入编译函数,内部调用之前编写的编译函数。/**编译得到真正的DOM*/MyVue.prototype.compiler=function(){letnewDOM=this._template.cloneNode(true);编译器(newDOM,this._data);//这个函数在上一章写的this._parent.replaceChild(newDOM,this._template);}04。效果展示html中的代码如下

{{name}}

{{message}}

{{name}}--{{message}}

letapp=newMyVue({el:'#root',data:{name:'romeo',message:'帅但是坏人',}})效果图:更多源码请看我的github欢迎关注我的公众号,查看更多系列文章~