Article directory
-
- Preface
- Render Functions
- Example
- scenes to be used
- Renderless Components
- Example
- scenes to be used
- Summarize
?Creator: Full stack trendsetter
Personal homepage: The personal homepage of the full-stack trend-setter
? Personal community, you are welcome to join: a personal community for full-stack trendsetters
Column address: vue2 advanced
Foreword
Render Functions and Renderless Components are two advanced concepts in Vue.js. They are very useful when building custom and highly flexible components, but their application scenarios and usage are different. .
Render Functions
- Render functions are a way to build Vue components programmatically, rather than using template-based declarative syntax (i.e.
tags). - By writing rendering functions, you can precisely control the component’s rendering output, including DOM structure, properties, and event handling.
- The rendering function accepts a
createElementfunction as a parameter, which you can use to create virtual DOM elements and assemble them into the rendering result of the component. - This approach is often used when building highly dynamic components, or when you need to perform specific logic during rendering.
Example
Render Functions:
//Rendering function, used to create a custom component containing buttons
render: function (createElement) {
return createElement('button', {
on: {
click: this.handleClick
}
}, 'Click me')
},
methods: {
handleClick: function () {
alert('Button clicked!')
}
}
In the example above, the render function programmatically creates a component containing a button. The button triggers the handleClick method when clicked.
Usage scenarios
Rendering functions have a variety of application scenarios in Vue.js, especially suitable for the following situations:
-
Dynamic Components: Rendering functions are useful when you need to select different components to render at runtime based on conditions. You can dynamically create different components based on data and logic.
-
Custom form controls: If you want to create custom form controls, such as complex input boxes, date pickers, or custom selection boxes, the rendering function can provide precise DOM structure and event handling.
-
Animations and transitions: For complex animations and transitions, rendering functions allow you to programmatically control the changes of elements to create a smooth user experience.
-
Virtual List: In the case of large lists of data, rendering functions can be used to virtual scroll or render only elements within the visible area, thus improving performance.
-
Complex UI components: For UI components with complex structures, such as tree views, tables, and charts, rendering functions provide a better way to control and organize the DOM structure.
-
Dynamic routing and layout: In some cases, you may need to dynamically create specific page structures in routing or layout. Rendering functions allow you to build pages based on routing parameters and conditions.
-
Cross-platform development: If you use Vue.js to build cross-platform applications, such as using Vue Native or combining Vue.js with Electron, the rendering function can be used to customize the rendering of different platforms.
It’s important to note that while the render function provides greater flexibility, it generally requires more code and complexity. Therefore, when choosing to use a rendering function, you should weigh the needs for maintainability and performance. In most cases, using template syntax is simpler and more intuitive, but render functions provide powerful tools for specific advanced use cases.
Renderless Components
- Rendering contentless components usually refers to components that do not have their own templates or rendering output, and they focus on providing data or logic to other components.
- These components are often used to abstract and reuse some common functionality or state without rendering the UI yourself. They provide data or methods for use by other components.
- Rendering contentless components often includes computed properties, methods, listeners, etc. to assist other components in completing their rendering and interaction.
Example
First, let’s update the RenderlessComponent.vue to use provide to provide data:
// RenderlessComponent.vue
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
},
provide() {
return {
itemsProvider: this.items
};
}
};
</script>
Here we provide a data called itemsProvider using provide which provides the items array to descendant components.
Then, let’s update the new component (NewComponent.vue) to use inject to access this data:
// NewComponent.vue
<template>
<div>
<h2>Project list</h2>
<ul>
<li v-for="item in injectedItems" :key="item">{<!-- -->{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
inject: ['itemsProvider'],
computed: {
injectedItems() {
return this.itemsProvider || [];
}
}
};
</script>
In the new component, we use inject to declare the itemsProvider properties we want to access. We then use the computed property injectedItems to get this data. This allows new components to obtain data provided by rendering contentless components without having to worry about their nesting relationships.
This approach makes the connection between the two components looser, allowing more flexibility since they no longer require hard-coded nested relationships.
Usage scenarios
Renderless Components are usually used in the following scenarios:
-
Logic reuse: Rendering contentless components can contain common logic and functionality so that these functionality can be shared across multiple components. This helps reduce code duplication and maintenance.
-
Data Assembly: They can be used to take data from different sources (API, local storage, etc.) and assemble it into a format suitable for use in multiple components. This helps keep data processing logic centralized.
-
State management: Rendering contentless components can manage the state of the application, such as user authentication, global settings, or themes, for use by other components. This facilitates centralized management of state and better data flow.
-
Computed properties and methods: They can contain computed properties and methods that can be reused across multiple components without having to implement the same logic repeatedly in each component.
-
Event Bus: Rendering contentless components can be used as an event bus, allowing communication and collaboration between different components, such as broadcasting and listening for events between multiple components.
-
Abstract UI components: They can be used to abstract common UI components so that they can be reused in different parts of the application without having to care about specific rendering or styling.
-
Test: Rendering contentless components can also be used for testing, where you can simulate data and behavior to verify the interaction of different components.
-
Complex business logic: When dealing with complex business logic, rendering contentless components can encapsulate the business logic in one place to reduce the complexity of a single component.
-
Component decoupling: They help decouple different parts of the application, making each component more independent and easier to understand and maintain.
Rendering contentless components is a powerful tool in Vue.js applications that can improve code maintainability, reusability, and extensibility. These components allow you to better organize and manage the data, logic, and functionality in your application while reducing the coupling between different components.
Summary
In general, rendering functions are more concerned with how to render content, while rendering contentless components is more concerned with providing data and logic. These two concepts can be combined with each other in advanced applications of Vue to build a more flexible and maintainable component architecture.
?Creation is not easy, please pay attention, like, collect