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

This article mainly explains "what are the matters needing attention in Vue.js". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what matters needing attention in Vue.js.

1. Why doesn't Vue.js use ES Classes to write components

If you have used a framework similar to Angular or some back-end OOP languages, your question may be: why not use components in the form of Class?

The author of Vue.js answers this question well in GitHub issues:

Use standard JS classes instead of custom syntax?

There are three important reasons why you don't use Class:

ES Classes can not meet the needs of the current Vue.js, the ES Classes standard has not been fully standardized, and is always developing in the wrong direction. It may be helpful if the private properties of Classes and the decorator (currently in Stage 3) are stable.

ES Classes is only suitable for those who are familiar with object-oriented languages, and it is not friendly to those who do not use complex build tools and compilers.

A good UI component hierarchy is generally a horizontal composition of components, and it is not based on an inherited hierarchy. The Classes form is obviously better at the latter.

Translator's note: But,Vue.js 3.0 will support Class-based component writing.

2. How to build your own abstract components?

If you want to build your own abstract components (such as transition, keep-alive), this is a crazier idea than building large web applications. There is some discussion about this issue, but there is no progress.

Any plan for docs of abstract components?

Translator's note: in the internal components of Vue.js (transition, keep-alive), an abstract attribute is used to declare abstract components, which the author does not intend to open to public use, so it is not mentioned in the document. But if you want to use it, you have to go deep into the source code to explore the role of this attribute.

But don't be afraid, if you have a good understanding of slots, you can build your own abstract components. Here is a good blog post on how to do this.

Writing Abstract Components with Vue.js

Translator's note: the following is a simple translation of "Building Abstract components in Vue.js"

An abstract component is the same as a normal component, except that it does not display any DOM elements on the interface. They just add additional behavior to existing components.

Just like many of the built-in components of Vue.js that you are already familiar with, such as ``,``, ``.

Now to show an example of how to trace a DOM into the visual area, let's use IntersectionObserver API to implement an abstract component that solves this problem.

(the complete code is here: [vue-intersect] (https://github.com/heavyy/vue-intersect)))

/ / IntersectionObserver.vue export default {/ / enable abstract components in Vue / / this property is not in the official document and may change at any time, but our component must use it abstract: true, / / re-implement a render function render () {/ / We don't need any wrapped elements, we just need to return subcomponents to try {return this.$slots.default [0] } catch (e) {throw new Error ('IntersectionObserver.vue can only render one, and exactly one child component.');} return null;}, mounted () {/ / create an IntersectionObserver instance this.observer = new IntersectionObserver ((entries) = > {this.$emit (entries [0] .isIntersecting? 'intersect-enter':' intersect-leave', [entries [0]]);}); / / you need to wait for the next event queue to ensure that the child element has been rendered this.$nextTick (() = > {this.observer.observe (this.$slots.default [0] .elm);}) }, destroyed () {/ / ensure that when the component is removed, the IntersectionObserver instance will also stop listening to this.observer.disconnect ();}}

Let's see how to use it.

But before you do this, please think twice. We generally rely on mixins and some pure functions to solve some special scenarios, and you can think of mixins directly as an abstract component.

How do I extend another VueJS component in a single-file component? (ES6 vue-loader)

3. I don't like Vue.js 's single-file components very much, and I prefer the separation of HTML, CSS and JavaScript.

No one stops you from doing this, and if you are a separation philosopher who likes to put different things in different files, or hates the editor's unstable behavior with .vue files, then you can do so. What you need to do is simple:

In doing so, the next question arises: does my component always need four files (vue + html + css + js)? Can I get rid of the .vue file? The answer is yes, you can use vue-template-loader.

My colleague also wrote a great tutorial on this:

Using vue-template-loader with Vue.js to Compile HTML Templates

4. Functional components

Thanks to React.js, functional components are popular because they are stateless and easy to test. However, they also have some problems.

Translator's note: those who are not familiar with Vue.js functional components can check the official documentation first: official documentation.

4.1Why can't I use the Class-based @ Component decorator for functional components?

Going back to Classes, it's just a data structure that holds the local state. If functional components are stateless, it makes no sense to use the @ Component decorator.

Here's a discussion about this:

How to create functional component in @ Component?

4.2 external classes and styles do not apply to functional components

Functional components cannot bind specific classes and styles as normal components do, and these bindings must be applied manually in the render function.

DOM class attribute not rendered properly with functional components

Class attribute ignored on functional components

4.3 functional components always render repeatedly?

TLDR: be careful when using stateful components in functional components

Functional components are re-rendered when props are unchanged.

A functional component is equivalent to calling the component's Render function directly, which means that you should:

Avoid using stateful components directly in the render function, as this creates a different component instance each time the render function is called.

If functional components are leaf components, they will be better utilized. It is important to note that the same behavior applies to React.js.

4.4 how do I trigger an event in a Vue.js functional component?

It is not easy to trigger an event from a functional component. Unfortunately, this is not mentioned in the document either. The $emit method is not available in functional components. Someone on stack overflow has discussed this issue:

How to emit an event from Vue.js Functional component?

5. Transparent package components of Vue.js

Component wraps some DOM elements and exposes events for these DOM elements rather than node instances of the root DOM.

For example:

My Label

What we are really interested in here is the input node, not the div root node, because it is mainly added for styling and embellishment. Users may be interested in several input events for this component, such as blur, focus, click, hover, and so on. This means that we have to rebind each event. Our components are shown below.

My Label

In fact, this is totally unnecessary. The simple solution is to use the property vm.$listeners on the Vue instance to rebind the event to the desired DOM element:

My Label

6. Why can't you bind and trigger events on slot

I often see developers listening and distributing events on slot, which is impossible.

The slot of a component is provided by the parent component that calls it, which means that all events should be associated with the parent component. Trying to listen to these changes means that your parent-child components are tightly coupled, but there is another way to do this, as Evan You explains very well:

Is it possible to emit event from component inside slot # 4332

Suggestion: v-on on slots

7. Slot in slot (visit grandchild slot)

At some point, this may be the case. Suppose you have a component, such as A, that accepts some slot. Follow the principle of composition and use component A to build another component B. And then you use B in C.

So now the question is: how do you pass slot from the C component to the A component?

To answer this question, it first depends on how you build the component. If you are using the render function, it is very simple. You only need to do the following in the render function of component B:

/ / Render function for component B function render (h) {return h ('component-a', {/ / Passing slots as they are to component A scopedSlot: this.$scopedSlots}})

However, if you are using a template-based approach, then it is a bit bad. Fortunately, progress has been made on this issue:

Feat (core): support passing down scopedSlots with v-bind

Thank you for your reading, the above is the content of "what are the points for attention of Vue.js". After the study of this article, I believe you have a deeper understanding of the matters needing attention of Vue.js, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.