Turalyon置顶2023-05-13 来自重庆这个念经试的朗读听着脑瓜子疼1- 风太大太大2022-11-21 来自江苏Vue.js 3 非编译场景与 Vue.js 的 JSX 写法有什么联系吗？ jsx写法是一个语法糖，最后会通过编译工具（babel）转化成 “非编译模式”的代码
作者回复: 不错不错
11 - 周大大2022-11-23 来自江苏不论是createElementVNode、h、template、jsx都是为了生成vnode。h和createElementVNode用js写dom方式不友好，但是灵活。template和jsx用html写dom方式友好，但是templated不够灵活。jsx不仅拥有友好的书写方式，而且还可以通过{}实现动态值。
作者回复: 基本都答到了
7 
前端WLOP2022-11-29 来自北京示例图好好看 是用什么软件画的呀编辑回复: keynote ，绘图常用工具，图好看只能说明老师画图技巧到位😎
1
派大心2022-11-23 来自江苏Vue.js 3 非编译场景与 Vue.js 的 JSX 写法有什么联系吗？ jsx的写法是来源自react，我想 Vue.js 的 JSX ，是可以帮助react开发者用熟悉的方式快速使用vue； Vue.js 的 JSX 写法 会编译转化成 Vue.js 3 非编译场景的代码；作者回复: 我觉得这样理解也是有道理的，但jsx比template的动态性要比template灵活一些，这个是最根本的差异。
1
L2023-03-18 来自上海Vue.js 3 非编译场景与 Vue.js 的 JSX 写法有什么联系吗？ jsx本质上还是需要走一段babel的编译过程，编译成vue可以识别的内容后再走vue的编译，好处是有的时候在编写代码的时候会更加的方便一点 对与运行时编译我有一个疑问，现在很多时候一些低代码的实现并不在浏览器端产出新的代码，而是通过一些渲染器之类的设计将json数据渲染成组件，对比将json数据转成实际的代码再进行vue运行时编译的方案的优劣是什么呢？ 这样做性能会更加快并且后续的代码好维护吗？作者回复: “Vue.js的JSX 写法”最终也会经过编译，变成可以在浏览器里直接运行的“非编译写法”。 对于低代码场景，“生产代码”的过程如果在“浏览器运行过程中”，也就是将json数据在浏览中“拼接Vue.js组件”，这个过程可能存在比较多的“计算过程”，同时生产的组件后带来的异常也很难定位排查。 如果“生产代码”的过程是在低代码的“搭建过程”，那么可以基于json数据，转成“语法树”来生成实际的Vue.js组件，对比浏览器生产组件，可以减少一些“计算过程”的耗时。与此同时，搭建过程生产了试纸的Vue.js组件，在运行过程中遇到异常，也比较方便排查定位问题。
power2023-03-07 来自广东Vue.js 3 非编译场景与 Vue.js 的 JSX 写法有什么联系吗？ jsx和vue.js3非编译场景都是为了表现vNode，jsx更方便开发者理解和书写，jsx最终会被编译成非编译模式作者回复: 您好，首先Vue.js的JSX语法只是一种“语法糖”，是为了方便开发者可以选择JSX的语法方式开发代码，最终也是编译成“非编译模式”的代码。
- Geek_b640fe2022-11-23 来自江苏浏览器直接运行，是指谷歌浏览器调试控制台直接运行吗
作者回复: 就是代码不需要经过编译就可以运行，所以称为：浏览器可以直接运行
共 2 条评论 - Geek_b640fe2022-11-23 来自江苏浏览器直接运行，是指比如 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__展开
作者回复: 这是一种方法，只要不经过编译就能运行就是浏览器可以直接运行。比如写在html的script标签里没经过编译工具编译，也算是浏览器直接运行哈
共 2 条评论 
Michaels Geek2023-04-08 来自浙江杨大大，非编译模式demo(demo-counter-with-h.html), Counter的setup为什么要return两次才能正常渲染呢？ ``` const Counter = { setup() { const num = ref(0) const click = () => { num.value++ } // return 第一次 return (_ctx, cache) => { // return 第二次 return h('div', { class: 'v-counter' }, [ h('div', { class: 'v-text' }, toDisplayString(num.value)), h('button', { class: 'v-btn', onClick: click }, '点击加1') ]) } } } ```共 1 条评论