模仿vue自己动手写响应式框架一-Vue实现todo应用

首先申明，自己并不是前端大神，看过我之前的内容应该晓得，我善于做后端，尽管前端略有涉略，但谈不上精通，连相熟都勉强。写这个系列的目标仅仅只是出于好奇，好奇为何前几年还是 JQuery 一统天下的前端场面现在为何如此凌乱，好奇好好的 js 是如何被玩的亲妈都不意识，之所以抉择 vue 作为切入点，齐全是因为 vue 简略，根本看下 demo 就能入门，既然 vue 作为目前风行的前端三大框架之一，那么只有理解 vue 是怎么实现的，是不是对前端略微有了一点意识，于是在这种想法的促使下，有了这个系列。

这里模拟 vue 并不是指我把 vue 的源码看了一遍，看懂了而后模拟 vue 写，而是语法还是 vue 的语法，然而实现我本人想方法实现，当然能够参考 vue，但以我前端的程度想齐全看懂 vue 难度有点大，所以如果你想理解 vue 源码实现，这个系列不适宜你，但如果你和我一样，略微会点 js，又对 vue 源码无从下手，但又想晓得如何实现跟 vue 一样的性能，那么就跟着我一起，咱们不看源码，本人推敲实现一个简略的 vue。

本系列的思路是，用 vue 实现一个简略利用，利用中用到 vue 相干外围性能，而后代码放弃不变，把 vue.js 文件替换成咱们本人的实现，最终达到和 vue 一样的成果。这里用 vue 实现一个超简略的 todo 利用，代码如下：

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input v-model="newTodo"></input>
        <button v-on:click="addTodo()"> 增加 </button>
        <div> 输出的文字:{{newTodo}}</div>
        <ul>
            <div v-for="(todo,index) in todos" style="margin-bottom: 20px;">
                <li style="float: left;margin-right: 20px;">
                    {{todo.text}}
                </li>
                <button v-on:click="deleteTodo(index)"> 删除 </button>
            </div>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                newTodo: '',
                todos: []},
            methods: {addTodo: function () {this.todos.push({ text: this.newTodo});
                    this.newTodo = '';
                },
                deleteTodo: function (index) {this.todos.splice(index, 1);
                }
            }
        })
    </script>
</body>

</html>

成果如下：

输入框值发生变化时，在输入框下方会显示输出的内容（仅仅为了演示成果，疏忽实际意义）
每输出一条新的 todo，上面就会多一项列表项
点击列表项左边删除按钮能够删除以后列表项

demo 尽管简略，但蕴含了 vue 所有外围性能

双向值绑定 (v-model)
响应式，值发生变化，绑定的节点值也同步变动
事件响应 (v-on:click)
循环指令 (v-for)

前面的章节，咱们不引入 vue.js 文件，一步步实现同样的性能。

模拟 vue 本人入手写响应式框架 (一) – Vue 实现 todo 利用
模拟 vue 本人入手写响应式框架 (二) – Vue 对象创立

模仿vue自己动手写响应式框架一-Vue实现todo应用

背景

vue 实现 todo 利用

参考