The cause of
We often see this kind of VUE code, which is very, very long, over 1000 lines, mixed with CSS and JS, data and views. For those of you who use vscode (even webstrom), it’s too long.
The length of the code for this example is less than 600 lines because of the need for everybody to agree on the format for prettier and so on. But like this form validation, especially when there are more than 50 fields on a page? What about the 30+ check rules? This is a nightmare
Vue3 hooks and React hooks
First of all, what are hooks? I’m not necessarily reading them correctly. In practice, however, developers split up functionality to a high degree of decoupling. This is mainly in the form of hooks syntax on VUe3 and React. The data layer can be separated from its own view file by embedding it in the view part. Because responsiveness itself drives the view based on data changes. So VUe3 is written in isolation of data responsiveness.
Vue3 code examples
View part
Logical part of JS
Because of this decoupling and decoupling, views can be decoupled from the data layer and are no longer mixed in a file.
Can vue2 be thought of as a problem?
Second, VUE2 solution, MY attempt
1. A bad example
First of all, we know about mixins, but with the exception of global mixins, please reject them. We could do something like this, but we’re going to reject it.
One of the problems that the big guy said before, implicit dependency can’t be solved. Use this feature when necessary.
I recommend using the mixin only globally.
2. New apis with VUe2.6 provide a solution
Vue.observable( object )
Link: cn.vuejs.org/v2/api/#Vue…
Make an object responsive. It is used internally by Vue to process objects returned by the data function.
The returned object can be used directly in rendering functions and computed properties, and will trigger an update when changes occur. It can also serve as a minimal cross-component state store for simple scenarios
Note:
In Vue 2.x, the incoming object is changed directly by vue.Observable, so as shown here, it is the same object as the returned object. In Vue 3.x, a responsive proxy is returned, while direct changes to the source object remain unresponsive. Therefore, for forward compatibility, we recommend always manipulating objects returned by vue.Observable rather than passing in the source object.
3. With this API, we can at least decouple the data part.
There must be a lot of verification, especially with the el-form verification, rules are placed in the data level. So it’s really long.
I did this for the next three pictures.
I split data, methods and views into three files. Because of the nature of VUe2, you must concatenate this object. The downside is that this is the core of the concatenation of the entire file. Variables exist in multiple files. When methods operate on the data part, people who don’t know will not know where the variable came from. But we managed to get around this very large VUE file.
Similarly, watch can exist in a separate file, such as dynamic calculation. It is even possible to separate the entire JS. But it depends on your understanding. Necessary splitting is ok, but excessive splitting is excessive design.
Second, the last
It’s not very elegant, but thinking and thinking hopefully can be helpful.