vue中vuex的用法,js vuex
本文主要介绍在vue中正确使用jsx的相关信息。JSX是一种结合了Javascript和XML的格式。React发明了JSX，它使用HTML语法来创建虚拟DOM。当遇到JSX时，将被解释为HTML，当遇到{时，将被解释为JavaScript。有需要的朋友可以参考一下。
目录
前言
虚拟DOM
什么是虚拟DOM？
虚拟DOM的优势渲染功能是什么？
小艾
在vue3中编写jsx的两种方法
上次使用
涉及
前言
又到了快乐钓鱼的时候了，我觉得不能放弃。我一直在用vant做H5页面。出于对源代码的好奇，我从git上拉了一份vant源代码，里面全是jsx写的组件，于是我开始了在vue中使用jsx的探索。
虚拟DOM
什么是虚拟DOM
在此之前，我们先来了解一下虚拟dom。vue和react框架都在内部使用虚拟DOM。之所以这样，是因为通过js操作DOM的计算成本非常高。虽然js更新很快，但是查找和更新DOM的成本很高。那么怎么做才能优化呢？vue等框架使用js对象，通过改变js对象，最后进行批处理，DOM更新一次，所以虚拟DOM本质上是一个js对象。
虚拟DOM的优点
从原来操作真实DOM到虚拟DOM，降低了搜索成本。
通过diff比较，可以更快的定位数据的变化，从而更新DOM。
更好的用户界面更新
抽象渲染过程带来了实现跨平台的能力，比如vue3中的createRenderer API。
渲染函数是什么
渲染函数用于生成虚拟DOM。我们在vue单个文件中编写模板语法，最终会编译成底层实现中的渲染函数。
Vue建议在绝大多数情况下使用模板来创建你的HTML。但是，在某些场景下，你真的需要JavaScript完整的编程能力。这时候就可以使用渲染函数了，渲染函数比模板更接近编译器。
当下面的场景出现时，下面的写法虽然可以达到想要的效果，但是不仅冗长，而且我们对于每一个关卡标题都是重复的写。当我们添加锚元素时，我们必须在每个v-if/v-else-if分支中再次重复它。
const { createApp }=Vue
const app=createApp({})
app.component(锚定标题，{
模板：` 1
h1 v-if=level===1
插槽/插槽
/h1
h2 v-else-if=level===2
插槽/插槽
/h2
h3 v-else-if=level===3
插槽/插槽
/h3
h4 v-else-if=level===4
插槽/插槽
/h4
h5 v-else-if=level===5
插槽/插槽
/h5
h6 v-else-if=level===6
插槽/插槽
/h6
`,
道具：{
级别：{
类型：数量，
必填：真
}
}
})
虽然模板在大多数组件中非常有用，但在这里显然不合适。因此，让我们尝试使用render函数重写上面的示例：
const { createApp，h }=Vue
const app=createApp({})
app.component(锚定标题，{
render() {
返回h(
h this.level，//标记名
{}，//属性/特性
这个。$slots.default() //子级数组
)
},
道具：{
级别：{
类型：数量，
必填：真
}
}
})
jsx
这样写渲染函数有点痛苦。有没有办法把它们写得更接近模板？vue提供了一个babel-plugin-jsx babel插件，让vue支持jsx编写。
在我这里使用的vuecli创建的vue3 ts项目中，脚手架已经集成了jsx和ts的相关依赖项。
在vue3中编写jsx的两种方式
直接将文件后缀名称从vue改为tsx或jsx。
在vue3中，可以使用render选项直接编写。
从“vue”导入{ define component }；
导出默认定义组件({
名称： Jsx ，
render() {
返回div我是一个div/div；
},
});
您也可以在设置中返回。
从“vue”导入{ define component }；
导出默认定义组件({
名称： Jsx ，
setup() {
Return ()=div我是div/div；
},
});
无论哪种方式，取决于个人习惯，在setup中无法访问这个，但是在render中可以通过这个访问当前的vue实例。
用法
班级绑定，和反应的小艾绑定的有区别，反应过来中使用类名，vue中使用班级
setup() {
return ()=div class=test 我是div/div；
},
风格绑定
setup() {
return()=div style={ { color: red } }我是div/div；
},
小道具绑定
//父组件
setup() {
return ()=(
div style={{ color: red }}
跨度我是父组件/span
前川消息={ 我是父组件传的值} /
/div
);
//子组件，设置的第一个参数，可以获取小道具里的值
设置（道具){
return ()=div我是子组件{道具。msg }/div；
},
事件绑定
setup() {
函数eventClick() {
console.log(点击);
}
return()=button onClick={事件单击}按钮/按钮；
},
组件自定义事件
//子组件
从“vue”导入{定义组件}；
导出默认定义组件({
名称： Mycom ，
发出：[event]，
设置（道具，{ emit }) {
函数sendData() {
发出(事件,子组件传递的数据);
}
return ()=(
差异
跨度自定义事件/span
button onClick={sendData}传递数据/按钮
/div
);
},
});
//父组件
//@ts-nocheck
//这样写在小艾中没问题，但是在多伦多股票交易所中会报分时（同分时)类型错误，所以我在上面忽略了当前文件分时（同分时)监测@ts-nocheck
从“vue”导入{定义组件}；
从导入我的com ./mycom ；
导出默认定义组件({
名称： Jsx ，
setup() {
函数getSon(msg: string) {
控制台。日志(消息)；
}
return ()=(
差异
Mycom onEvent={getSon} /
/div
);
},
});
也可以这样解决分时（同分时)类型报错
setup() {
函数getSon(msg: string) {
控制台。日志(消息)；
}
return ()=(
差异
Mycom {.{ onEvent: getSon }} /
/div
);
},
插槽
//父组件
setup() {
常量插槽={
测试：()=div具名插槽/div，
默认值：()=div默认插槽/div，
};
return ()=(
差异
垂直插槽={slots}/Mycom
/div
);
},
设置（道具，{插槽}) {
//子组件
return ()=(
差异
跨度插槽/span
{插槽。违约？()}
{插槽。测试？()}
/div
);
},
指令，v-if，v-for等指令在小艾中无法使用，jsx只支持v型车和虚拟展示指令
setup() {
const输入数据=ref()；
return ()=(
差异
span v-show={true}显示/span
span v-show={false}隐藏/span
输入类型= text v-model={输入数据。值}/
跨度{输入数据。值}/span
/div
);
},
最后
话不多说，我先打开栈源码，准备开启我的第一个组件源码阅读src=button=button.tsx
到此这篇关于某视频剪辑软件中正确使用小艾的文章就介绍到这了，更多相关某视频剪辑软件中使用小艾内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
参考
某视频剪辑软件渲染函数
vuejsx文档
问题
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。