• ll
    2021-11-15
    厉害，看大圣的课，脑中就会涌现出以前学过用过的知识，然后随着文章的推进，这些知识就分条屡清了；然后查漏补缺，最后汇聚到一起，为自己所用。 一点回顾： 1. template vs Jsx 直观感觉是“殊途同归”。 先说同归，这两终都会产出“虚拟DOM”； 然后 “殊途”，React 的 Jsx 在这方面很“单纯”就提供“虚拟DOM”，也正因为单纯，“性能”方 面的问题，很大一部分由使用者决定。 Vue 的 template 像是先定个框架，有些“规则”，就是 v-if 之类的语法，然后使用者 “照猫画虎”，做出来的东西不至于有太大的“坑”。“性能”方面的优化，大部分框架内就 主要负责了。 2. 有什么区别 React 这种灵活，使得它使用 "门槛" 高一点；而 Vue 在使用门槛稍低，但在有些业务 场景下 template 的 "灵活度" 就较低。 但是 Vue 较 React 有个优势，就是 Vue 也提供 JSX，你可以根据使用场景选择，这方 面是“灵活的” 3. 一点感想 要说殊途同归，框架最终还是一样，用JS在浏览器上操纵DOM；这里有几个点，JS，浏览 器，DOM；你看这几个怎么联系起来？很神奇，vue-devtools，上节课的 devtools，这 是不是 callback 呢。
    展开

    作者回复: cool

    
    28
  • 关关君
    2021-11-19
    今天跟着老师的代码做练习的时候控制台报错说没有 defineConfig 一看版本vite才是1.0的，如果遇到和我一样的问题的同学先卸载 "npm un vite" 然后重新安装新版本的vite "npm install vite@latest -D"

    作者回复: 很棒的提醒

    
    3
  • gongshun
    2021-11-16
    <component :is="'h'+ level"></component> 这样就可以实现了，jsx是多余

    作者回复: 这个h是官网举的例子，简单的vue-router实现那一讲里我也用了component，灵活性更高的场景jsx是必须的

    
    2
  • mixiuu
    2021-11-16
    老师，我想问下，在cli创建的vue3中，使用setup+jsx的方式会报错（TypeError: Cannot read properties of undefined (reading '$createElement')），我在babel.config.js中已添加： "plugins": ["@vue/babel-plugin-jsx"]，这是为什么呢

    作者回复: 有详细的代码吗？这个配置看起来是OK的

    
    1
  • 酱汁
    2021-11-15
    想问下老师开源组件库种中 这种组合方式 jsx怎么实现的 <tabs> <tab-pane> 内容1 </tab-pane> <tab-pane> 内容2 </tab-pane> <tab-pane> 内容3 </tab-pane> </tabs>

    作者回复: jsx中这种嵌套其实也是slot const A = (props, { slots }) => ( <> <h1>{ slots.default ? slots.default() : 'foo' }</h1> <h2>{ slots.bar?.() }</h2> </> ); const App = { setup() { const slots = { bar: () => <span>B</span>, }; return () => ( <A v-slots={slots}> <div>A</div> </A> ); }, }; // or const App = { setup() { const slots = { default: () => <div>A</div>, bar: () => <span>B</span>, }; return () => <A v-slots={slots} />; }, };

    共 3 条评论
    1
  • 张飞蓬
    2022-01-12
    然后是 @click 函数增加了一个 cache 缓存层，这样实现出来的效果也是和静态提升类似，尽可能高效地利用缓存。最后是，由于在下面代码中的属性里，那些带冒号的属性是动态属性，因而存在使用一个数字去标记标签的动态情况。比如在 p 标签上，使用 8 这个数字标记当前标签时，只有 props 是动态的。而在虚拟 DOM 计算 Diff 的过程中，可以忽略掉 class 和文本的计算，这也是 Vue 3 的虚拟 DOM 能够比 Vue 2 快的一个重要原因。 没看懂这个啥缓存层呢

    作者回复: 这个缓存其实就是一个对象，因为@click传递的箭头函数，无论函数有没有变化，两个函数的比较都会是false，需要更新这个事件，用对象缓存对象的话，虚拟dom diff的时候就可以判断出函数是一个对象，可以越过diff的计算

    共 2 条评论
    
  • 百事可乐
    2021-11-19
    大圣老师。 我怎么从vue 文件向 jsx文件中传递参数呢？ <Todolist :valueData='123'/> setup(props) { console.log(props); } 这个 props 是这个空对象

    作者回复: defineProps声明一下props

    共 3 条评论
    
  • 小余GUNDAM
    2021-11-19
    老师 vue3的 jsx能享受 编译优化 例如静态节点跳过diff吗

    作者回复: 能享受一部分

    
    
  • uncle 邦
    2021-11-15
    vue2 可以使用jsx么？

    作者回复: 也可以的，有专门的vue2的jsx插件

    
    
  • tequ1lAneio
    2021-11-15
    为什么我的input用jsx的话无论是keyup还是keydown都绑定不上事件？

    作者回复: 有详细的代码吗？

    共 2 条评论
    