最近，我已经学会了Vue框架的基本原则。我见过一些技术博客和Vue的源代码的一些简单的实现。我有数据代理，深入了解数据劫持，模板解析，变化阵列的方法和双向绑定。所以，我试着去实践我学到的知识，使用Vue的基本原理来实现一个简单的待办事项列表，完成深和复杂对象的双向绑定，并监控阵列，从而深化Vue基本原则的印象。
GitHub地址：待办事项列表
学习环节
前排是由于以下的文章，这是我了解Vue的基本原则很有帮助！
分析了实现原理和Vue公司通过自己实现MVVM
梁少峰了解Vue公司早期的源代码
实现效果
数据代理
1。数据代理简介
通常，我们都在数据中写入数据，如下所示。
VaR VM =新的Vue（{
EL：# APP，
数据：{
标题：你好世界
}
方法：{
ChangeTitle：函数（）{
this.title = 'Hello Vue
}
}
}）
console.log（VM。标题）world'or'hello Vue的 / /你好
如果没有数据代理，并修改里面的数据的标题，在changetitle方法只能修改this.data.title = 'Hello Vue，控制台只能转换为console.log（VM。数据。标题），数据是这样的功能。
2。实现原理
通过对数据的属性，每个属性设置的getter和setter的object.defineproperty（），在数据的每个属性复制到对象在同一水平的数据。
（与上面的示例代码相对应）
触发触发器将触发数据中相应的属性吸气剂，触发设置程序将触发相应数据属性中的设置程序，从而实现代理：
VaR自本； / /这VUE实例，VM
Object.keys（这个数据）。ForEach（功能（关键）{）
Object.defineProperty（这个关键，vm.title { / / this.title。
枚举：假，
可配置：真实，
获取：函数吸气剂（）{
返回数据{ { } }对应于数据{ } }的触发器
}，
设置：功能机（newval）{
自我。数据{key} = newval； / /数据{key}对应的setter引发
}
}）；
}
一个小伙伴不熟悉object.defineproperty可以从MDN文档学习（链接）
双向绑定
数据更改视图更新
视图更新（输入文本）->数据变化
视图更新方向的数据>绑定比较简单，主要通过事件监听器来改变数据，比如输入可以监控输入事件，一旦事件输入改变数据。
1。数据劫持
让我们来考虑如何更改数据并更新绑定数据的视图。
答案是object.defineproperty，通过遍历this.data object.defineproperty内设置的所有属性，通知回调函数对应于每个属性的setter里面，回调函数，这里的DOM视图包括重新使用回调函数表添加美元呈现，所以我们可以通过object.defineproperty劫持的数据，当我们重新分配数据，如this.title = 'Hello Vue，它会触发设置函数，DOM函数和触发器的视图重新绘制，数据发生变化时，相应的视图更新。
2。发布-订阅模式
因此，问题是，我们如何触发绑定绑定器中数据的所有回调函数
由于对数据绑定的回调函数不止一个，所以我们将所有回调函数放在一个数组中。我们一旦触发数据的二传手，我们将通过在阵列触发回调，我们称这些回调函数的用户。数组定义最好的二传手在最近的优越功能范围，如下面的实例代码所示。
Object.keys（这个数据）。ForEach（功能（关键）{）
这里添加了所有订阅服务器。
object.defineproperty（this.data，关键，this.data.title { / /
枚举：假，
可配置：真实，
获取：函数吸气剂（）{
console.log（'access数据啦啦队）
返回这个数据{ } }；返回相应的数据值。
}，
设置：功能机（newval）{
如果（newval =这个数据{关键}）{
返回；如果没有变化，数据的功能不会结束，执行以下代码
}
这个数据{key} = newval； / /数据重分配
subs.foreach（函数（）{（）
所有订阅服务器内的通知
}）
}
}）；
}
所以问题又来了。如何将绑定数据的所有回调函数放入数组中
我们能做的手，在吸气的脚，我们知道只要访问数据将触发吸气的相应的数据，我们可以设置一个全局变量的目标，如果我们想在数据标题属性添加一个用户（changetitle功能），我们可以先设定目标= changetitle，在目标高速缓存的changetitle功能之后，访问this.title触发标题吸气，这个全局变量值的目标是增加在吸气的替补阵，添加后的全球目标变量完成设置为空，添加其他用户。示例代码如下：
Object.keys（这个数据）。ForEach（功能（关键）{）
这里添加了所有订阅服务器。
object.defineproperty（this.data，关键，this.data.title { / /
枚举：假，
可配置：真实，
获取：函数吸气剂（）{
console.log（'access数据啦啦队）
如果（目标）{
Subs.push（目标）；
}
返回这个数据{ } }；返回相应的数据值。
}，
设置：功能机（newval）{
如果（newval =这个数据{关键}）{
返回；如果没有变化，数据的功能不会结束，执行以下代码
}
这个数据{key} = newval； / /数据重分配
subs.foreach（函数（）{（）
所有订阅服务器内的通知
}）
}
}）；
}
为便于理解上述代码是通过简化，事实上我们已经写了一个监视用户的构造函数，可以获取相应的数据时，实例化相应的触发吸气用户，详细的代码可以通过自己阅读MVVM
三.模板解析
通过以上两个步骤我们已经实现了数据的变化，您会注意到相应的绑定数据给订阅者，接下来我们将介绍一个特殊的订阅者，即视图更新函数，函数更新几乎每一个数据都会添加相应的视图，所以我们来看一下视图更新函数。
如果我们有下面一段代码，我们如何将它解析成相应的HTML
{ { } }
改变标题
首先介绍了视图更新功能的使用。
For example, the parsing instructions v-model= title
回到上面的问题，如何解析模板我们只需要查看所有的DOM节点，包括它们的子节点，
如果节点属性包含V模型，视图更新功能是设定输入的值对标题的价值
如果节点是一个文本节点的视图更新函数首先使用正则表达式提取value'title'in牙套，然后设置文本节点的值数据{标题}。
如果节点属性包含v-on：XXXX，功能视图更新第一次定期访问事件类型点击，然后把这个属性的值是changetitle，那么事件回调函数，该方法'changetitle{ }，然后使用addEventListener的单击事件的监控节点。
我们需要知道视图更新函数也是数据对应属性的订阅方。如果我们不知道如何触发视图更新功能，我们可以看到上面的发布和订阅模式。
也许一些小伙伴可能会有一个问题，下面的H1节点的title值如何在改变输入节点的值之后发生变化后序遍历所有节点，如果该节点包含属性V模型，听用addEventListener输入事件。一旦触发输入事件和变化的价值数据{标题}，它会触发器标题，以便通知所有用户。
监控阵列的变化
无法监视每个数组元素
如果我们认识到他们自己的显示器阵列中的变化，我们可能会遍历数组的每个元素与object.defineproperty建立setter Vue，但不写源代码里面，因为数组中的元素defineproperty代码本身的复杂性，每一个下和提高代码的效率。
可变数组的方法
既然我们无法监控的defineproperty数组中的每个元素，我们可以改写阵列法（推、流行、移位、不位移、剪接、排序、反向）来改变阵列。
这是写在VUE文件。
Vue包含一组观察阵列的变异方法，所以他们也会触发更新视图。这些方法如下：
（推）
（POP）
移（）
Unshift（）
Splice（）
（排序）
反（）
以下是两Vue公司的早期来源学习系列：如何在数组的实例代码变化监测
const arymethods = {实现，打开引擎，移动，'unshift '，'splice '，大概'回' }；
const arrayaugmentations = { }；
AryMethods.forEach（（法）= > {
下面是主数组的原型方法
让原来的数组=原型{方法}；
推/流行的方法，一个好的包是在物体上arrayaugmentations属性定义
注意：它是属性，而不是原型属性。
arrayaugmentations {方法} =函数（）{
console.log（我已经改变了！）；
调用相应的本机方法并返回结果
返回original.apply（这个参数）；
}；
}）；
让列表= {'a'，B，C}；
我们必须在上面定义空数组对象指针数组原型监视点吗
不要忘了这个空数组属性定义了我们的好推法。
__proto__ = arrayaugmentations列表；
List.push（会）； / /我变了！四
该清单不在这里/重新原型指针，所以正常输出
让清单= {'a'，B，C}；
list2.push（会）； / / 4
变阵法的缺陷
在VUE文件变量数组方法的缺陷
由于Javaｓｃｒｉｐｔ约束，Vue不能检测阵列中的以下变化：
当你使用一个指数直接设置一个项目，例如，虚拟物品{ indexofitem } =价值。
当你修改长度的数组，例如，vm.items.length = newlength
同时，本文还介绍了如何解决以上两个问题。
最后
以上是一些Vue，基本原则的理解，当然，还有很多不足之处，欢迎指正。我也去采访是为应对Vue框架的基本原则，但原则是简单的学习这些基本的Vue，让我知道学习框架的原则，可以有效的避免一些自己将来会遇到的坑，所以，如果你有时间去看他们的未来仍将是该框架的基本原则。
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。
