前言

上篇文章主要讲解了electron、nodejs的相关概念。本篇文章将主要介绍vue3，以及vue3如何与electron协作完成桌面端功能。

同上篇文章一样，这是一篇务虚的文章，读完本文，你可能学不到任何手写vue3代码的经验，你也不会记住vue3与electron通信的api，你更不需要去了解vue解析文章常聊的虚拟node、diff算法，proxy代理监听……等等让人听起来曲高和寡的东西。

但是读完本文，你大概率会发出一句这样的感慨：哦，原来这就是vue啊，用起来这么方便！

所以，这是一篇针对使用者的文章，尤其是初级使用者。

一、vue是什么？

官网对它的介绍是渐进式javascript框架。注意主语，是javascript框架。

所以我们观察vue打包后的文件，会发现只有一个index.html，其它的都是js、css文件。也就是说，虽然我们写了很多模板语法template，但是最终vue会把它们都编译成js，在js中操作dom来完成最终的页面。

这也就能够理解，为什么我们使用vue，需要先初始化，然后挂载到某个dom元素上。因为它本质上和前端的js插件并无区别，前端插件的使用无非这么几步：

引入插件库。
根据插件库提供的方法，初始化，得到插件对象。
把插件对象加载到某个div中。
……

要注意理解vue的本质是vue.js，也许对于初学的我们来说，现在还不需要了解它过多的特性，但是了解本质，有利于以后更好地解决代码中的bug。

二、vue的优势

1.依托数据渲染

这里不说那些总结好的精炼结论，只是用白话谈谈我们使用中的感受。

与jq、js比较，vue最大的优势，可能就是它的数据双向绑定。数据双向绑定，顾名思义，就是在js中定义的某个变量，可以通过vue提供的模板语法，放到html代码部分，然后我们通过改变js中变量值，就能很方便地修改页面中的显示。也可以通过修改页面中的值，修改js中相应的变量。达到双向绑定的效果。

这种效果如果想用js原生实现，需要反反复复地操作dom中的值，而vue让我们从繁琐中的dom操作中解放出来，我们的关注点一直在js中定义的变量。

我们可以这么理解，虽然我们仍然是在构建页面中的元素，但是通过vue，页面中的元素是依托于数据来渲染的，我们可以不用过多地关注元素是怎么操作渲染的，我们只需要记住，这样式的数据会产生这样式的元素即可。（这好像和低代码异曲同工）

v-for：vue通过v-for指令来遍历arr数组，渲染成一个列表。当我们删除列表中的某项时，我们需要了解如何删除dom吗，不需要，我们只需要把arr数组去掉一项子元素即可。

v-if：vue通过v-if指令来决定某个dom元素的显示与隐藏，当触发条件达成，我们需要手动操作去隐藏或显示那个dom元素吗？也不需要，我们是通过修改某个变量的true和false来决定dom是否显示。

这样就清晰多了，原来vue中其实是不存在（或很少存在）操作dom这种琐事的，我们要做的是，按照vue的要求，提供它需要的数据格式，它会帮我们渲染出我们的页面。页面元素有变化怎么办？去改对应的数据，千万别去操作dom。

2.新人的边界

如果你确实是第一次接触vue，对组件的概念一窍不通。那我强烈建议你看完基础部分即可。
在这里插入图片描述
看完基础后，哪怕你不会写任何关于组件间传值代码、pinia、vue-router相关代码，也没有什么关系。你可以把vue的template看成是使用html的加强版。暂时先不去理会组件化开发，以前的前端页面怎么写，现在还怎么写，只不过按照vue提供的模板语法，更方便的渲染页面。