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

模仿vue,写出自己的响应式框架(四)——Vue对象构建

时间:2023-03-31 17:30:18 vue.js

概述在前面的章节中,我们创建了一个没有任何逻辑的vue对象,只是为了保证varapp=newVue({...})是不仅仅是报告错误。在本文中,我们将构建一个真正的Vue对象来实现真正的值绑定。build(build)这是在html中创建vue的代码varapp=newVue({el:'#app',data:{newTodo:'',todos:[]},methods:{addTodo:function(){this.todos.push({text:this.newTodo});this.newTodo='';},deleteTodo:function(index){this.todos.splice(index,1);}}})这个想法是创建一个vue对象,直接在对象上挂载数据,这样就可以实现vue.newTodo的访问效果。直接在桂香上挂载该方法,即可实现vue.addTodo的效果。当然,其实vue并不是这样实现的,vue是通过代理的方式来达到直接访问的效果,我们的目标是能用就用(大家不要报这种思路当你真正实现一个框架时,这个系列是为了让大家了解和上手)。varvue={};functionbuild(){for(letkinoptions.data){letv=options.data[k];定义属性(k,v);}for(letkeyinoptions.methods){vue[key]=options.methods[key];}}defineProperty这是实现绑定的核心步骤,代码如下:(newValue){value=newValue;letitems=subscriber[name];if(items){for(leti=0;i0){method.params=params.分裂(”,”);}else{method.params=[];}}返回方法;}addEvent代码:functionaddEvent(element,event,method){element.addEventListener(event,function(e){letparams=[];letparamNames=method.params;if(paramNames){for(leti=0;i