Vue3 渲染函数是 Vue3 中最重要的一个特性,它可以让开发者更加灵活地使用 Vue 来创建应用。
Vue3 渲染函数是一种新的方式来定义 Vue 组件,它可以让开发者使用 JavaScript 函数来定义组件,而不是使用 HTML 模板。这样做的好处是,开发者可以使用 JavaScript 函数来实现更复杂的功能,而不需要写大量的 HTML 代码。
Vue3 渲染函数有三个主要部分:render、setup 和 props。render 函数是必须的,它会返回一个 VNode 对象(Virtual DOM 节点对象)。setup 函数是可选的,它会在组件初始化时执行一些代码。props 是一个对象,用于声明该组件接收哪些 props。
const MyComponent = { props: { name: String, age: Number, }, setup(props) { // do something with props return () => { // render function return h('div', [`My name is ${props.name} and I am ${props.age} years old`]) // returns a VNode object } } }
此更改不会影响 <template>
用户。
以下是更改的简要总结:
h
现在全局导入,而不是作为参数传递给渲染函数更多信息,请继续阅读!
在 2.x 中,e render
函数将自动接收 h
函数 (它是 createElement
的常规别名) 作为参数:
// Vue 2 渲染函数示例
export default {
render(h) {
return h("div")
}
}
在 3.x 中,h
现在是全局导入的,而不是作为参数自动传递。
// Vue 3 渲染函数示例
import { h } from "vue"
export default {
render() {
return h("div")
}
}
在 2.x 中,render
函数自动接收诸如 h
之类的参数。
// Vue 2 渲染函数示例
export default {
render(h) {
return h("div")
}
}
在 3.x 中,由于 render
函数不再接收任何参数,它将主要用于 setup()
函数内部。这还有一个好处:可以访问作用域中声明的响应式状态和函数,以及传递给 setup()
的参数。
import { h, reactive } from "vue"
export default {
setup(props, { slots, attrs, emit }) {
const state = reactive({
count: 0
})
function increment() {
state.count++
}
// 返回render函数
return () =>
h(
"div",
{
onClick: increment
},
state.count
)
}
}
有关 setup()
如何工作的详细信息,参考组合式 API 指南。
在 2.x 中,domProps
包含 VNode props 中的嵌套列表:
// 2.x
{
class: ["button", "is-outlined"],
style: { color: "#34495E" },
attrs: { id: "submit" },
domProps: { innerHTML: "" },
on: { click: submitForm },
key: "submit-button"
}
在 3.x 中,整个 VNode props 结构是扁平的,使用上面的例子,下面是它现在的样子
// 3.x 语法
{
class: ["button", "is-outlined"],
style: { color: "#34495E" },
id: "submit",
innerHTML: "",
onClick: submitForm,
key: "submit-button"
}
全局导入 h
意味着任何包含 Vue 组件的库都将在某处包含 import { h } from "vue"
,因此,这会带来一些开销,因为它需要库作者在其构建设置中正确配置 Vue 的外部化:
见 Render 函数指南更详细的文档!
在 Vue 3 中,改变全局 Vue 行为的 API 现在被移动到了由新的 createApp 方法所创建的应用实例上。此外,现在它们的影响仅限于该...
本节例子中代码使用的单文件组件语法#reactive返回对象的响应式副本const obj = reactive({ count: 0 })响应式转换是“深层”的...
Python安装过程请看这里:Python3 安装,我就不在这多做说明了。安装完成后,我们就可以在Sublime Text3中编辑运行python代码了...
在MariaDB数据库管理系统中,一个数据库可以存放多个数据表,数据表单是数据库中最重要最核心的内容。我们可以根据自己的需求自...
Manpage 帮助UNIX 命令都有许多可选的和强制性的选项,而忘记这些命令的完整语法是很常见的事情。因为没有人能记住每个 UNIX 命...