vue diff逻辑优化
查看会编译成什么样
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.
v-html
{{}}里的东西是作为plain text显示，想在里面显示html的话就用这个。
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive:
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
动态属性名
名字也可以由计算得出
<a v-on:[eventName]="doSomething"> ... </a>
<a @[eventName]="doSomething"> ... </a>
<a :[key]="doSomething"> ... </a>
<a v-bind:[key]="doSomething"> ... </a>
in-dom 会被转成小写
teleport
把内容挂到指定id的元素里，vue之间的父子关系不变
<teleport to="#modals">
<div>A</div>
</teleport>
<teleport to="#modals">
<div>B</div>
</teleport>
<!-- result-->
<div id="modals">
<div>A</div>
<div>B</div>
</div>
插槽 slot
version≥2.6
<template>里的内容是要显示到上一级去的
组件定义
name是给组件起名字， :user是把组件里的user变量传到使用组件的那里去，是封装成对象。
<slot name="slot1" :user="user" :user1="user1">
{{ user.lastName }}
</slot>
使用
#slot1 是表示这里用的是名字为slot1的插槽， 后面的内容表示传来的变量内容用这个名字接收。
<current-user>
<template #slot1="slotProps">
{{ slotProps.user.firstName }}
{{ slotProps.user1.firstName }}
</template>
</current-user>
解构调用
<current-user>
<template #slot1="{user,user1}">
{{ user.firstName }}
{{ user1.firstName }}
</template>
</current-user>
带默认值的解构
<current-user v-slot="{ user = { firstName: 'Guest' } }">
{{ user.firstName }}
</current-user>
动态插槽名
<base-layout>
<template #[dynamicSlotName]>
...
</template>
</base-layout>
评论区