Table of contents
Distribute content through slots
Considerations when parsing DOM templates
Conditional rendering, list rendering, server-side rendering
component system
Component base
basic example
Here's an example of a Vue component:
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {
{ count }} times.</button>'
})Components are reusable Vue instances with a name: in this case <button-counter>. We can new Vue use this component as a custom element in a Vue root instance created by:
<div id="components-demo">
<button-counter></button-counter>
</div>new Vue({ el: '#components-demo' })Because components are reusable Vue instances, they new Vue receive the same options as data, computed, watch, methods and lifecycle hooks.
Component reuse
You can reuse components any number of times:
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>Note that each component will maintain it independently when the button is clicked count. Because every time you use a component, a new instance of it is created.
Instead, a component's data option must be a function, so each instance can maintain an independent copy of the returned object.
Component organization
Typically an application is organized as a nested tree of components:
Distribute content through slots
In 2.6.0, we introduced a new unified syntax (ie v-slot directives) for named and scoped slots. It replaces slot and slot-scope these two currently deprecated but not removed attributes that are still in the documentation .
<navigation-link url="/profile">
Your Profile
</navigation-link>Then <navigation-link> in your template you might write:
<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>dynamic component
Sometimes it is very useful to dynamically switch between different components, such as in a multi-tab interface:
<component> The above content can be achieved by adding a special attribute to the Vue element is :
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>In the example above, currentTabComponent one could include
- the name of a registered component, or
- A component's options object
You can check out and experience the full code here , or see an example of binding a component options object instead of a registered component name in this release .
Note that this attribute can be used on regular HTML elements, but these elements will be treated as components, which means that all attributes will be bound as DOM attributes . For value properties like this to work as expected, you need to use the .prop decorator .
That's about all you need to know about dynamic components so far, and if you've read this page and mastered its content, we recommend you come back and read up on dynamic and asynchronous components .
Considerations when parsing DOM templates
Some HTML elements, such as <ul>, <ol>, <table> and <select>, have strict restrictions on what elements can appear inside them. And some elements, such as <li>, , <tr> and <option>, can only appear inside certain other elements.
This can cause some problems when we use these constrained elements. For example:
<table>
<blog-post-row></blog-post-row>
</table>This custom component <blog-post-row> will be hoisted outside as invalid content and will result in an error in the final render. Fortunately, this special is attribute gives us a workaround:
<table>
<tr is="blog-post-row"></tr>
</table>Note that this restriction does not exist if we use templates from :
- string (eg:
template: '...') - Single file components (.vue)
- <script type="text/x-template">
At this point, you need to know the precautions when parsing DOM templates-in fact, all the necessary content of Vue , that's about it.
rendering mechanism
rendering principle
Virtual dom+diff algorithm:
Realize on-demand update and improve the update efficiency of dom rendering
The concept of vdom: a js object, using js object to simulate a real dom
The workflow of vdom:
- Generate the old virtual dom according to the initial dom: oldVnode, disadvantage one: so the loading of the first screen will be slower
- Generate a new virtual dom according to the modified dom structure: newVnode Disadvantage 2: Almost all the new virtual dom has changed, and the execution of the diff algorithm is meaningless waste of time
- Diff algorithm comparison: find out the dom that needs to be changed, and perform rendering as the real dom
Through the virtual dom, the real dom structure will only be manipulated once in a render, so it will only cause one rearrangement
Conditional rendering, list rendering, server-side rendering
slot
In 2.6.0, we introduced a new unified syntax (ie v-slot directives) for named and scoped slots. It replaces slot and slot-scope these two currently deprecated but not removed attributes that are still in the documentation .
<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>Scope: Everything in the parent template is compiled in the parent scope; everything in the child template is compiled in the child scope.
named slot
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
An export without will have the implicit name "default" name . <slot>
Scoped slots
<span>
<slot v-bind:user="user">
{
{ user.lastName }}
</slot>
</span>Attributes bound to <slot> elements are called slot props . Now in the parent scope, we can v-slot define the name of the slot prop we provide with a value:
<current-user>
<template v-slot:default="slotProps">
{
{ slotProps.user.firstName }}
</template>
</current-user>dynamic slot name
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>Abbreviation: #header
Responsive principle
In terms of responsiveness, it mainly refers to that after the state changes, the view should be actively updated
This process, vue is realized through two steps
- 1 Data hijacking
Data hijacking is also called data interception. Object.defineProperty is used to convert each property in the object into a setter and getter. In this case, when the corresponding property is modified, the setter can be triggered, so that you can know which property has changed.
- 2 Dependency Collection
That is, when rendering the view, the observer (watcher) should be combined with specific attributes, and then through the publish-subscribe mode, so that data changes can be more accurately updated to the view.