V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
coderMonkey
V2EX  ›  程序员

Vue 一个系统一个实例不就够了吗,什么情况需要多个实例

  •  
  •   coderMonkey · 2023-08-02 13:13:04 +08:00 · 3285 次点击
    这是一个创建于 470 天前的主题,其中的信息可能已经有所发展或是发生改变。
    后端开发,最近在学习前端,Vue 里面不是一个实例就够了吗,只要挂载一个宽高 100%的根节点,后面页面都在这个根节点上变化不就好了吗

    看了下公司的项目,一个页面就是一个根节点,有点不能理解为啥要这样做
    第 1 条附言  ·  2023-08-02 14:00:45 +08:00
    公司就是多个 html 页面,每个 html 页面都 new 一个 vue ;按我现在理解一个系统再多的页面也只要一个 Vue 实例就好了啊
    28 条回复    2023-08-03 14:28:56 +08:00
    Bingchunmoli
        1
    Bingchunmoli  
       2023-08-02 13:18:03 +08:00 via Android
    我遇见些 html 的每个页面 new 一次 Vue 但后来的公司都是脚手架至少总体一个
    LandCruiser
        2
    LandCruiser  
       2023-08-02 13:19:40 +08:00
    有外部系统引用你们的系统
    coderMonkey
        3
    coderMonkey  
    OP
       2023-08-02 13:24:41 +08:00
    @LandCruiser 引用为啥需要多实例
    IvanLi127
        4
    IvanLi127  
       2023-08-02 13:28:32 +08:00 via Android
    怕牵一发而动全身的情况下?你这个好像不算多实例,一个页面一个实例,多个 SPA 罢辽。
    iOCZ
        5
    iOCZ  
       2023-08-02 13:30:07 +08:00
    如果是单页面,那就一个实例。如果多页面,那每个页面一个实例。
    tsanie
        6
    tsanie  
       2023-08-02 13:33:31 +08:00
    见过一块 div 一个实例的没有 /doge
    coderMonkey
        7
    coderMonkey  
    OP
       2023-08-02 13:36:38 +08:00
    @iOCZ 多页面我也可以一个页面直接做组件啊,然后路由跳转不行嘛
    weixiangzhe
        8
    weixiangzhe  
       2023-08-02 13:43:50 +08:00
    弹窗 toast 类渲染到根部吧
    imben
        9
    imben  
       2023-08-02 14:20:43 +08:00
    多页应用对 seo 更友好些
    LandCruiser
        10
    LandCruiser  
       2023-08-02 14:27:59 +08:00
    @coderMonkey 每个外部系统需要的功能不一样,通过一个统一的入口暴露不合适。
    iOCZ
        11
    iOCZ  
       2023-08-02 14:31:04 +08:00
    @coderMonkey 你那个叫单页面应用
    wednesdayco
        12
    wednesdayco  
       2023-08-02 14:37:23 +08:00
    这不就是 MPA 和 SPA 的区别= =
    lisongeee
        14
    lisongeee  
       2023-08-02 14:56:16 +08:00
    某些组件库会提供命令式的弹窗/通知方法,这种情况下创建的组件是独立的 vue 实例
    nulIptr
        15
    nulIptr  
       2023-08-02 14:59:37 +08:00
    建议一步到位了解一下微前端是啥概念。。。
    coderMonkey
        16
    coderMonkey  
    OP
       2023-08-02 15:09:28 +08:00
    @wednesdayco @iOCZ @HashV2 学到了,确实是 SPA 和 MPA 的区别,那什么情况下需要在 SPA 中创建多个实例呢,我看 Vue 的官方文档里说的是“想要 Vue 去控制一个大型页面中特殊的一小部分的时候需要创建多个实例”,不是很能理解
    obulks
        17
    obulks  
       2023-08-02 16:13:45 +08:00
    你应该问你们的前端,而不是问我们
    molvqingtai
        18
    molvqingtai  
       2023-08-02 16:18:36 +08:00
    @coderMonkey #16 前端控制路由用一个实例,每个页面一个实例应该是后端控制路由,相当于把 Vue 当高级的 Jquery 使用
    learningman
        19
    learningman  
       2023-08-02 16:22:39 +08:00 via Android
    @coderMonkey 现在这个网页已经写好了,100 万行代码,你想用 vue ,你是打算把整个页面全部重写一遍,还是挂一小块先把需要加的新功能给加上?
    thinkershare
        20
    thinkershare  
       2023-08-02 16:25:04 +08:00
    因为很多软件并不需要 SAP, 而只是仅仅将 Vue 作为一个 View Render Engine 。这种场景下完全可以使用 Vue, 但不使用任何现代化的前端构建工具。我们就有项目这样用过。
    thinkershare
        21
    thinkershare  
       2023-08-02 16:25:15 +08:00
    SPA
    charlie21
        22
    charlie21  
       2023-08-02 16:31:14 +08:00
    @thinkershare 这等于在使用一个(带虚拟 DOM )的 jquery , 用 vue ,在最小情况下,来控制一个 div
    wu67
        23
    wu67  
       2023-08-02 16:34:53 +08:00
    部分重构又不想推倒整个项目, 又想换用新的技术, 在实际项目进行中就会出现这种情况.
    你公司这是多页面应用了, 你说的和 vue 官方文档默认的路子是单页面应用.

    还有另一种用法是维护一个通用框架页面(只有 header menu 和 tab), 然后把旧项目通过前者的 iframe 嵌套, 新模块通过单独新开项目的形式维护, 同样套到 iframe, 然后在主框架项目里面配置 tab 和路由.
    ZGame
        24
    ZGame  
       2023-08-02 16:58:28 +08:00
    twitch 那个直播观看插件页面才是对微前端最好的一个例子!
    MENGKE
        25
    MENGKE  
       2023-08-02 18:24:26 +08:00
    @weixiangzhe 常见的场景只能想到 toast
    SanYuan
        26
    SanYuan  
       2023-08-03 11:09:08 +08:00
    @wu67 我司目前就是这样 原来的 jq+自研跑了很多年了,部分新的使用了 vue ;
    hgaogao
        27
    hgaogao  
       2023-08-03 12:25:31 +08:00 via iPhone
    有些组件是命令式调用所以需要用到第二个实例来进行挂载,比如 model 、全凭的 loading
    cnuser002
        28
    cnuser002  
       2023-08-03 14:28:56 +08:00
    你现在直接用 Vue 开新坑,基本都是单页应用。

    但 VUE 把自己叫做渐进式 Javascript , 它也可以在直接在 HTML 的 Script 中声明一个 Vue 实例,然后挂载到页面上的某个元素。

    中途加入 Vue 的项目一般就会用这种方式。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5808 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 02:56 · PVG 10:56 · LAX 18:56 · JFK 21:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.