手把手实现简易版vue（一）LveJs

1、介绍

看过一些vue2和3的源码，然后寻思着想自己实现一个简易版的vue，写法还是以vue2为主，然后我自己命名为Lve.js，不过还有蛮多问题没有克服，比如v-for，这部分在vue里面是将模板等编译成ast，然后再进行转换，我目前还没有实现它。

目前支持的用法：

Lve.js 写法	支持程度	Vue.js 写法
:model	双向绑定各种基本/引用类型已经支持	v-model
:style	绑定style支持	:一致
@click	点击事件	一致
watch	区别是监听深层对象和监听基本类型一致	一致
{{}}	template双括号支持	一致
created、mounted、destroyed	支持created、mounted、destroyed生命周期	一致
:show	支持	v-show
:if	只支持初始化	v-if

2、效果图及实例化源码

效果：

 实例化源码：

  
  
  
  
  


  

    
{{article.title}}: {{author}}
    
{{article.text.word}}
    

    

    
click
    {{article.title}}
  
  
  

3、demo结构讲解

import {Component} from './index.js'

const IndexComponent = new Component({})

IndexComponent.mount('#root')

第一行其实跟vue挂载节点一致，都有个需要挂载dom的地方;

第二，三行是抛出组件类的概念，跟vue h5单页面实例化其实差不多

第四行，是将dom挂载到组件类实例上

4、相关说明及解释

林大大本人是蛮喜欢看各种库框架源码，但是也不会全看，因为全看的话，思路就跟别人作者一致了（其实是看源码太枯燥静不下心），所以会半路写些自己想要的东西，导致有很多半层品出来，但这个LveJs，可能会是个很长期的作品，毕竟只有我一人抽闲暇时间写写，当然我肯定会坚持初衷，尽量不引入多的插件，让整体包最轻量化