vue原理的理解,简单说一下vue原理
本文主要详细介绍了Vue的核心原理。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
前言：学习目标：Object.definePropertyget，set Data Reflects查看反映到数据的变化M-VV-M优化工作：总结
前言：
相信你看过很多关于Vue2的文章，我也看了很多，但是大部分都是关于如何在项目中应用，如果使用的话技术点的功能如何实现；今天边肖给大家带来的是Vue2核心原理的分析，就是介绍我们常用的Vue2的核心内容，以及我们简单的代码背后他做了什么，让大家知道为什么。
学习目标：
理解Object.defineProperty的原理，理解set和get的关系，理解从数据反应到图形识别的过程，理解视图变化如何影响数据掌握MVVM。
Object.defineProperty
脚本
//1.字面量定义
let data={
名称：“aa”
}
Data.name=bb //在这种情况下，我们无法知道name属性发生了变化。
//2.对象.定义属性
让数据1={}
Object.defineProperty(数据1，名称，{
//当我们访问data1的name属性时自动调用的方法
//而get函数的返回值就是你得到的值
get() {
Console.log(您访问了data1的name属性)
返回“aa”
},
//设置和修改name属性时自动调用的函数
//并且属性的最新值将作为参数传入。
set(newValue) {
Console.log(您修改了data1的name属性，最新值为，newValue)
//只要修改name属性，就会执行这个位置。
//所以如果你想在名字变的时候完成自己的某件事
//都可以放在这里执行。
//1.ajax()
//2.操作dom区域
}
})
//以上是js中对象定义的另一种方案，在访问和设置属性时可以自动调用相应的函数。
//访问属性：data.name数据[name]
//Set属性：data.name=bb data[name]=bb
/脚本
响应核心API
get、set
脚本
//let data={
//名称： aa
//}
让数据={}
let _name=aa
Object.defineProperty(data， name ，{
get() {
Console.log(您访问了data1的name属性)
返回名称
},
set(newValue) {
Console.log(您修改了data1的name属性，最新值为，newValue)
_name=newValue
}
})
//问题原因：在get中直接返回了一个固定值，在set函数中获得了新值但什么都没做。
//解决方法：通过声明一个中间变量，让get函数返回这个变量。
//并在set函数中给这个中间变量设置最新值，作为set和get操作之一。
//数据的效果
/脚本
数据反应到视图
数据的变化会引起视图的变化(通过操作dom把数据放到相应的位置。如果数据改变，用数据的最新值再放一次)
方案一：命令式操作
1 . document . query selector(# app)。innerText=data.name
2.重新执行document . query selector(# app)。2.set函数中的innerText=data.name。
方案二：声明式渲染
虚拟文本指令的实现
p v-text=name/p
核心逻辑：通过‘模板编译’找到标有v-text的元素，然后通过操作domapi把相应的数据放到上面。
div id=应用程序
p v-text=name/p
p/p
/应用程序
1.通过app根元素找到所有子节点(元素节点、文本节点……)-DOM . node children。
2.按节点类型过滤出元素节点(p)-节点类型1元素节点3文本节点。
3.通过v-text找到需要设置的具体节点Pv-text/P4。找到与V-text标签绑定的元素，并获取它的所有属性id Class V-text=" name "
5.通过v-text="name "获取指令类型 v-text ,并获取要绑定数据的属性名 name。
6.确定使用了当前的v-text指令，然后通过操作domapi将对应于name属性的值放在node.innerText=data[name]上。
整个过程可以称为“模板编译”
视图的变化反映到数据
元素v模型双向绑定
均值方差模型
叶酸
M - V
1.通过app根元素找到所有子节点(元素节点、文本节点……)-DOM . node children。
2.按节点类型过滤出元素节点(p)-节点类型1元素节点3文本节点。
3.通过v-text找到需要设置的具体节点Pv-text/P4。找到与V-text标签绑定的元素，并获取它的所有属性id Class V-text=" name "
5.通过V-model="name "获取指令类型 V-model ，获取要绑定数据的属性名 name 。
6.确定使用的是当前的v-model指令，然后通过操作domapi把name属性对应的值放到node.value=data[name]上。
V-model和v-text完全一致，只是指令类型和使用的dom api不同。
V - M
本质：事件监控在回调函数中获取输入的最新值，然后将其赋给绑定的属性。
node.addEventListener(input ，(e)={
数据[名称]=电子目标值
})
以上总结：
1.数据响应
2.数据更改会影响视图
3.视图更改会影响数据。
4.指令是如何实现的(传统的实现逻辑)
优化工作：
1.通用的数据响应式处理
data(){
返回{
名称： cp ，
年龄：28岁
}
}
以现成的数据为基础，然后全部加工成有求必应。
Object.keys(data) //由所有对象的键组成的数组
Object.keys(数据)。forEach(key={
//键属性名
//数据[键]属性值
//数据原始对象
//将所有键转换成get和set的形式
defineReactive(数据，键，数据[键])
})
函数定义有效(数据，键，值){
Oject.defineProperty(数据、键、{
get(){
返回值
},
set(newValue){
值=新值
}
})
}
2.发布订阅模式
问题：
差异
p v-text=name/p
p v-text=name/p
div v-text=age/div
/div
改名后我需要做的是更新两个P标签。现在无论更新哪个数据，所有标签都会重新运算赋值，无法准确更新。
解决问题的思路：
1.数据更改后最关键的代码是什么？
node.innerText=data[name]
2.设计一个存储结构。
每个响应数据可以由“一对多”关系中的多个标签绑定。
{
名称：[()={节点(p1)。innerText=data[name]}，()={ node(p2)。innerText=data[name]}.]
}
通过发布(自定义事件)解决的问题是“一对多”问题。
实现简单的发布-订阅模型：
浏览器的事件模型
dom.addEventLister(click ，()={})
只要调用click事件，就会执行所有绑定的回调函数，这显然是一对多的关系。
const Dep={
地图：{}，
收集(事件名称，fn){
//如果当前事件从未被收集过，首先将其初始化为一个数组
如果(！this . map[事件名称]){
this . map[事件名称]=[]
}
//如果已经初始化了，就推一推，加一个。
this . map[事件名称]。推动(fn)
},
触发器(事件名称){
this . map[事件名称]。forEach(fn=fn())
}
}
使用发布-订阅模式优化现有问题
不管前面的写法有哪些数据变化，我们都可以大致执行一下编译功能。
以目前的方式，当编译函数第一次被执行时，然后当数据改变时，我们完成更新函数的集合。
通过数据的key找到对应的更新函数，依次执行，达到精准更新的效果。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。