How do I write a better Vue than someone else?

The article comes from the public number: front-ender

For most people, mastering Vue .js basic API has allowed you to develop front-end sites normally. B ut if you want to develop Vue more efficiently and become a Vue .js master, here are five things I'm going to teach you. A lot of HR will ask during the interview process.

The first trick: turn it into a simple Watch

Scene restore:

When the component is created, we get a list once, listen to input box, and it's common to get the filtered list again whenever it changes, is there any way to optimize it?

Trick analysis:

First, in watch you can use the literal name immediate:true of the function directly;

Second trick: Once and for all component registration

Scene restore:

We wrote a bunch of basic UI components, and then every time we need to use them, we have to import and declare components which is cumbersome! Adhering to the principle of being lazy, we have to find a way to optimize!

Trick analysis:

We need to create our own (module) context using require.context() method with the help of the artifact webpack to implement automatic dynamic require components. This method requires three parameters: the folder directory to search, whether it should also be searched for subdirectories, and a regular expression that matches the file.

We add a file called global.js to the components folder, where the underlying components that will be required dynamically with the help of webpack are packaged.

Finally, we import import 'components/global.js' in main.js .js, and then we can use these underlying components anytime, anywhere, without having to manually introduce them.

Third trick: router key for the bottom of the kettle

Scene restore:

The following scene really breaks the hearts of a lot of programmers... The first default is Vue-router for routing control.

Suppose we're writing a blog site and the requirement is to jump from /post-page/a to /post-page/b T hen we found out amazingly that the data wasn't updated after the page jumped?! T he reason is that vue-router "intelligently" discovers that this is the same component, and then it decides to reuse the component, so the method you write in the created function doesn't work at all. The usual solution is to listen for $route to initialize the data, as follows:

bug are solved, but it's too unseemly to write like this every time, isn't it? Adhering to the principle of being lazy and lazy, we want the code to say this:

Trick analysis:

So how do you do that, and the answer is to add a unique key to router-view so that even a common component, if url changes, will definitely recreate it. ( Although a loss of performance is lost, unlimited bug are avoided).) At the same time, note that I set key directly to the full path of the route, and do both.

Fourth trick: The omnipotent render function

Scene restore:

vue requires that each component have only one root element, and when you have more than one root element, vue will report you an error

Trick analysis:

Then there's no way to resolve it, the answer is yes, but that's when we need to use render() function to create HTML not template I n fact, the advantage of using js to generate html is that it is extremely flexible and powerful, and you don't need to learn to use vue's limited-function instruction APIs, such as v-for v-if ( reactjs completely discarded template )

Fifth trick: No winning high-order components

Focus: This trick is powerful, be sure to master it

When we write components, the communication of parent and child components is important. T ypically we all need to pass a series of props from the parent component to the child component, while the parent component props to a series of events that come from the child component emit To give an example:

There are several optimization points:

For every props passed from the parent component to the child component, we have to explicitly declare in Props of the child component to use it. A s a result, our child components need to declare a lot of props each time, and dom property like placeholer can actually pass directly from parent to child without declaration. Here's how

$attrs contains attribute bindings (except class and style in the parent scope that are not recognized (and acquired) as prop When a component does not declare any prop it contains bindings for all parent scopes, and internal components can be passed in via v-bind="$attrs" -- which is useful when creating higher-level components.

Notice that the @focus of the child @focus=$emit('focus', $event)" and that nothing has actually been done, just passing event back to the parent component, which is similar to the above, and I have no need to explicitly state:

$listeners contains the v-on event listener in the parent scope (without the .native decorator). It can be passed in to internal components through v-on="$listeners" -- which is useful when creating higher-level components.

Note that because we input is not the root node of the BaseInput component, by default the parent scope's attribute bindings that are not recognized as props are "fallback" and are applied as normal HTML attributes to the root elements of the child component. So we need to set inheritAttrs:false and these default behaviors will be removed, and the optimization of these two points will be successful.

That's W3Cschool编程狮 says about how to write a better Vue than anyone else? Related to the introduction, I hope to help you.