浅谈【前端框架vue3】 包括组件化响应式 适合小白理解
使用于小白快速入门vue.js框架
文章目录
前言
``
阅读本文之前你应该对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的文件夹。
那你是否能想到:?
该文件夹下都是用来写子组件的vue或js文件的。而views中的vue文件则都是真正的页面,通过几个子组件形成。
补充:
Api放接口js文件
Assets用于存放静态资源的
Router是路由
utils - 存放工具类的目录,如封装的网络请求、日期格式化等
搞懂了以上,或许你还会思考下面这个问题:
八、生命周期
常见用法
多次调用,如下先1后2
工作用途
接手的mouted里面有许多逻辑不敢改
那就自己写第二个
总结
九、pinia(状态管理)
总结
以上内容都是笔者在大二假期做项目时的随笔,所以可能不是很有逻辑。但是个人记得是用了非常多口水话来进行更通俗的说明。
前端东西是非常非常多的,光看文章是记忆不深刻的,说到底还是工程实践很重要!!本文也只是更适合小白入门级别的讲解,如有错误请多指正。
更多推荐
所有评论(0)