asp.net - 为什么混合使用 Razor Pages 和 VueJs 是一件坏事？

Question

我正在尝试使用 Razor Pages 设置一个 .NET 核心项目，并在 Razor 页面中包含 vueJs 以用于我的所有逻辑。

是这样的:

@{
    ViewData["Title"] = "VueJs With Razor";
}
<h2>@ViewData["Title"].</h2>

<div id="app">
   <span>{{ message }}</span>
</div>

<script>
     new Vue({
        el: '#app',
        data: {
          message : 'Hello vue.js'
        }
    })
</script>

我读到混合 Vue 和 Razor 页面是一种不好的做法，应该使用 Razor 或 Vue。

这是为什么？

Answer 1

混合使用 VueJs 和 Razor Pages 不一定是坏事，它可能很棒!

我将 Vue 与 razor 一起用于非 SPA 页面，两者可以很好地协同工作。我选择通过 CDN 的脚本标签加载 Vue 来使用它，并且我没有利用 WebPack 进行转译，我只是在 (gasp) ES5 中编写我的代码。我选择这种方法的原因如下。

• 使用 Razor 页面而不是 SPA 有助于 SEO 和面向公众的页面的搜索引擎排名。
• 直接从 CDN 加载 Vue 消除了学习曲线中的一整套以 Webpack 为中心的技术，这使得新开发人员更容易上手该系统。
• 该方法仍然为 UI 开发提供了响应式优点，而 Vue 固有地为表格带来了这种优点。
• 通过保持“页面模型”，提供网站功能的代码在逻辑上围绕提供该功能的后端页面进行分组。

由于 Vue 和 Razor 可以做很多相同的事情，我对面向公众的页面的目标是使用 Razor 生成尽可能接近最终的 html，并使用 Vue 向页面添加 react 性。这为通过解析返回的 HTML 为页面编制索引的抓取工具带来了巨大的 SEO 优势。

我意识到我对 Vue 的使用与走 SPA 和 WebPack 的路线有很大不同，这种方法通常意味着我不能在不稍微修改代码的情况下使用第 3 方 Vue 组件。但该方法简化了软件架构并提供了轻量级的响应式(Reactive) UI。

通过使用这种方法，可以充分利用 Razor 来生成带有一些包含 vue 属性的标记的 HTML 的初始呈现。然后在浏览器中加载页面后，Vue 接管并可以以任何需要的方式重新配置该页面。

显然，这种方法不能满足所有开发人员或项目的需求，但对于某些用例来说，这是一个非常好的设置。

一些感兴趣的人的更多细节

由于我在整个站点范围内使用 vue，因此我的全局 _layout.aspx 文件负责实例化 vue。在 vue 中实现的任何站点范围的功能都是在这个级别实现的。许多页面都有页面特定的 vue 功能，这是作为该页面上的 mixin 或该页面加载的 js 文件中的 mixin 实现的。当 _layout.aspx 页面实例化 Vue 时，它​​会使用我已注册到全局 mixin 数组的所有 mixin。 (页面将它的 mixin 推送到那个全局 mixin 数组)

我不使用 .vue 文件。任何需要的组件都直接在页面上实现，或者如果它们需要被多个页面使用，那么它们将在如下所示的局部 View 中实现。

dlogViewComponent.cshtml :

    @* dlog vue component template*@
    <script type="text/x-template" id="dlogTemplate">
        <div class="dlog" v-show="dlog.visible" v-on:click="dlog.closeBoxVisible ? close() : ''">
            <div class="dlogCell">
                <div class="dlogFrame" @@click.stop="" style="max-width:400px">
                    <i class="icon icon-close-thin-custom dlogCloseIcon" v-if="dlog.closeBoxVisible" @@click="close()"></i>
                    <div class="dlogCloseIconSpace" v-if="dlog.closeBoxVisible"></div>
                    <div class="dlogInner">
                        <div class="dlogTitle" style="float:left" v-text="title"></div>
                        <div class="clear"></div>
                        <div class="dlogContent">
                            <slot></slot>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>

    @* Vue dlog component *@
    <script type="text/javascript">
            Vue.component('dlog', {
                template: '#dlogTemplate',
                props: {    //don't mutate these!
                    closeBoxVisible: true,
                    title: 'One'
                },
                data: function () {
                    return {
                        dlog: { //nest the data props below dlog so I can use same names as cooresponding prop
                            closeBoxVisible: (typeof this.closeBoxVisible === 'undefined') ? true : (this.closeBoxVisible == 'true'),
                            title: (typeof this.title === 'undefined') ? '' : this.title,
                            visible: false
                        }
                    }
                },
                methods: {
                    //opens the dialog
                    open: function () {
                        app.hideBusy();        //just in case, no harm if not busy
                        this.dlog.visible = true;
                        var identifyingClass = this.getIdentifyingClass();
                        Vue.nextTick(function () {
                            $("." + identifyingClass).addClass("animateIn");
                            fx.manageDlogOnly();
                        });
                    },
                    //closes the dialog
                    close: function () {
                        fx.prepDlogClose();
                        var identifyingClass = this.getIdentifyingClass();
                        this.dlog.visible = false;
                        $("." + identifyingClass).removeClass("animateIn");
                    },
                    getIdentifyingClass: function () {
                        if (this.$el.classList.length > 1) {
                            //the last class is always our identifying css class.
                            return this.$el.classList[this.$el.classList.length - 1];
                        } else {
                            throw "A dialog must have an identifying class assigned to it.";
                        }
                    }

                }
            });
    </script>

在上面，是 Vue.component('dlog', ... 安装组件并使其对页面可用的 js 部分。

_layout.cshtml 页面上的 vue 代码类似于下面的代码。通过在整个站点使用的 _layout.cshtml 上实例化 Vue，Vue 仅在站点范围内的一个地方实例化:

_layout.cshtml :

 <script type="text/javascript">
    var app = new Vue({
        el: '#appTemplate',
        mixins: mixinArray,                     //The page adds it's mixin to mixinArray before this part of the layout executes. 
        data: {
            errorMsg: ''                        //used sitewide for error messages
            //other data used sitewide
        }, 
        methods: {
            //methods that need to be available in vue sitewide, examples below:
            showBusy: function (html) {
                //functionality to show the user that the site is busy with an ajax request.
            },
            hideBusy: function () {
                //functionality to hide the busy spinner and messaging
            }
        },
        created: function () {
             //this method is particularly useful for initializing data.
        }
    });

</script>

我在这里提供的内容非常清楚地描绘了这种非传统方法及其优势。不过好几个人问，我也写了一篇相关博文:Using VueJs with ASP.NET Razor Can Be Great!