Vue实现原理-源码篇

本文最后更新于:2 个月前

前言

其实硬刚源码的意义不是很大,不仅意义不是很大,而且过程还很痛苦,这是就有人嚷嚷了,没啥意义还痛苦,你是不是吃饱了撑的。没错,每天上班中午会有2个小时的空闲时间,12点吃午饭,吃饭算半个小时,然后有一个半小时的空闲时间,这个时间就属于吃撑了的时刻。既然都吃撑了,那我做什么也在情理之中嘛,嘿嘿嘿😁。

网抑云语录

我多想把嘴边的碎碎念,变成身边的岁岁年年。

碎碎念

其实我是一个后端程序员,奈何后端过于无聊,学的东西就那么点,现成的解决问题的方案太多了,乃至于人们口中所说的调包程序员,你把spring的包都给整明白了,能随心所欲的玩,随心的调包,就已经登堂入室了,Java难的从来都不是语言本身,难的就是那些框架。spring的依赖反转,以及面向切面编程。这个面向切面编程类似Js里的回调函数,可惜我也不是太懂,这是个很牛逼的东西。在Java中的spring框架里有这样一句话,在我们spring框架中,没有什么不是加一个注解解决不了的,如果有,那就加两个。妙啊。此处应有表情包
spring框架
都说crud程序员是废物,可后端的分布式,微服务,本质上来说就是为了稳定的crud。难道我们努力变秃就是为了成为一个会分布式和微服务的大废物么。考核一个程序员的功力,算法,是最有效的途径。算法,设计模式,编程思想。编程语言可能会过时,这三样永远都不会过时。编程语言只是工具,Vue框架也是一个工具。万一哪天谷歌人浏览器直接就自带mvvn了,Vue也会被淘汰。

正文

js牛逼的一点我感觉就是,代码即文本,文本即代码。自由度高到离谱,你说它是代码,它也能是文本,说它是文本,它下一秒钟就变成了代码,你想怎么写(玩)就怎么写(玩),直接硬刚原生js不合适啊,我就用Jquey稍微简化一下操作,包括解析dom,更新dom,以及绑定数据。重要的是思想,重要的是思想,😄😄😄

正常的Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<h1>{{msg}}</h1>
<h1 v-html="msg"></h1>
<button type="button" @click="changeEvent">修改msg</button>
</div>
</body>
<script type="text/javascript">
let ops = {
el: '#app',
data: {
msg: '从前从前',
username: '王亮芳'
},
methods: {
changeEv: function() {
this.msg = '有个人爱你很久'
}
}
}
let app = new Vue(ops)
console.log(app);
</script>
</html>

Vue的原理

Vue是以数据驱动视图的一个前端框架。数据,就是视图,视图反过来也能驱动数据,这就是大家伙常说的MVVM,先说一下MVC,M是数据模型V是视图,
C是控制器,C用来控制视图和数据的交互。MVVM,就是没有C,VV这之间形成了绑定。我没学过别的MVVM框架,Vue就是一个实现了MVVM的前端框架。
对于数据绑定视图大家不难理解,直接$(“#xx”).val(),这就绑定上了,想要实时绑定输入的内容,
在绑定一下input事件。以下代码都用了Jqury,你如果钟爱原生js也可以把用到Jquery的代码换成原生Js。

这里实现了一个最基本的表单输入绑定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 换成自己的jq地址 -->
<script src="js/jquery.js"></script>
</head>
<body>
<input type="text" name="" id="name" value="你好世界" oninput="updata()" />
<span id="span"></span>
</body>
<script type="text/javascript">

let name = $('#name').val()
$('#span').html(name)

let updata = function() {
let name = $('#name').val()
$('#span').html(name)
}
//

// 这是最简单的一次性表单绑定

</script>
</html>

数据驱动视图内容

我们操作js的值是不需要什么getXXX,setXXX什么的,但这并不代表js中没有喔,核心就是get和set方法,下面就是一个最最最简单的数据和视图的双向绑定,
在控制台中改变obj.name的值,视图也会跟着发生相应的改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 这里换成自己的路径 -->
<script src="js/jquery.js"></script>
</head>
<body>
<input type="text" name="" id="name" value="你好世界" oninput="updata()" />
<span id="span"></span>
</body>
<script type="text/javascript">
// 这里需要一个对象
let obj = {}
// 这里看不懂,可以去百度,我就普通的说一下,就是给对象里面的属性加上还是重写get和set方法,。
Object.defineProperty(obj, 'name', {
get: function() {
return name;
},
set: function(newValue) {
// 原有的行为
name = newValue;
console.log('set: ' + newValue);
// 这是我们加上的行为
$('#name').val(name)
$('#span').html(name)
}
})
// 这步做完之后,就已经形成了一个最简单的双向绑定,你在控制台中改变obj.name的值视图就会发生相应的改变
obj.name = $('#name').val()
$('#span').html(name)

let updata = function() {
obj.name = $('#name').val()
$('#span').html(name)
}
</script>
</html>

Vue的基本理念就是这样,剩下的太考验算法,文本解析,以及对dom树的了解,要加上很多细节,一个技术火起来,代码硬实力是一部分,但社区维护以及文档的详细度,也是不能少的。

尾声

好兄弟,我怎么会鸽你呢,尴尬。
封面原图:
萨勒芬妮


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!