手把手实现简易版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、效果图及实例化源码

效果：

实例化源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-core</title>
  <style>
    *{
        margin: 0;
        padding: 0;
    }
    .list{
        background-color: aqua;
    }
    .list li {
        border: 1px solid #eee;
        list-style: none;
    }
  </style>
</head>
<body>
  <div id="root">
    <div>{
   
   {article.title}}: {
   
   {author}}</div>
    <div>{
   
   {article.text.word}}</div>
    <div><input type="text" :model="article.title"></div>
    <div><input type="text" :model="author"></div>
    <div><button @click="onButtonClick">click</button></div>
    {
   
   {article.title}}
  </div>
  
  <script type="module">
    import {Component} from './index.js'
    const IndexComponent = new Component({
        data: () => {
            return {
                article: {
                    title: '前标题',
                    text: {
                        word: '文字'
                    }
                },
                author: '前林大大哟',
                arr: [{
                    id: 0,
                    name: '林大大'
                },{
                    id: 1,
                    name: '林小小'
                },{
                    id: 2,
                    name: '林大哟哟'
                }]
            };
        },
        watch: {
            author(value) {
                console.log("watch 监听author:", value);
            },
            article(value){
                console.log("watch 监听 article.title:", value);
            }
        },
        methods: {
            onButtonClick() {
                this.article.title = "标题"
                this.author = '林大大哟'
            },
            itemClick(item, type) {
                console.log(item, type);
            }
        }
    });
    IndexComponent.mount('#root')
  </script>
</body>
</html>

3、demo结构讲解

<div id="root"></div>

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

const IndexComponent = new Component({})

IndexComponent.mount('#root')

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

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

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

4、相关说明及解释

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