Shinkai005

V1

2022/06/17阅读:14主题:红绯

【Vue】Vue简介

【Vue】Vue简介

什么是vue?

正如上图所说, Vue是一套用于构建用户界面 渐进式 JavaScript框架,接下来解释下这两个名词

构建用户界面

image-20220607092842388
image-20220607092842388

程序员看到的是数据,获取的也是数据, 用户界面就是将这些数据转换成非专业人士也能看懂的,结合一堆心理学社会学学科来科学美观展示的.

渐进式

Vue可以自底向上逐层的应用 也就是说Vue可以简单应用,只需要引用一个小巧的核心库即可; 也可以复杂应用, 可以引入各种各样的vue插件,等

那么谁开发的Vue呢?

Vue作者-尤雨溪!

image-20220607093236263
image-20220607093236263

尤大在国内知乎等地方挺活跃的.

Vue的特点

知道了,vue是什么,我们为什么要用他?

我们会因为一个框架的致命劣势而不去用它,也会因为一个框架不可忽略的好处不停的用他

image-20220607093554947
image-20220607093554947

我们来辩证的看一下这个特点, 他把每一个页面上可以复用的位置,比如新闻区,热点区,活动区都写成了一个vue文件.其中包括,一整套的html+css+js.

这样写出来好处我们也能更好的理解,必然可以提高复用率 ,下一个页面一样的页面,我们直接引入这个vue不就行了?如果识别不了vue文件识别不了引入用插件(or自己写)让其可以识别多好?

好维护 也好理解,只用去其对应的位置来编写对应代码,不会影响其他的vue文件.

那么真就这么完美没有其他问题么?从上面的特点我们挑挑刺:

  1. 如果我就写个demo根本不复用,我有必要抽离组件么?(当然这种情况也不会用vue了...)
  2. 如果有组件的功能不好直接分开到哪个功能区, 比如后面会做到的TODOLIST, 列表中的item到底要不要再独立分出来?
  3. 组件关系要理清

好了不尬了, 上面的问题不是框架本身的问题,是程序员使用该框架自己需要解决的问题

内部的一些虚拟dom diff的问题,解决日常业务没什么问题,应要写index做key的问题,后面也做了相应改变.

总之,vue可能真没有那么完美,但是!跟着尤大走全都有~疯狂押宝

来看看大家经常会提到的声明式编码和命令式编码

image-20220607094904876
image-20220607094904876

命令式编程:命令“机器”如何去做事情(how),这样不管你想要的是什么(what),它都会按照你的命令实现。 声明式编程:告诉“机器”你想要的是什么(what),让机器想出如何去做(how)。这很像面向对象和面向过程编程.

我们来看看有什么优势-声明式编程

image-20220607095229552
image-20220607095229552

用原生js实现这个样式需要这么多代码~其实思路上还很顺~

image-20220607095334105
image-20220607095334105

那如果我们新建立一个数据表呢?

看似还很正常,但是内部性能问题就大啦!你问题很严重!

image-20220607095450653
image-20220607095450653

可以看到,即使相同的数据,他还是会重绘重排,很浪费性能的.

性能就像现实中的money, 甚至可以说美元US 刀了~

程序员越抠的写出来的代码越美,和商人一样,越爱钱的赚的越多花的还少~

我写文一般都这风格,我已经尽力在 > 里放飞自我了. 我的文章我做主

那么我们是不是可以看出来, 如果把相同的数据直接复用,新数据添加到最后,像这样

image-20220607095817502
image-20220607095817502

性能会好很多,这也是vue内部替代我们做的

说实话,简单的用一个框架不需要了解这些,

但是如果你想提升自己的能力,该了解的底层一点别落下~

有困难或者花太多时间,或者没时间,打个标记,文章扔备忘录,完了再看即可.

image-20220607100339865
image-20220607100339865

上图就是vue实现了~,看这个图要有一个想法,那我只渲染一次,不进行更新,那么消耗的性能不是变多嘛?

确实是这样的,但是如果你更新一次?

OK,接着这么讨论下去成哲学问题了.

学习之前需要掌握的JS基础知识?

ES6语法规范

ES6模块化

包管理器

原型和原型链

数组常用方法

axios

promise

.....

其实不需要这么多.我会写文章复习下这方面内容,ok今天到这里.

分类:

前端

标签:

Vue.js

作者介绍

Shinkai005
V1

公众号:深海笔记Shinkai