vue 模板的本质是渲染函数

最新推荐文章于 2024-07-22 22:34:33 发布

lefex

最新推荐文章于 2024-07-22 22:34:33 发布

阅读量807

点赞数 1

文章标签： vue html css js javascript

本文链接：https://blog.csdn.net/lefex/article/details/111244051

版权

本文深入探讨Vue模板的原理，包括数据绑定、v-if/v-for指令、class与style绑定、事件处理等，揭示模板如何转换成渲染函数，进而理解虚拟DOM与真实DOM的关系，实现页面动态更新。

摘要由CSDN通过智能技术生成

上节内容我们学习了 Vue 组件的本质，这节内容看看 vue 模板的本质是什么。

模板 - 内容的承载体

Vue 在渲染组件的时候，需要使用者提供一个渲染模板或者渲染函数。渲染模板就是一个HTML字符串，中间加入了一些Vue特制的语法规则，这样能够让 Vue 把数据和模板进行了绑定，当数据发生变化时会让页面能够及时刷新。这节内容，我们学习一下 Vue 的模板及其本质。

数据绑定

通过双大括号把属性与模板进行绑定，当属性变化时页面也会实时更新。双大括号中可以是：

data 或 props 中声明的属性；
计算属性；
JS 表达式；

<!-- title 可以是一个计算属性 -->
<div>{
   { title }}</div>

<!-- 可接收 JS 表达式 -->
<div>{
   { age + 1 }}</div>
<div>{
   { age > 18 ? '大朋友' : '小朋友' }}</div>

经过编译后的渲染函数（render）：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _createVNode("div", null, _toDisplayString(_ctx.title), 1 /* TEXT */),
    _createCommentVNode(" 可接收 JS 表达式 "),
    _createVNode("div", null, _toDisplayString(_ctx.age + 1), 1 /* TEXT */),
    _createVNode("div", null, _toDisplayString(_ctx.age > 18 ? '大朋友' : '小朋友'), 1 /* TEXT */)
  ], 64 /* STABLE_FRAGMENT */))
}

指令 v-if

v-if 指令如同编程语言中的 if 条件语句，使用方法可以参考编程语言中的 if 语句，根据不同的条件来渲染不同的模板。v-if 内容部分只要是一个表达式即可，可以使用 v-else-if 和 v-else。

<!-- v-if 条件渲染 -->
<h1 v-if="age < 18">我是小朋友</h1>
<h1 v-else-if="age > 18 && age < 60">我是中年人</h1>
<h1 v-else>我是老年人</h1>

经过编译后的渲染函数（render）：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_ctx.age < 18)
    ? (_openBlock(), _createBlock("h1", { key: 0 }, "我是小朋友"))
    : (_ctx.age > 18 && _ctx.age < 60)
      ? (_openBlock(), _createBlock("h1", { key: 1 }, "我是中年人"))
      : (_openBlock(), _createBlock("h1", { key: 2 }, "我是老年人"))
}