V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pytth
V2EX  ›  Vue.js

初次上手 Vue.js 开发效率确实高!从此跟 Jquery 说拜拜!

  •  
  •   pytth · 53 天前 · 7859 次点击
    这是一个创建于 53 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一些看法

    在 V2 看了一些吐槽 Vue 的项目构建的一些文章,有说 node_module 目录太大,webpack 等工具的缺点等问题,但这就是构建 Vue 项目所需的一些操作,嫌麻烦,嫌笨重,可以用其他办法。也可以用官方脚手架等方式,还有新兴的 Vite ,还可以用传统的<script>标签引入 Vue.js 文件去写。

    当然这个都是看需求的,如果一个非常简单的页面,用不上太多的 API ,其实用传统的方法去写也是可以的。本人 html 也写了几年,Vue 还真没有认真去学过,偶尔搜一些相关文章看看,也没有认真去写过。

    趋势

    但越来越多平台、网站已经向单页应用的趋势发展,浏览器无刷新,路由等方式,这种页面体验起来也是非常舒服的,Vue 、React 都是目前构建项目的主流。

    有些人觉得学习成本挺高的,还不如直接 jquery 操作 Dom 实在一些,至少不需要将时间和经历花在环境调试和构建。实际上这些都是有很多解决方案的,不想那么复杂就直接 Vite 也可以快速构建。

    初体验

    顺着 Vue.js 官网的文档,我还是尝试先用传统的引入 Vue.js 文件的方式,花了 2 个上午(因为下午要忙工作),简单得撸了一个项目熟悉一下 Vue 的特性。与 jquery 不同的是,jquery 是操作 Dom ,而 Vue 是操作数据。

    后面还是需要认认真真学一下脚手架、Vite 等方式构建项目。。。

    95 条回复    2022-05-13 18:23:40 +08:00
    Ashore
        1
    Ashore  
       53 天前
    厉害了 想拥抱 vue 但是又不知道从何入手。。。
    Issuema
        2
    Issuema  
       53 天前
    vue 毕竟是国人写的嘛,看着中文文档,cv 就可用。只是官网的教程有些功能提都没提,得去 github 看英文说明
    codefever
        3
    codefever  
       53 天前
    jQuery 以后会退出前端世界,但 jQuery 会长期存活在教科书里成为活化石一样的存在。
    hhhanako
        4
    hhhanako  
       53 天前   ❤️ 30
    你也网上冲浪啦
    jswh
        5
    jswh  
       53 天前
    致远星战况如何(狗头
    darksword21
        6
    darksword21  
       53 天前 via iPhone
    纯后端,对前端还停留在那种写好文件在游览器打开的程度,所以有个比较蠢的问题想问一下

    我看前端现在运行后也都是会开启一个服务,有个端口,这是也类似于后端开发吗?
    liyang5945
        7
    liyang5945  
       53 天前 via Android
    3G 网速真快
    windyboy
        8
    windyboy  
       53 天前
    既然是新技术不如试一下 svelte
    qzsi001
        9
    qzsi001  
       53 天前
    今年是 2017 年?
    pengtdyd
        10
    pengtdyd  
       53 天前
    村里通网了?
    horseInBlack
        11
    horseInBlack  
       53 天前   ❤️ 1
    @darksword21 #6

    前端用 webpack 等打包工具,可以在开发调试的时候配置各种命令,比如开启一个本地 Web 服务,一旦源代码有修改自动重新构建刷新页面,还有跨域代理、处理兼容性等功能,运行这套服务依赖 NodeJS ,确实是后端

    开发调试完成,项目上线之前打包程序,也是生成浏览器直接可以读取运行的 HTML/CSS/JS ,本质上还是前端构建页面、处理从后端获取的数据
    abersheeran
        12
    abersheeran  
       53 天前
    @windyboy svelte 不能操起 html 就写吧
    darksword21
        13
    darksword21  
       53 天前 via iPhone
    @horseInBlack 那发到部署后还需要 node 吗还是只是本地调试方便的时候用
    cmdOptionKana
        14
    cmdOptionKana  
       53 天前
    其实 jquery 不一定比 vue 差,看具体需求,比如楼主做的论坛网站,一般不会动态拉取数据,更可能是做静态化,这种情况下 vue 并没有明显的优势。

    (你说为了工作练手、为了好玩我同意用 vue 很好,但你说做论坛明显比 jquery 好却不见得)

    (以上 jquery 包含 dom api 抄 jquery 的语法)
    HelloWorld556
        15
    HelloWorld556  
       53 天前
    部署后一般用 Nginx @darksword21
    chloerei
        16
    chloerei  
       53 天前
    vue/react 和 jQuery 不是直接替换关系。

    可以看看 https://youmightnotneedjquery.com/ ,jQuery 现在变得不重要的原因主要是被浏览器原生 API 替代了,例如 querySelector 和 Fetch API ,这些新的原生 API 都从 jQuery 学了不少东西。

    SPA 比 SSR + 少量 js 操作开发效率要高吗?我觉得不一定。像顶楼的例子是个论坛,考虑下 SEO 咋整?
    horseInBlack
        17
    horseInBlack  
       53 天前   ❤️ 2
    @darksword21 #13

    打包以后就是 HTML/CSS/JS 和其他静态资源啊,都是浏览器直接运行的文件,现在前端写的那些框架,.vue / .jsx / .less 也不可能直接让浏览器全都支持,还是要翻译成浏览器能认识的文件

    就好比高级语言写的代码要 编译以后运行

    现在前端的框架就是用更加简单更加符合人类直觉的写法写程序,把管理资源、处理兼容性等问题交给框架处理,最后让打包工具打包出来浏览器运行的文件

    前端框架能做的那些事,直接手写 JS 肯定也能做到,理论上来说可以更好,但是那得要求编码人员拥有相当不错的水平,作为平庸的大多数之一我还是喜欢把这些事交给框架处理
    FreshOldMan
        18
    FreshOldMan  
       53 天前
    大清亡辣
    misaka19000
        19
    misaka19000  
       53 天前   ❤️ 2
    我倒,你也网上冲浪啊🙃
    libook
        20
    libook  
       53 天前   ❤️ 1
    https://youmightnotneedjquery.com/
    这些新出的原生 Web API 替代了 jQuery 。强烈建议自己用原生 Web API 写一个具备一定交互功能的现代网页试试,借助最新的 Web 特性,写起来也挺方便的。

    框架其实以前也有,比如 Backbone 和 Angualr ,Vue 如今也是发展到了第三代; jQuery 提供给开发者更方便地操作 DOM 的方案,框架是从另一个角度来满足生产需求,即不需要自己操作 DOM ,而是由框架来完成 DOM 的操作,自己只需要写业务逻辑。

    Vue 的文档是我度过的最贴心的的文档之一,总能在我看到产生疑问的地方马上就解答我的疑问。
    darksword21
        21
    darksword21  
       53 天前 via iPhone
    @horseInBlack 感谢!
    Liuman
        22
    Liuman  
       53 天前
    我晕,你也网上冲浪啊
    windyboy
        23
    windyboy  
       53 天前
    @abersheeran 没看明白,什么叫 “不能操起 html 就写吧”
    wonderfulcxm
        24
    wonderfulcxm  
       53 天前 via iPhone
    seo 不好
    feitxue
        25
    feitxue  
       53 天前
    @darksword21 哈哈.大兄弟你这 100%纯后端啊,一点前端东西不用碰..羡慕...
    byx
        26
    byx  
       53 天前
    你是 MM 还是 GG~
    learningman
        27
    learningman  
       53 天前
    @codefever 你这个以后是多少年啊,IE 都还没退出呢
    Troevil
        28
    Troevil  
       53 天前
    @windyboy #23 他应该指的应该是无需编译可以直接运行吧
    shakukansp
        29
    shakukansp  
       53 天前
    现在如果是面向传统多页面的应用,要使用现代框架还有 ssg 这个办法
    也基本上就是操起 html 就写
    darknoll
        30
    darknoll  
       53 天前
    大明亡了啊
    codingBug
        31
    codingBug  
       53 天前
    上个世纪???
    grewer
        32
    grewer  
       53 天前
    这已经不是火星了
    konata
        33
    konata  
       53 天前
    管它前端怎么样美化,我只用写好能返回的 json 就可以了
    yaphets666
        34
    yaphets666  
       53 天前
    @wonderfulcxm serve side render 了解下
    dcsuibian
        35
    dcsuibian  
       53 天前
    乐观估计 5 年内还能看到这种帖子。
    但还是恭喜。
    wonderfulcxm
        36
    wonderfulcxm  
       53 天前 via iPhone
    @yaphets666 简单问题复杂化,又包一层而已,没有什么计算机问题不是多加一层能解决的,而后端渲染天然就是 ssr 。现在不是增加一层解决了一个原来不存在的问题,同时增加了就业机会。
    DOLLOR
        37
    DOLLOR  
       53 天前
    @wonderfulcxm
    现在的后端都不愿接触 HTML 、CSS 、JS 了,前端也不想在自己电脑上跑个后端项目写页面。
    不如干脆彻底分工,前后端各自在自己的领域卷卷卷。
    star7th
        38
    star7th  
       53 天前
    如果你是后端程序员的话,还可以理解,毕竟对你来说是打开了一个新世界大门。如果你是前端开发,我只能说你要学的还有很多很多。。。
    licoycn
        39
    licoycn  
       53 天前
    不管怎么变,前端后端我都要!!!
    zeroxia
        40
    zeroxia  
       53 天前
    请推荐 vue.js v3 的书籍!
    fayetitus
        41
    fayetitus  
       53 天前
    我,我在 2022 ?
    yeqizhang
        42
    yeqizhang  
       53 天前 via Android
    骚年,来写 jsx 吧
    iwdmb
        43
    iwdmb  
       53 天前
    記得 all in TESLA
    pytth
        44
    pytth  
    OP
       53 天前 via iPhone
    @liyang5945
    @pengtdyd
    @qzsi001
    @hhhanako
    @FreshOldMan
    @misaka19000
    @Liuman
    @darknoll
    @codingBug
    @grewer
    @fayetitus

    平时写后端比较多,前端知识还停留在 2016 年那时候的水平,只是觉得这两年很火爆,被吸引到了,就尝试拥抱时代,拥抱新技术。
    pytth
        45
    pytth  
    OP
       53 天前 via iPhone
    @libook 确实原生的写法可能会更纯粹吧
    pytth
        46
    pytth  
    OP
       53 天前 via iPhone
    @darksword21 现在的前端写好了不一定可以在浏览器打开,因为浏览器不认识,通过一些工具编译后,编译成 html,csa,js 才能部署到服务器。

    开发的时候,需要浏览器进行预览,调试,所以需要开启这个本地服务作为开发环境。
    pytth
        47
    pytth  
    OP
       53 天前 via iPhone
    @codefever 就像谭浩强的 C 语言程序设计那本书一样,很多代码已经不能跑了,而现在大部分的学校还作为课堂的教科书。
    duke807
        48
    duke807  
       53 天前 via Android   ❤️ 1
    用了一圈下來,發現還是這個框架最好:vanilla-js.com
    acoldfox
        49
    acoldfox  
       53 天前
    看了楼主又看了一楼的回复,有种翻到坟贴的感觉
    haah
        50
    haah  
       53 天前
    我个人觉得——你可能想多了!
    quanjw
        51
    quanjw  
       53 天前
    然后又要学 ES6 一个头两个大
    techstay
        52
    techstay  
       53 天前
    vue3 是真的不错,速度很快感觉
    crazykay
        53
    crazykay  
       52 天前 via Android
    缩圈了,拥抱纯 Web component 和 deno.js 。别的我都没兴趣搞。
    abcd191898105
        54
    abcd191898105  
       52 天前 via Android
    @Issuema 鱿大是外国人,别套近乎,搞得好像跟你很熟似的。人家气场也和你不一样。
    agagega
        55
    agagega  
       52 天前
    或许你还可以了解一下 Stimulus ?
    vHypnos
        56
    vHypnos  
       52 天前 via iPhone
    作为 react 老手,刚开始写 vue2 真的被 sfc 折磨的不行。正在积极推进组内换 vue3+nuxt 。。然后看看能不能写 tsx
    Felldeadbird
        57
    Felldeadbird  
       52 天前
    VUE 合适单页应用,不在于 SEO 的应用环境。VUE 相比起传统的模式,编写的业务更加需要细致化。例如:如何保存历史页,刷新保持当前页。页面跳转,页面回顶部。而不是停留在当前浏览区域。 官方文档都有说到上面的问题,也有解决方案。但是正常开发如果没留意这些,很容易就造成体验很奇怪的现象。

    JQ 我现在还在用,两者我觉得是互补,而不是谁替代谁的关系。
    ikaros
        58
    ikaros  
       52 天前
    我还在用服务端渲染和 jQuery, 主要优势是对于内容平台来说 SEO 比较友好 vue 这些有什么解决方案吗
    yaphets666
        59
    yaphets666  
       52 天前
    @wonderfulcxm 啥叫简单问题复杂化。。。vue 能极大提升开发效率啊,使用工具叫简单问题复杂化?
    shanghai1998
        60
    shanghai1998  
       52 天前
    flutter 是为了移动端和嵌入式;
    h5 太臃肿了,或者不好用;就比如有了 jquery 为什么还要 vue ,虽然 vue 做的事,jquery 大部分也能做,只是繁琐很多
    abersheeran
        61
    abersheeran  
       52 天前
    @windyboy 在 html 里写一个 script 从 CDN 引入一下,就可以开始写,而不是需要下载一个 nodejs 环境跑各种命令。
    longzn
        62
    longzn  
       52 天前
    什么明年北京要办奥运会了!!!!
    sickoo
        63
    sickoo  
       52 天前
    solid.js
    iovekkk
        64
    iovekkk  
       52 天前
    赶紧买房,21 年会暴涨一波
    DreamCMS
        65
    DreamCMS  
       52 天前
    我还是觉得 jq 好,如果以后前端都打包形式的话,不利于前端技术的发展
    LavaC
        66
    LavaC  
       52 天前
    页面不太复杂的话可以用 Alpine.js 这种轻量化框架。
    Dragonphy
        67
    Dragonphy  
       52 天前
    @zeroxia #40
    《 Vue 设计与实现》
    seamonster
        68
    seamonster  
       52 天前
    我自学 vue 写的舔狗网站: https://wedog.ru
    h1104350235
        69
    h1104350235  
       52 天前
    俺们村也连上 4G 了
    pytth
        70
    pytth  
    OP
       52 天前
    @iovekkk 刚好去年买了~坐标广州
    pytth
        71
    pytth  
    OP
       52 天前
    @shanghai1998 因为我看到太多人吐槽 jquery 来秀 vue 的优越感了...
    pytth
        72
    pytth  
    OP
       52 天前
    @Felldeadbird jquery 我还在用的原因就是有个比较方便的 ajax
    iovekkk
        73
    iovekkk  
       52 天前
    @pytth 你这是高位的时候买的啊
    DOLLOR
        74
    DOLLOR  
       52 天前 via Android
    @DreamCMS
    恰好相反,正是打包工具链的存在促进了前端的发展,否则前端今天还在写 ES3 调兼容。
    cangcang
        75
    cangcang  
       52 天前
    @pytth 嗯,现在前端代码要用 babel 编译已经是基操了
    gam2046
        76
    gam2046  
       52 天前
    vue 真心入门简单,有点其他语言基础的,缝缝补补,看一天就能写个还凑合的前端了。屏蔽的很多技术细节。

    electron 这种采用 vue 开发 UI ,速度也挺快的。我已经好几个需要 UI 的项目都采用 electron + vue 开发了,不图别的,就是简单。当然如果只需要 Windows ,C#那一套也很简单。
    dvsilch
        77
    dvsilch  
       52 天前
    @DreamCMS https://www.v2ex.com/t/851925 #reply66 是个很形象的比喻,放到前端这边也适用
    Abbeyok
        78
    Abbeyok  
       52 天前
    我也想上手 vue 了
    agdhole
        79
    agdhole  
       52 天前
    @pytth #72 ajax 方便在哪里?轻量级 fetch 几行就弄好了,或者引入一个 axios
    ciki
        80
    ciki  
       52 天前
    本能的看了下发帖时间
    creanme
        81
    creanme  
       52 天前
    不管是 vue, react, 还是 angular ,单页 seo 都太恼火了,如果为了 seo 而上 nuxt.js 或者 next.js 的话,听说工作量至少增加 50%。
    awesomes
        82
    awesomes  
       52 天前
    是我穿越了吗,为什么 2022 还能看到这种文章
    Blanke
        83
    Blanke  
       52 天前
    本能的看了下发帖时间 +1
    NoKey
        84
    NoKey  
       52 天前
    哎。。。我还以为谁挖坟了呢。。。
    TomPig0216
        85
    TomPig0216  
       52 天前
    vue 的官方文档真的详细 看起来不要太爽
    TomPig0216
        86
    TomPig0216  
       52 天前
    尤其是现在 vue3 的版本的语法写起来更得劲了
    PEAL
        87
    PEAL  
       52 天前
    @creanme 根本原因还是百度垃圾,不支持爬取 js 渲染的内容
    pytth
        88
    pytth  
    OP
       52 天前
    @PEAL 用爬虫没办法爬到单页的内容吧,毕竟都是需要浏览器去渲染。所以 seo 这块真的不友好。
    zengzizhao
        89
    zengzizhao  
       52 天前
    " 就像谭浩强的 C 语言程序设计那本书一样,很多代码已经不能跑了,而现在大部分的学校还作为课堂的教科书。"
    op ,你确定很多代码都已经不能跑了吗
    FightPig
        90
    FightPig  
       52 天前
    我远 svelte
    PonysDad
        91
    PonysDad  
       52 天前
    现在是北京时间 2022-05-12 17:56
    pytth
        92
    pytth  
    OP
       52 天前 via iPhone
    @zengzizhao 可以跑,用旧的办法~
    mostkia
        93
    mostkia  
       51 天前
    场景不同,各有优劣,不能说 vue 肯定比 jquery 好,精细化操作 dom ,还得原生 js ,而简化原生代码开发难度的,就是 jquery 这类库,vue 在自己能力范围内工作的很好,可以大幅提高效率,但超出能力范围后简直就是捏着鼻子开发。
    snow0
        94
    snow0  
       51 天前   ❤️ 1
    @darksword21 在 ide 中开发时确实需要一个端口启动,但是最终打包好后,还是一些 js 、html 文件,放在 nginx 上指定一个端口访问
    unco020511
        95
    unco020511  
       51 天前
    我以为我看的是五年前的帖子
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2470 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 15:26 · PVG 23:26 · LAX 08:26 · JFK 11:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.