Shulou(Shulou.com)06/03 Report--

Editor to share with you what are the skills of using Vue.js, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The first trick: Watchers that reduces complexity to simplicity

Scene restore:

Created () {this.fetchPostList ()}, watch: {searchInputValue () {this.fetchPostList ()}}

When the component is created, we get the list once and listen to the input box at the same time. It is common to retrieve the filtered list every time it changes. Is there any way to optimize it?

Style analysis:

First, in watchers, you can use the literal name of the function directly; second, declaring immediate:true means that it is executed immediately when the component is created.

Watch: {searchInputValue: {handler: 'fetchPostList', immediate: true}}

The second trick: component registration once and for all

Scene restore:

Import BaseButton from'. / baseButton'import BaseIcon from'. / baseIcon'import BaseInput from'. / baseInput'export default {components: {BaseButton, BaseIcon, BaseInput}}

We wrote a bunch of basic UI components, and every time we need to use these components, we have to import first, and then declare components, which is tedious! Adhering to the principle of being lazy as we can, we need to find ways to optimize!

Style analysis:

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

We add a file called global.js in the components folder, where webpack dynamically packages all the basic components we need.

Import Vue from 'vue'function capitalizeFirstLetter (string) {return string.charAt (0). ToUpperCase () + string.slice (1)} const requireComponent = require.context ('.', false, /\ .vue $/ find the file named .vue under the components folder) requireComponent.keys (). ForEach (fileName = > {const componentConfig = requireComponent (fileName) const componentName = capitalizeFirstLetter (fileName.replace (/ ^\.\ /,'). Replace (/. '') / / because the resulting filename format is:'. / baseButton.vue', so here we go to turn around and tail Keep only the real file name) Vue.component (componentName, componentConfig.default | | componentConfig)})

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

The third move: router key from the bottom.

Scene restore:

The following scene really broke the hearts of many programmers. First default is to use Vue-router to achieve routing control.

Suppose we are writing a blog site and the requirement is to jump from / post-page/a to / post-page/b. Then we were surprised to find that the data was not updated after the page jumped. The 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 wrote in the created function is not executed at all. The usual solution is to listen for changes in $route to initialize the data, as follows:

Data () {return {loading: false, error: null, post: null}}, watch: {'$route': {handler: 'resetData', immediate: true}}, methods: {resetData () {this.loading = false this.error = null this.post = null this.getPost (this.$route.params.id)}, getPost (id) {}}

Bug is solved, but isn't it too elegant to write like this every time? Adhering to the principle of being lazy, we want the code to be like this:

Data () {return {loading: false, error: null, post: null}}, created () {this.getPost (this.$route.params.id)}, methods () {getPost (postId) {/ /...}}

Style analysis:

So how can we achieve this effect? the answer is to add a unique key to router-view, so that even if it is a common component, as long as the url changes, the component will be recreated. Although a loss of performance is lost, unlimited bug is avoided. At the same time, notice that I set key directly as the full path of the route, killing two birds with one stone.

The fourth trick: omnipotent render function

Scene restore:

Vue requires that each component can have only one root element. When you have multiple root elements, vue will report an error to you.

{{route.title}}

ERROR-Component template should contain exactly one root element.

If you are using v-if on multiple elements, use v-else-if

To chain them instead.

Style analysis:

Is there any way to solve it? the answer is yes, but at this time we need to use the render () function to create HTML instead of template. In fact, the advantage of using js to generate html is extremely flexible and powerful, and you don't need to learn to use vue's limited instructions API, such as v-for, v-if. (reactjs completely discarded template)

Functional: true,render (h, {props}) {return props.routes.map (route = > {route.title})}

Fifth move: high-level components with no wins and tricks

Highlight: this is a powerful move, please master it.

When we write a component, we usually need to pass a series of props from the parent component to the child component, while the parent component listens for a series of events from the child component emit. Examples are as follows:

/ / parent component

There are several optimization points:

1. Every props passed from the parent component to the child component can only be used by explicitly declaring it in the Props of the child component. As a result, our child components need to declare a lot of props at a time, and we can actually pass a native dom property like placeholer directly from parent to child without declaration. The methods are as follows:

Attrs contains feature bindings in the parent scope that are not recognized (and acquired) as prop (except for class and style). When a component does not declare any prop, all parent scope bindings are included here, and internal components can be passed in via vmurbind = "$attrs"-- useful when creating higher-level components.

two。 Notice that the @ focus=$emit ('focus', $event) of the child component does nothing but pass the event back to the parent component, which is similar to the above, and I don't need to explicitly state:

Computed: {listeners () {return {... this.$listeners, input: event = > this.$emit ('input', event.target.value)}

Listeners contains the v-on event listeners in the parent scope (without the .native modifier). It can pass in internal components via vMuon = "$listeners"-- useful when creating higher-level components.

3. It should be noted that since we, input, are not the root node of the BaseInput component, feature bindings of the parent scope that are not considered props by default will be "fallback" and applied to the root element of the child component as a normal HTML feature. So we need to set inheritAttrs:false, these default behaviors will be removed, the above two points of optimization can be successful.

The above is all the contents of this article entitled "what are the skills of using Vue.js?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.