目录
keep-alive：保留状态，避免组件在切换时被销毁和重新创建
v-if、v-else-if、v-else 存在
function createVNode(type, props, children) {
// 创建虚拟节点
}
function patch(container, vnode) {
// 渲染函数，将虚拟节点渲染到真实 DOM 上
}
function processIf(vnode, container) {
if (vnode.props['v-if']) { //是否存在 v-if 属性
if (vnode.props['v-if']()) {
// 如果满足条件，渲染子节点
const childVNode = vnode.children[0];
patch(container, childVNode);
} else {
// 如果不满足条件，移除子节点
container.innerHTML = '';
}
}
}切换时有性能开销，在 Vue 3 中，性能得到了改善，不再需要 <template> 标签来包裹它们
创建、插入到 DOM
从DOM移除、销毁
keep-alive：保留状态，避免组件在切换时被销毁和重新创建
插入DOM，
从DOM移除
<template>
<div>
<button @click="toggleShow">Toggle</button>
<keep-alive>
<div v-if="isVisible">This element is kept alive</div>
</keep-alive>
</div>
</template>v-show 与display: none显示
el.style.display = value ? originalDisplay : 'none'
Vue.directive('show', { // directive 方法来定义一个名为 show 的指令
updated(el, binding) { // updated 钩子函数
if (binding.value) { //恢复原始值
el.style.display = el.__vOriginalDisplay || '';
} else {
if (el.style.display !== 'none') { //如果元素当前不是 none，则存储为原始值
el.__vOriginalDisplay = el.style.display;
}
el.style.display = 'none';
}
}
});性能比较：
v-show：始终被渲染并保留在 DOM 中（即使初始渲染时组件不显示），
相比v-if没满足就不会创建而言，v-show="false"时初始化性能差
相关基础
BOM（window）
Browser Object Model浏览器对象模型
window : alert() , prompt() , confirm() , setInterval() , clearInterval() , setTimeout() , clearTimeout() ;
history : go(参数) , back() , foward() ;
location : herf属性.
window.location.href = '你所要跳转到的页面';
window.open('你所要跳转到的页面’);
window.history.back(-1):返回上一页
window.history.go(-1/1):返回上一页或下一页
window.print() 直接掉用打印窗口
DOM（document）
Document Object Model 文档对象模型
文档流
CSS布局概念，它是指在没有进行显式定位或浮动的情况下，
元素按照其在DOM树中的出现顺序从上到下依次排列的方式，
文档流决定了元素在页面中的位置和相互之间的关系，
显式定位：absolute，fixed，relative，对于其正常位置进行偏移或定位到页面的特定位置。
渲染过程
- 加载页面的html和css（源码）
- html转换为HTMLDOM（Tree结构），css转换为CSSOM（Tree结构）
- 将DOM和CSSOM构建成Render Tree
(元素的布局和位置是基于文档流的规则来确定的，display:none被移出文档流，所以不渲染)
- 对渲染树进行reflow（回流、重排）（计算元素的位置）
- 对网页进行绘制repaint（重绘）
动态组件 (component)：组件名
import A from "./components/A.vue"
import B from "./components/B.vue"
</script>
<component :is="isShow ? A : B"></component>
</template>条件渲染函数 (render() )
<template>
<div>
<div>
{renderElement()}
</div>
</div>
</template>
<script>
export default {
data() {
return {
condition: 'A'
};
},
methods: {
renderElement() {
if (this.condition === 'A') {
return <div>Element A</div>;
} else if (this.condition === 'B') {
return <div>Element B</div>;
} else {
return <div>Element C</div>;
}
}
}
};
</script>传送teleport（逻辑与位置不是在同一个DOM）
<template>
<div>
<button @click="toggleTeleport">Toggle Teleport</button>
<div>
<teleport to="body" v-if="isTeleportEnabled">
<div>This element is teleported to the body</div>
</teleport>
</div>
</div>
</template>列表渲染 (v-for)：多个
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{
{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
};
}
};
</script>Vue3【1.v-if 和 v-show 、2.动态组件、 3.网页的渲染 、4.v-for】_十一__一的博客-CSDN博客