Question

我目前正在Web应用程序上使用Vue进行面向对象的表单验证，因此我所需要的只是后端验证，而vue负责其余的工作。

这意味着，如果我的应用程序具有很多形式，这些形式大多只是特定于页面的，那么我在Vue实例中最终会获得很多方法和数据。

new Vue({
    el: '#mainDiv',

    data: {
        profile_text: '',
        name: ''
        //LOTS OF DATA THAT I'M LEAVING OUT
        errors: new Errors()
    },


    methods: {
        onSubmitSettings() {
            axios.post('/settings', this.$data)
                .then(response => alert('Success!'))
                .catch(error => this.errors.record(error.response.data.errors));
        },
        onSubmitCreate() {
            axios.post('/subchannel/create', this.$data)
                .then(response => alert('Success!'))
                .catch(error => this.errors.record(error.response.data.errors));
        }, 
        //LOTS OF METHODS THAT I'M LEAVING OUT
    }
});

，这些都存储在一个JS文件中。

我应该继续这样吗？还是应该以某种方式存储只用于一页存储的方法/数据？

Answer 1

假设您共享的代码是您的主/根Vue实例，那么将所有这些都放在一个组件中可能是一个坏习惯。

理想情况下，您的代码应在视图和组件之间隔离组件。视图就像包含大多数业务逻辑的单个页面，而组件是可重用的项目，例如复选框，列表，输入等。

将应用划分为较小视图的原因是：

将所有内容放在根实例中将使组件的可重用性降低。它们取决于某种全球状态。
这使得修改更难跟踪；总体而言，使团队内部的代码难以维护。
拆分为较小的视图/组件将使您可以使用其他生态系统工具，例如 vue-router ，这将进一步帮助维护URL，URL历史记录等。
隔离成较小的组件将使Vue.js能够更好地跟踪更改检测，从而产生高效且高效的视图更新。 UI更新变得明显更快。

简而言之，它是关于遵循经典软件工程原理，例如 SOLID ，松耦合等。通常，这不仅限于Vue.js

我应该将所有Vue方法和数据存储在一个文件中吗？

1 个答案: