01｜编译和非编译模式：离开Vue工具，你还知道怎么用Vue 3吗？

这个念经试的朗读听着脑瓜子疼

Vue.js 3 非编译场景与 Vue.js 的 JSX 写法有什么联系吗？ jsx写法是一个语法糖，最后会通过编译工具（babel）转化成 “非编译模式”的代码

不论是createElementVNode、h、template、jsx都是为了生成vnode。h和createElementVNode用js写dom方式不友好，但是灵活。template和jsx用html写dom方式友好，但是templated不够灵活。jsx不仅拥有友好的书写方式，而且还可以通过{}实现动态值。

示例图好好看 是用什么软件画的呀

Vue.js 3 非编译场景与 Vue.js 的 JSX 写法有什么联系吗？ jsx的写法是来源自react，我想 Vue.js 的 JSX ，是可以帮助react开发者用熟悉的方式快速使用vue； Vue.js 的 JSX 写法 会编译转化成 Vue.js 3 非编译场景的代码；

Vue.js 3 非编译场景与 Vue.js 的 JSX 写法有什么联系吗？ jsx本质上还是需要走一段babel的编译过程，编译成vue可以识别的内容后再走vue的编译，好处是有的时候在编写代码的时候会更加的方便一点 对与运行时编译我有一个疑问，现在很多时候一些低代码的实现并不在浏览器端产出新的代码，而是通过一些渲染器之类的设计将json数据渲染成组件，对比将json数据转成实际的代码再进行vue运行时编译的方案的优劣是什么呢？ 这样做性能会更加快并且后续的代码好维护吗？

Vue.js 3 非编译场景与 Vue.js 的 JSX 写法有什么联系吗？ jsx和vue.js3非编译场景都是为了表现vNode，jsx更方便开发者理解和书写，jsx最终会被编译成非编译模式

浏览器直接运行，是指谷歌浏览器调试控制台直接运行吗

浏览器直接运行，是指比如 google浏览器的调试控制台，直接复制运行下面的? import { toDisplayString, createElementVNode, openBlock, createElementBlock, ref, } from "Vue.js"; const _hoisted_1 = { class: "v-counter" } const _hoisted_2 = { class: "v-text" } const __sfc__ = { __name: 'App', setup(__props) { const num = ref(0) const click = () => { num.value += 1; } return (_ctx, _cache) => { return (openBlock(), createElementBlock("div", _hoisted_1, [ createElementVNode( "div", _hoisted_2, toDisplayString(num.value), 1), createElementVNode("button", { class: "v-btn", onClick: click }, "点击数字加1") ])) } } } __sfc__.__file = "counter.Vue.js" export default __sfc__

Vue.js 3的非编译场景与JSX写法之间的联系在于，JSX作为一种语法糖，它允许开发者使用类似HTML的标记语法来编写Vue组件。这种写法直观且易于理解，特别是对于熟悉HTML的开发者来说。JSX最终会被Babel编译器转换成Vue.js 3的非编译模式代码，这种代码是Vue.js虚拟DOM（vNode）的表现形式，是非编译场景下的标准写法。 在非编译场景下，Vue.js 3使用<template>标签来编写模板代码，这些模板代码会被编译成JavaScript中的vNode对象。而使用JSX时，开发者可以直接编写出这些vNode的结构，从而在源代码中更清晰地看到最终渲染的HTML结构，这样做有以下好处： ● 代码可读性：JSX的标记语法让代码更接近最终渲染的结果，提高了代码的可读性。 ● 开发体验：JSX可以提供更好的开发体验，例如在IDE中提供更好的自动完成和错误检查功能。 ● 递归组件：在处理递归组件时，JSX可以更容易地表达递归的模板结构。