Vue SSR 即时编译技术的实现(2)

v-for 指令建议用 dom 元素单独包裹,不建议和其他组件并排使用,由于 for 循环会扰乱抽象语法树与 VNode 节点的对应关系,除非 v-for 指令所在的整个节点层级全为静态,否则将不会对包含 v-for 指令的层级及子级做优化。

不推荐用法

<template> <div> <div v-for="item in items" :key="item.id">{{item.value}}</div> <static-view></static-view> </div> </template>

推荐用法

<template> <div> <div> <div v-for="item in items" :key="item.id">{{item.value}}</div> </div> <static-view></static-view> </div> </template>

闭包

某些场景下,渲染函数引用了闭包变量,同时这个闭包变量又影响着一个动态的节点,通过 ast 逆向生成的渲染函数暂时无法追踪到之前的闭包引用,执行时会因找不到变量而报错,碰到这种情况,解析引擎将放弃当前组件的 ast 优化,转而使用优化前的渲染函数。

不推荐用法:

<template> <img :src="require(`@/assets/${img}`)" > </template>

推荐用法:

<template> <img :src="getImgUrl(img)" > </template>

到此这篇关于Vue SSR 即时编译技术的实现的文章就介绍到这了,更多相关Vue SSR 即时编译 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/61a3a3f9a0fbb941827fc23d55bcb33e.html