2023新星导师活动【electron+vue3】方向，开营知识点提纲（2）

---

前言

上篇文章主要讲解了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插件并无区别，前端插件的使用无非这么几步：

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

要注意理解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提供的模板语法，更方便的渲染页面。

2.选项式和组合式

如果你写过很多js、jq代码，对代码简洁、函数式编程等有利于代码架构的知识有一定理解，那当然是推荐组合式语法。

组合式语法给了开发者更高的自由度，当然也就增加了把项目写成屎山的风险。

组合式语法虽然是vue3最初主推的，但它就一定是最优选吗？不一定。选项式仍然是中小型项目的一个很好的方案。选项式最大的好处是制定了一套强约束，按照它的约束，在规定的位置定义data、methods、mounted等参数，能极大地降低我们组织代码方面的心智负担。

但是，当项目很大很复杂，且使用者写过大量的js、jq代码，那么还是建议尝试一下组合式语法。组合式更灵活，也更接近js原生，个人认为是大型项目的一个最优选择。

总结

如果你用过art-template之类的模板语法插件，那么就会对vue的用法十分熟悉了。

它就像一个十分强大的模板插件，我们依据模板提供的指令，不需要繁杂的dom操作，也能实现页面上百分之九十九点九的交互逻辑。

新人使用vue，一定要切记的是，我们页面上一切元素，都是依靠script部分的数据来控制的。删除列表项=删除对应数据；隐藏dom=把对应数据置为false；增加列表项=增加对应数据；刷新某个页面=刷新（重新获取）页面的数据……一切依靠数据驱动。

最后附：vue3项目技术选型文章