无密分享Vue3源码解析，打造自己的Vue3框架

一、vue概述

下栽ke呈：https://www.666xit.com/3851/

Vue是一个用于构建用户界面的渐进式框架。

与其他大型框架不同，Vue设计为自下而上一层一层地应用。

Vue的核心库只专注于视图层，不仅易于使用，而且易于与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持类库结合时，Vue还可以为复杂的单页应用程序提供驱动程序。

Vue.js是MVVM的实现者，其核心是实现DOM监控和数据绑定。

SoC:注意力分离原则。


Vue的基本语法

1.指令

指令是带有v前缀的特殊属性。directive属性的值应该是一个JavaScript表达式(v-for是个例外，我们将在后面讨论)。

指令的职责是当表达式的值改变时，它的相关影响将相应地作用于DOM。回顾我们在简介中看到的示例:

现在你看到我了。</p><p>这里，v-if指令将根据所看到的表达式的真或假值来插入/移除。

元素。


Vue双向绑定

1.什么是数据双向绑定？

Vue是一个mvvm框架，即数据的双向绑定，即数据变化时，视图变化，视图变化时，数据同步变化。这就是vue的精髓。

值得注意的是，当我们谈论双向数据绑定时，它必须是针对UI控件的。非UI控件将不涉及双向数据绑定。单向数据绑定是使用redux等状态管理工具的前提。如果我们用vuex，那么数据流也是单一的，会和双向数据绑定冲突。

2.为什么要实现数据的双向绑定？

在vue中，如果使用vuex，其实数据还是单向的。之所以是双向数据绑定，是因为使用了UI控件。对于我们处理表单来说，vue的双向数据绑定用起来特别舒服。

这两者并不相互排斥，在全局数据流中使用一个单独的项目，以便于跟踪；本地数据流是双向的，简单易操作。


Axios异步通信

1.axios是什么？

Axios是一个基于promise的HTTP库。简单地说，它可以发送get和post请求。说到get和post，大家第一时间想到的应该是Jquery。毕竟几年前Jquery流行的时候，大家都在用。但是由于Vue、React等框架的出现，Jquery并没有那么流行。也正是Vue和React等框架的出现，促使了Axios轻量级库的出现。因为Vue等不需要操作Dom，所以不需要介绍Jquery.js

2.Axios功能

您可以在浏览器中发送XMLHttpRequests。

您可以在node.js上发送http请求

支持承诺API

拦截请求和响应

转换请求数据和响应数据

可以取消请求。

自动转换JSON数据

客户端支持针对XSRF攻击的安全保护。