谈谈 Vue 模板和 JSX

工具链 从学习曲线角度来讲,连系我小我私家体会,React 学习门路是比 Vue 陡峭的,这个和 JSX、Template 有关吗?当然有。在 React 中使用 JSX,众所周知…

工具链

从学习曲线角度来讲,连系我小我私家体会,React 学习门路是比 Vue 陡峭的,这个和 JSX、Template 有关吗?当然有。在 React 中使用 JSX,众所周知, JSX 需要经由 Transform 才气在浏览器中运行。马上就有小伙伴反驳了,Vue 有官方的 Vue-cli, React 使用 create-react-app 初始化项目就好了呀,并不需要比 Vue 多学习其他工具呀。

我们从另一个角度来看这个问题,使用 JSX 还需要熟练 ESM,这是绕不开的,由于一个 React 组件就是一个 js 或 JSX,这可能会给新手带来疑惑,组件是若何链接的?先别着急反驳,接着往下看。

仅仅掌握“三剑客”的新手就可以轻松上手 Vue,这在 Vue 官方文档中有所体现。

巧妙之处就在与上图中的 “易用”,仅仅学会了 HTML、CSS、JavaScript 就能上手。Vue 的“渐进式”不仅体现在追随项目的庞大度上的,另有很大程度上顺应使用者的水平。这不是空穴来风,昔时不才就仅学习了这“三剑客”,就用 Vue-cli 初始化并完成了小项目。现在我思索在那时 Vue 是若何帮我避开 ESM 的。谜底在于 vue 的“三段式结构”。

<script>
export defalut  {
  // ...
} 
</script>

我的注重点完全在于导出的这个工具之中以及上方的 Template 和下方的 Style,只知道在这个工具内里写一些 Data、Methods 等等。甚至完全没有在意 export defalut 这个关键字。

不仅如此,Vue 的 Template + Options API 基本就规范了处置一些逻辑时的大要形式,这在通过搜索引擎检索一些遇到的问题时,通常能够容易看懂检索到的代码,甚至可以“依葫芦画瓢”,这对新手无疑是一个优势。相比 JSX, 写法上,Template 虽不能够从“优雅”上胜出,但 JSX 更容易带入小我私家编码气概,这应该能使人人有所认同,这也就加大了新手的明白难度。

回到问题,那么 Vue 是若何引入组件的呢?作为新手,我只会“依葫芦画瓢”,通过一条 import 语句导入进来,然后在 components 内里将组件注册,这一切都被我自然得误认为是 Vue 的能力。

这不代表使用 Vue 不需要学习 ESM,没错,这是究极需要的,熟悉 ESM 可以更好得组织项目代码。上面我只是在思索昔时 Vue 是怎么帮我避开 ESM 的,或者说我作为新手时是若何毫无察觉地避开它的,Template “功不可没”

题外话,Vue 的 Template 可以放到 Script 标签下方,这可能更相符 React 用户的直觉,看尤大在推上分享一些 Demo 时有时会这么写。若是您愿意,也可以这么做,但在多人协作的项目中还要思量小伙伴的感受。

<script>
export defalut  {
  // ...
} 
</script>

<template>
  
</template>

Vue + JSX = React?

所谓“萝卜白菜,各有所爱”。在 React 中只能使用 JSX,Vue 从 2.0 最先爽性把 JSX 也支持完事了。有人说,在 Vue 中使用 JSX 为什么不直接使用 react? 这个话题就大了,这不仅和项目的手艺选型有关,且 Vue 和 React 设计上就有很大差异。在 Vue 中无论使用 Template 照样 JSX 都会被编译成 h 函数(在 Vue 2 中称为 render 函数)。以是,在 Vue 中使用 JSX,只是换了一种显示形式而已。

我们来看一下 Vue 将 Template 渲染到浏览器的历程。

<div>Hello</div>

这个HTML也可以通过一个虚拟节点 VNode 来示意,也就是用 JavaScript 工具的形式来示意。

{
    tag: 'div',
    children: [
        {
            text: 'Hello'
        }
    ]
}

Vue 知道若何将此虚拟节点并挂载到 DOM 上,它会更新我们在浏览器中看到的内容,然则 VNode 从哪里来的呢?现实另有一个步骤,Vue 基于我们的 Template 建立一个渲染函数,返回一个虚拟 DOM 节点。

渲染函数可以是这样的:

render(h) {
    return h('div', 'hello')
}

当组件更改时,Render 函数将重新运行,它将建立另一个虚拟节点。然后发送旧的 VNode 和新的 VNode 到 Vue中举行对照并以最高效的方式在我们的网页上更新。例如下图所示,仅仅更新了文本内容。

题外话,现实 Vue 有三个焦点模块:

  1. Reactivity Module 响应式模块
  2. Compiler Module 编译器模块
  3. Renderer Module 渲染模块

响应式模块允许建立 JavaScript 响应工具并可以考察其转变。当使用工具的代码运行时,它们会被跟踪,因此,它们可以在响应工具发生转变后运行。

对CROS OPTIONS预检请求的一些思考

编译器模块获取 HTML 模板并将它们编译成渲染函数。这可能在运行时在浏览器中发生,但在构建 Vue 项目时更常见。这样浏览器就可以只吸收渲染函数。

渲染模块在网页上渲染组件履历三个差别阶段:在渲染阶段,将挪用 render 函数,它返回一个虚拟 DOM 节点;在挂载阶段,使用虚拟 DOM 节点并挪用 DOM API 来建立网页;在补丁阶段,渲染器将旧的虚拟节点和新的虚拟节点举行对照并只更新转变的部门。

上面是 Vue 将 Template 渲染到浏览器的历程,和 Template 类似,在 Vue 中使用的 JSX 也会转化成 h 函数,眼见为实。

以是,领会这个历程,您可能不是那么排挤在 Vue 中使用 JSX 了,或者或许对它在 Vue 中的显示不是那么陌生了。

从另一个方面来讲,Vue 中的 JSX 和 React 中的 JSX 在写法上也有差异。在 Vue JSX 中您可以直接使用熟悉的指令(directives),例如 Vue 内置的 v-show 、 v-model 甚至 v-models 和自界说指令,但例如 slots 在 Vue JSX 中或许没有在 React 中那么利便。

“团结”的能力

在 Vue sfc(single file component)中同时编辑 script、template、style,这提供了“团结”的能力,即在一个文件中使 Style 和 Template 共享 Script,辅助开发者更容易实现营业。例如:rfcs-style-variables,该提案虽然还没有最终确定下来,但 Vue 展示了这种能力。基础示例:

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data:()=> ({
    color: 'red',
    font: {
      size: '2em'
    }
  })
}
</script>

<style>
.text {
  color: v-bind(color);

  /* expressions (wrap in quotes) */
  font-size: v-bind('font.size');
}
</style>

通过 style-variables 写有一个有趣的示例,此处为部门代码。

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup() {
        const inputBorderColor = ref('')
        
        const onEngineChange = engine => {
            for (const { name, color } of enginesData) {
                if (name === engine) {
                    inputBorderColor.value = color
                    return
                }
            }
        }
        
        return {
            inputBorderColor,
        }
    },
})
</script>

<style lang="scss">
input {
  &:focus {
    border-color: v-bind(inputBorderColor);
  }
}
</style>

谈谈 Vue 模板和 JSX-fm分享网
若是在 Vue 中使用 JSX, 就无法行使这个优势了。题外话,在 React 中类似的 css-in-js 方案是 styled-component。

营业组件库

Vue 险些所有面向营业构建的生态内容给出的示例代码都是基于 Template 的。我们通常在项目中安装 UI 组件库依赖,组件库中给出的示例代码也是基于 Template 的。当前 Vue 组件库文档示例代码正在由 Options API 向 Composition API 过渡,但险些没有可能从 Template 向 JSX 过渡,或者向用户提供 JSX 的组件示例代码。这非常重要,若是您的项目依赖组件库,查看文档后还需要将 Template 转到 JSX,这无疑增添开发成本。

TypeScript 支持

在 script 中,vue3 相比 vue2 已经泛起质的飞跃。从 Template 来看,Vue 另有待完善,但这个可行的。JSX 一最先也没有类型支持,完全是 TS 给加了一套针对 JSX 的推导机制。

模版和类型推导,表面上看,隔了一层模版语法 + 编译,似乎确实存在 “断层”,但实在内里没您想的差那么远。Vue 的模版是编译成 virtual dom 渲染函数的,天生的 js 跟 React 的渲染函数一样可以类型推导,而模版跟天生的 js 之间是完整的逻辑映射,以是这里实在主要是需要做一些工具链上的衔接,把对天生的 js 剖析出来的 intellisense 反馈到 IDE 里的模版上。手艺上是完全可行的。

vscode 插件 Volar 已经支持 Template 表达式的类型检查。Vetur 虽然不支持还未定稿的 RFC,也已经支持基于现有 API 的模板类型检查和组件 props 类型检查了。另外,在 vue3 中无论是否使用 TS,通过 defineComponent 界说组件都能获得更好的提醒。
谈谈 Vue 模板和 JSX-fm分享网
可以预见的是,Vue 从升级 3.0 后,对于 TypeScript 的支持将会越来越好。

适用场景

在大多数场景下(尤其是营业场景)使用 Template 可能是更好的选择, vue3 基于 Template 剖析做了大量的优化,而使用 JSX 需要手动做一些优化。

JSX 由于更具灵活性,通常一些组件库的不二之选,例如:Ant Design Vue、Vant、Element Plus(部门使用)。看到这么个例子: 凭据 props 上的 reverse 属性,决议是否要换取两块内容的顺序。使用 JSX 容易就能实现,且可读性也很高。

const renderContent = () => {
  const Content = [
    <div class="foo">Foo DOM...</div>,
    <div class="bar">Bar DOM...</div>,
  ];
  if (props.reverse) Content.reverse();
  return <div>{Content}</div>;
}

若是通过模板来实现,在不抽象子组件的情况下,foo 和 bar 的模板结构需要重复写两遍,才气知足这个需求:

<template>
  <div>
    <template v-if="reverse">
      <div class="bar">Bar DOM...</div>
      <div class="foo">Foo DOM...</div>
    </template>
    <template v-else>
      <div class="foo">Foo DOM...</div>
      <div class="bar">Bar DOM...</div>
    </template>
  </div>
</template>

因此,在动态性强的场景下,JSX 会有一定优势。Composition API + JSX 是某些场景下追求极致的选择,响应地需要支出更多开发成本。

参考资料:

[1] https://www.zhihu.com/question/436260027/answer/1647182157
[2] https://www.zhihu.com/question/310485097/answer/591869966
[3] https://www.cnblogs.com/guangzan/p/13358322.html

Net/NetCore/.NET5 ORM 六大查询体系 - SqlSugar 高级篇

作者: admin

相关推荐

发表评论

邮箱地址不会被公开。 必填项已用*标注

友情链接