浅谈【前端框架vue3】包括组件化响应式适合小白理解

最新推荐文章于 2024-05-29 11:19:25 发布

vivi_1125

最新推荐文章于 2024-05-29 11:19:25 发布

阅读量1k

点赞数 19

文章标签：前端框架 vue.js

本文链接：https://blog.csdn.net/weixin_64347053/article/details/136620474

版权

前言

阅读本文之前你应该对vue（23均可）有一丢丢的基础。哪怕是看过一点vue搭建的项目代码也可以。

关键词：
#单文件组件 #组件化开发 #reactive和ref #Watch
#export #default #components #props 通信等

一、vue是什么？

渐进式JavaScript 框架
易学易用，性能出色，适用场景丰富的 Web 前端框架。

基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。

性能出色
经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。

二、vue的核心

1.组件化

在这里插入图片描述

vue官网第一页简介就有“单文件组件”，官方解释看得懵懵的，但看完我这份文档相信你自然就懂这个名词了，以及“组件化开发”方式，因为实际工作中都采用这样的方式来提高代码的质量。

直接来看一段代码吧：
在这里插入图片描述

从结构上就能看得出来上边可以称为父组件，下边可以称为子组件。为什么？–之后有解释先不懂也没关系接着读
这是一个vue文件的脚本代码部分
先看中文解释
Export:出口，输出（引申为暴露出去）与之对应import，接受暴露出来的东西
Default:默认值
Components：组成。

组件化开发：

自己的话讲：组件化开发类似于编程中写类或者函数，它将多个页面可能要用到的共同的页面板块写成一个vue，通过export和import进行父子组件中的传递，并用props来达到传参。这样就有了和函数差不多的效果：多次调用，不同参数达到不同的输出（页面展示），简化了开发时间和冗余的代码。
在这里插入图片描述

2.响应式

reactive和ref

作用均是把数据/变量设置为响应式的。但定义和使用时都有一点点区别

reactive

只支持对象类型
在这里插入图片描述

ref

既能简单也能对象
在这里插入图片描述

对象时的value语句：
ref.value.count++ 😭)
具体可参见后文4.4
总结：

在这里插入图片描述

三、 computed函数

在这里插入图片描述

四、watch

用于监听数据变化后，启用回调函数

4.1基本用法

在这里插入图片描述

4.2监听多个值

在这里插入图片描述

Immediate用于初始创建时是否用
Deep表示深度监听（默认为浅层，深层指的是对象类的：ref.value.age++）

4.3深度监听deep

在这里插入图片描述

4.4精确监听（某一个值）

在这里插入图片描述

思考：
在这里插入图片描述

五、export和default（函数用）

3.export & default
export表示暴露，类似作用为extern，作用就是让别的vue能够import（类似头文件的作用）
而default表示默认值。一般export与default是连用的。
在这里插入图片描述

举例说明：
在这里插入图片描述

注意到上述export的都是普通变量，函数等，并没有默认的（default），
在这里插入图片描述

Default
在这里插入图片描述

注意看。“具名成员” 也就是指之前的add，pi，person等都是具有名字的。
在import时，需要采用与原本相同的名字。
用示例来展示区别：
在这里插入图片描述

在下方的main.js中的muliply可以换名，因为他知道他引用的是math.js中的default的内容。
非default的引用要 { }，并且同名
Default则可以进行换名且不用 { }，，，如下图

在这里插入图片描述

在工程中（实习中观察项目代码总结）
①Export default的内容如果在.js文件中
不取名字，在import时和js前缀取名相同，举例如下

api.js源文件，没给default取名
在引用的文件中，取名为api，他将通过路径锁定到api.js中的default，而不会定位到其他成员：

②export default的内容如果在.vue文件中
取名字，在import时和原本名字相同相同。举例如下
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/64aef1fff7594509b90d81b51a44e2a4.png

Export处的Vue源文件
import处的命名：navTop

这就看到，虽然可以不同命名，但是习惯上都会取名相同。
如上是vue2的写法，vue3是兼容的。但是vue3也提供了另一种写法如下图：
在这里插入图片描述

在之后的props和components，vue2，vue3写法是一样的。

通过命名规则，我们自己都能推测出来：
一个文件中仅有一个default内容（事实也是如此），
因为如果你的default能有多个，在import取名时又可以不同，那它怎么定位到是哪一块呢？

六、Props&Components（父子组件）

在这里你将理解在1.简介中留下的问题父子组件是如何区分判断的
Props和components，分别用在子组件和父组件中
Props作用像一个类，里面声明变量，还没有给定具体的值，具体的值在父组件中给定
在这里插入图片描述

在这里插入图片描述

图片中，上方为子组件，下方为父组件（请好好理解代码）
父组件先import子组件，并在自身的default中components添加子组件的引用名称。
这样在父组件中也就能使用子组件了，而使用子组件的方法（上面gpt也有）如下：

页面index：
在这里插入图片描述

上面的实际调用（以navTop为例）：
在这里插入图片描述

navTop的实际内容会在indexTop之上显示（如果v-if成立）

再看navTop真实的内容
在这里插入图片描述

这样就能将组件导航栏显示在了index页面中。

七、单文件组件&组件式开发

再次回想组件式开发的方式，多次调用子组件，在父组件中给定参数达到不同的输出。
也就是说一个父组件可以等价于一个完整的页面，其中每一板块比如导航栏，一个底部，他们都是可能来自不同的子组件，多个子组件构成了一个页面。一个子组件又能运用到多个页面上，所以这就是与函数很类似的地方（或许一个子组件的vue文件，可以等效理解为一个头文件）。

现在你是不是对 #单文件组件 #组件式开发有了一定的感悟了。相信你稍加思考都能明白，不再多说，因为自己体会到的才是真正属于你的，体会不到那就是你跳过了一定的地方进行浏览

一个在用来写子组件的vue文件，他一定是要细分再细分的，直到他是一个比较小但完整的模块。因此，在工程中一个子组件就一个export default。不再有多余的东西进行export。
再看看默认的文件结构吧
在这里插入图片描述
发现没，系统有个名为components的文件夹。
那你是否能想到：？