chengpeiquan / learning-vue3

超过 230w+ 阅读人次的《Vue3 入门指南与实战案例》,关于前端工程化开发的基础知识点,以及 TypeScript 、 Vue 3 、 Pinia 的入门学习指南。
https://vue3.chengpeiquan.com
MIT License
1.22k stars 146 forks source link

初学者的问题和建议,希望大佬解答 #311

Open ckkhnsf opened 4 months ago

ckkhnsf commented 4 months ago

1 我们可以用java php go python等后端语言开发一个服务端项目,也可以用js ts 开发,利用js ts开发时需配置node.js,因为node.js之于js就像jdk之于Java,没有就跑不起来。因为使用js ts开发效率低,所以有了express koa fastify等轻量级框架,适合开发对服务器要求不高的,如果要开发大型项目的话,可以使用基于上述轻量级框架的Nest或者Egg等企业级框架 2 ES6是js的一种版本,因为TypeScript包含所有JavaScript的特性,并且在其基础上添加了静态类型检查、面向对象编程概念和其他一些功能,所以js能做的ts都能做,反之则不一定成立?

3 可不可以理解为js和ts的一个区别就是js变量都是any类型的,而ts变量类型除了极少数情况如let t 这种没有指定类型和赋值或者函数参数如function f(c1,c2)c1,c2会被类型推论成any,其余变量都不是any类型的

4 响应式数据和非响应式数据的区别就是当组件使用响应式数据 并且响应式数据发生变化时,组件会实时更新,反之则不会。

5 toRef将reactive对象某个属性或者reactive数组某下标对应的东西转成Ref对象,toRefs将reactive对象每个属性或者reactive数组每个下标对应的东西调用toref转成Ref对象

6 import { ref ,reactive,toRef,toRefs,ToRef,ToRefs,Reactive,Ref} from 'vue'

interface Member { id: number name: string } const m2: Member =reactive({ id: 1, name: 'Petter', }) const {name} =m2 console.log(name)//Petter m2.name="wsz" console.log(name)//Petter

const m3= ref({ id: 1, name: 'Petter',
})

const {value} =m3 console.log(value.name)//Petter m3.value.name="wsz" console.log(value.name)//wsz 从这个例子可以体现出ref和reactive的区别,从reactive解构出的数据不再具备实时性,从ref解构出的数据具备实时性,这也是为什么要有toref和torefs从reactive变成ref的原因之一

7 响应式数据里面有非响应式属性,非响应式数据里面有响应式属性,这个不太理解。。。

能请大佬解答下吗?就是对的话可以直接1√这样就行。

还有就是在单组件的编写一章,全都是ts代码,对于初学者不知道如何用上,可以在一开始教下在html中怎么引入ts文件,并利用之前讲解的服务器来解决跨域问题,这样能看到效果,或者教下如何在vue文件中生效,因为找了半天还是不知道如何运行单个vue文件。谢谢大佬

ckkhnsf commented 4 months ago

还有大佬打算用vue3做个项目吗

chengpeiquan commented 4 months ago

你好啊!谢谢你的支持!我先简单解答一部分哈,如果有什么问题可以再继续回复补充。

我们可以用 java php go python 等后端语言开发一个服务端项目,也可以用 js ts 开发,利用 js ts 开发时需配置 node.js,因为 node.js 之于 js 就像 jdk 之于 Java,没有就跑不起来。因为使用 js ts 开发效率低,所以有了 express koa fastify 等轻量级框架,适合开发对服务器要求不高的,如果要开发大型项目的话,可以使用基于上述轻量级框架的 Nest 或者 Egg 等企业级框架

效率方面不是语言的原因,是 Node 原生的 HTTP 服务手搓会比较痛苦,所以通常会用一些框架来解决效率问题,然后就根据自己的业务级别选取合适的框架。

另外其实不止有 Node.js ,后面推出的 Deno / Bun 都是 JS Runtime ,不过都比较新,从生态、使用量以及认可度都还是 Node 稳居第一,所以依然是推荐从 Node 上手。

ES6 是 js 的一种版本,因为 TypeScript 包含所有 JavaScript 的特性,并且在其基础上添加了静态类型检查、面向对象编程概念和其他一些功能,所以 js 能做的 ts 都能做,反之则不一定成立?

ES6 / ES7 / ES8 ... 是从 2015 年之后每年一个 JS 语言新版本, TS 则是 JS 的超集,使用最新版本的 TS 会包含最新版本的 JS 语法,同时 TS 还会提供很多 JS 没有的能力,例如 enum 枚举,类装饰器等,而面向对象、设计模式之类的编程思想其实在不同语言之间都是通用的。

可不可以理解为 js 和 ts 的一个区别就是 js 变量都是 any 类型的,而 ts 变量类型除了极少数情况如 let t 这种没有指定类型和赋值或者函数参数如 function f(c1,c2)c1,c2 会被类型推论成 any,其余变量都不是 any 类型的

其实我觉得这个问题,首先要了解为什么要用 TS 。

JS 也是有数据类型的( TS 的基础类型也是基于 JS 的数据类型),以及变量和常量,只是因为它的变量可以被任意赋值,比如一开始是一个数组,但也可以重新赋值为数值,此时原来调用 xx.push(yy) 之类的数组方法就会报错,引起程序崩溃,过于灵活会带来很多维护问题,因此 TS 提供类型约束可以更好地管理代码以及编译检查。

这是一个前提,就是更好地约束,所以当你在觉得不需要约束、或者不知道怎么约束的时候,就可以主动用 any 。同理,当 TS 能识别出数据类型的时候,会自动推导对应的类型,实在认不出来的时候,那么也就会是 any 。

响应式数据和非响应式数据的区别就是当组件使用响应式数据 并且响应式数据发生变化时,组件会实时更新,反之则不会。

这个问题在 Vue 官网有一篇文章讲的很清晰,也举了很不错的例子,可以看看 深入响应式系统

5 / 6 / 7 的 API 问题等我明天再给你解答下哈,今天加了一天班肝了一天代码,我补完觉再来继续细看下,不好意思哈(题 7 具体是哪个章节里的问题可以补充一下说明吗?)

还有就是在单组件的编写一章,全都是ts代码,对于初学者不知道如何用上,可以在一开始教下在html中怎么引入ts文件,并利用之前讲解的服务器来解决跨域问题,这样能看到效果,或者教下如何在vue文件中生效,因为找了半天还是不知道如何运行单个vue文件。

在前面有一章是写了一些 TS 代码入门,可以先看看,因为在我比较熟悉的圈子里,包括很多流行的开源项目都是只写 TS ,可以说是前端标配,所以就直接带入 TS ,因为一边学一边写是最容易上手的学习方式。

因为找了半天还是不知道如何运行单个vue文件 ----> 可以拉一下我之前维护的一个项目启动模板 https://github.com/awesome-starter/vue3-ts-vite-starter

pnpm i 安装依赖, pnpm dev 启动(或者对应的 npm i 和 npm run dev )

还有大佬打算用vue3做个项目吗

围绕这本书的学习项目吗?可能最近几个月还是没有时间,这个仓库里的 issue 建议我还没有时间跟进,今年工作忙了好多,等我后面再看看哈

ckkhnsf commented 4 months ago

谢谢老哥的回答,现在回想起来,好像确实单组件的编写那块直接用ts代码就行了,我当时想的是结合展示效果会不会更好一点,比如响应式数据绑定到某个标签上,通过按钮修改响应式数据,标签也变了。

关于vue文件运行,我想到用别人开发的项目,在router文件夹里面js文件中加入自己的路径,也可以运行哈哈。

还想问个执行过程的问题,在前端服务器(比如192.168.205.10:8080)运行后,当我们在浏览器输入192.168.205.10:8080/login,服务器会根据router文件夹的路由数组找到与/login相对应的vue组件,然后执行script标签里面的代码,然后将数据和方法渲染绑定到template里面,同时将css的代码也渲染到template里面,然后将完成的vue文件返回浏览器,这个理解有问题吗,在这个vue文件中引入的文件是否也要一同返回浏览器呢,如果是的话,当我们发起一个http请求时,实际上是从浏览器发出的,不是前端服务器发出的?谢谢大佬

chengpeiquan commented 4 months ago

谢谢老哥的回答,现在回想起来,好像确实单组件的编写那块直接用ts代码就行了,我当时想的是结合展示效果会不会更好一点,比如响应式数据绑定到某个标签上,通过按钮修改响应式数据,标签也变了。

关于vue文件运行,我想到用别人开发的项目,在router文件夹里面js文件中加入自己的路径,也可以运行哈哈。

还想问个执行过程的问题,在前端服务器(比如192.168.205.10:8080)运行后,当我们在浏览器输入192.168.205.10:8080/login,服务器会根据router文件夹的路由数组找到与/login相对应的vue组件,然后执行script标签里面的代码,然后将数据和方法渲染绑定到template里面,同时将css的代码也渲染到template里面,然后将完成的vue文件返回浏览器,这个理解有问题吗,在这个vue文件中引入的文件是否也要一同返回浏览器呢,如果是的话,当我们发起一个http请求时,实际上是从浏览器发出的,不是前端服务器发出的?谢谢大佬

这部分可以看看 Vite / Webpack 的一些实现原理方面的知识,我最近状态好差,几乎没时间在开源上了,产品下个月要上线,最近一直肝,好难支持我这样细粒度回答这些问题,不好意思噢真的忙不过来了最近

我最近一周的编码时间,基本上每天醒着就在电脑前赶项目 (:з)∠)

coding

ckkhnsf commented 4 months ago

好滴注意身体