vue自我学习日志1——大方向的

vue学习日志1

看了就忘，那就只能用博客记录一下了。

一、SPA（单页面应用），MPA（多页面应用）

相对而言先说一下大家都熟悉的多页面应用，多页面应用在跳转下一个页面时是这样的——去服务端请求新的html页面包括页面内相应的的js和css。

而单页面应用(SinglePage Web Application)整体框架（html,css,js）都已经有了，不用再去服务器端拿取一遍，只要拿一些必要的数据下来，就能呈现完整的页面。

怎么做到呢，就是用js做，之后路由会讲到。

优点是，加载完首页之后，大头都已经在了，之后去服务端拿些数据就可以了，大大提高了加载完后的使用体验，就像是我们在多页面的时候，一些弹窗啊什么的，不用加载新的页面就可以直接弹出来，速度非常快，非常流畅。
这样来说，我们可以把弹窗看成一个组件，页面各种东西都看成一个个组件，在一个版面下可以呈现出来的一些组件组成一个大组件，单页面之间的路由，也就是跳转就可以看成一个页面内关掉一个组件然后跳出另一个组件。
也就是关掉一个“大弹窗”，然后跳出另一个“大弹窗”。这样就少去了从服务器拿页面框架(html,css)的步骤，减少请求次数和请求数据体积。
所以第一个优点就出来了

1、减少请求次数和请求体积，增加页面的流畅性

然后就会想到我们有时候弹窗可以以渐变等动画的形式显示隐藏，而页面跳转就只有“白屏”这种选项。
所以第二个优点就出来了

2、可以在页面转变之间添加过渡动画，提高用户体验
有时候弹窗是有连续性的，比如第一个弹窗要输入点东西，然后再跳到第二个弹窗，然后第二个弹窗再搞些花里胡哨到数据给第一个弹窗，第一个弹窗点确定后进行处理这种。用多页面做的话每次都要更改url，或者放在localstorage里面传来传去。麻烦。用单页面就传个参数而已。
所以第三个优点

3、页面之间数据传递轻松
我们很多时候只要弹窗变一下就行，如果是多页面，就需要全部重新渲染，但单页面可以选择加载变化的地方。
4、增加前端应用渲染性能
如果是传统多页面，我为了一个弹窗还要写过一整个页面是不是很麻烦。而单页面只要只改改弹窗的内容就行了
所以
5、减少了维护成本

不过有几点不好的就是我一开始就要把弹窗都加载好，首屏的加载会非常慢。

还有我把东西一股脑堆在js中，百度的爬虫根本没有智商爬这种东西，所以seo优化太差了，如果真要保证单页面，又要保证seo，建议服务端渲染，所谓服务端渲染就是在服务端就解析好js代码，然后做成html返回。

二、MVVM

估计问vue都会被问这个，其实很简单
从前往后，MV就是我们写的js代码，V就是html,css,就是呈现到视图里面的东西，M就是model。
从后端或者哪里拿到的数据就是model，我们根据不同的model用mv也就是js控制不同的dom元素的改变也就是控制视图（V）的改变。

三、双向数据绑定

双向和单向数据绑定很方便，让我们只关系控制数据就行了，不用做什么dom操作。
也就是我们使一些数据变化的时候它就会做出相应的行为帮我们操作dom，而用户在控制表单的时候也会做一些相应的行为从dom读取数据给我们用。
如何监听数据呢，现在是使用Object.defineProperty() 对元素进行劫持，什么是劫持呢
打个比方，我想去让车夫带我去北方，一帮人把车夫劫持了，假装车夫，然后去北方并且把我卖了。
原本一些赋值等行为，只能是赋值的作用，现在我把这些特殊属性赋值方法从根源替换了，你做了一些行为后，我就会帮你完成其他工作，就比如我只是赋值，它就会把赋值后的操作dom的行为给做了。

首先我们监听比如data里面的数据时，遍历一遍里面的数据，然后给里面各种属性重新改写成用Object.defineProperty() 创造出来的属性，Object.defineProperty()创建出来的属性有getter和setter,也就是说我们在操作值或者拿取值的时候可以执行getter和setter这两个方法，我们可以通过这两个方法知道数据变化了，数据想要怎么变化，同时，在这两个方法里面加东西就可以做到方法里面改了数据我要怎么去操作dom或者做其他事情。

要操作dom的东西我们都加在template的模板（也可以看成字符串），肯定需要一个解析器去编译我们写的模板，也就是template字符串，把里面的各种指令的各种要更新的操作写成相应的更新方法。

某一个数据更新后，监听器这个工具就会告诉我们的一个中间人什么数据变了，变成了什么，中间人来统一管理监听到的数据的变化，然后告诉使用解析器这个工具的人我什么元素改了，改成了什么，使用工具的这个人收到后，就用用这这个解析器输入什么数据，怎么改变了这两个参数，然后编译器就触发对应的函数去操作dom了。

四、如何实现数组的监听

上头是对某个元素的监听，怎么对数组，对象的监听呢，初始遍历。。。
你会发现想数组中改变一些没有初始设置的值不管用，因为没有监听到就不会调用render函数去重新制作dom。
所以vue3.0就要用proxy去监听状态的变化，为什么3.0才用呢，因为兼容问题。
但是是新东西，厂商会给予足够的优化。

五、虚拟dom是啥

用来描述真实dom的树形数据，编译器里面的方法其实并没有操作真正的dom，只不过是操作了虚拟dom而已，在每一次render之前，用diff算法比较新旧两颗dom树，可以用key控制对比替换。
每次监听到数据更新后，就会触发render函数，然后重新渲染dom对象。
优点：不用手动dom操作。统一了dom操作，性能不会差到哪里。可以跨平台，和html到语义化一样。
缺点：为了兼容，会有很多冗余操作。

六、vue3.0

一个是function和修饰器写法，还有是树摇的升级。还有是用ts重写。还有是用proxy了。还有插槽变成了函数的方式，子组件重新渲染父组件就不用重新渲染。