模板

分类	Composition API（Vue3）	Options API（Vue3）	Options API（Vue2）
模板	-	template v3.0	template v2.0
-	-	<template> v3.0	<template> v2.0
-	app.config.compilerOptions v3.0	-	Vue.compile() v2.0
-	.whitespace v3.0	-	-
-	-	-	name v2.0
-	.delimiters v3.0	-	delimiters v2.0
-	.comments v3.0	-	comments v2.4
Web Components	app.config.isCustomElement v3.0	-	Vue.config.ignoredElements v2.0
-	defineCustomElement() v3.0	-	-
-	customElements.define() v3.0	-	-
-	useShadowRoot() v3.5	-	-
-	useHost() v3.5	$host() v3.5	-
渲染函数	-	render() v3.0	render() v2.0
-	-	h() v3.0	createElement() v2.0 h() v2.0
-	-	mergeProps() v3.0	-
-	-	resolveComponent() v3.0	-
-	-	resolveDirective() v3.0	-
-	-	withDirectives() v3.0	-
-	-	withModifiers() v3.0	-
-	-	isVNode() v3.0	-
-	-	cloneVNode() v3.0	-
强制重新渲染	-	$forceUpdate() v3.0	$forceUpdate() v2.0
服务端渲染	createSSRApp() v3.0	-	$isServer v2.0 vue-server-renderer v2.2
-	useSSRContext() v3.0	-	-
-	renderToString() v3.0	-	-
-	renderToNodeStream() v3.0	-	-
-	pipeToNodeWritable() v3.0	-	-
-	renderToWebStream() v3.0	-	-
-	pipeToWebWritable() v3.0	-	-
-	renderToSimpleStream() v3.0	-	-
自定义渲染	createRenderer() v3.0	-	-

大纲

• 模板
• Web Components
• 渲染函数
• 强制重新渲染
• 服务端渲染
• 自定义渲染
• 渲染原理

模板

• text/x-template
• template
• <template>
• name
• delimiters
• comments

模板编译

模板转换为渲染函数：

• app.config.compilerOptions
• app.config.compilerOptions.whitespace
• app.config.compilerOptions.delimiters
• app.config.compilerOptions.comments
• Vue.compile()
• vue-loader
  • vue-template-compiler
• vite SFC
  • @vitejs/plugin-vue
  • @vitejs/plugin-vue2

Web Components

• app.config.isCustomElement
• Vue.config.ignoredElements
• defineCustomElement()
• customElements.define()
• useShadowRoot()
• useHost()
• $host()

渲染函数

• render()
• h()
  • createElement()
• mergeProps()
• resolveComponent()
• resolveDirective()
• withDirectives()
• withModifiers()
• isVNode()
• cloneVNode()

强制重新函数

• $forceUpdate()

$forceUpdate() 可以强制组件实例重新渲染。

信息

考虑到 Vue 的全自动响应式系统，这应该很少需要。唯一可能需要它的情况是当你使用高级响应式 API 显式创建非响应式组件状态时。

JSX

在 Vue 中写 JSX 语法风格的组件需要 babel-plugin-transform-vue-jsx babel 插件提供转换支持。

• vue-cli
  • babel-plugin-transform-vue-jsx
• vite
  • @vitejs/plugin-vue-jsx
  • @vitejs/plugin-vue2-jsx

服务端函数

• createSSRApp()
• useSSRContext()
• $isServer
• renderToString()
• renderToNodeStream()
• pipeToNodeWritable()
• renderToWebStream()
• pipeToWebWritable()
• renderToSimpleStream()
• https://v2.cn.vuejs.org/v2/guide/ssr.html
• https://v2.ssr.vuejs.org/zh/

自定义函数

• createRenderer()

函数原理