一个分别用template，jsx，渲染函数写的简单todoList
Vue-cli创建的项目可以直接使用jsx，只需要在script标签上加上lang="jsx"
不再使用template声明模板，而是在setup函数中返回模板，第一次知道setup还能返回模板。其实setup可以返回两种类型
- 返回一个对象时，该对象中的所有属性和方法都会被暴露给模板
setup也可以返回一个渲染函数，此时在渲染函数中可以直接使用在同一作用域下声明的响应式状态：
然而。。渲染函数很难编写，而且不好理解。所以就有了jsx,与React很相似,所以说jsx是渲染函数的语法糖。
jsx
先用脚手架创建一个Vue3项目，将下面替换App.vue的内容。运行项目页面就可以展示hhh.
<script lang="jsx">
import {
defineComponent,ref } from 'Vue'
export default defineComponent({
setup(props) {
const num=ref(0)
return () => ( <><div>hhh</div></>)
},
})
</script>
<style lang="less">
</style>
- 插值由
{ {}}变成{}
return () => ( <><div>{
Date.now()}</div></>)
- 替代v-if,使用三目运算符(使用ref，
不会自动解包)
const num = ref(2);
return () => (
<>{
num.value > 1 ? <div>that is true</div> : <div>that is false</div>}</>
);
- 替代v-for,使用map,因为会返回一个新数组
const obj = reactive([{
label: "上班", key: 1 }, {
label: "打游戏", key: 2 }]);
const element=obj.map(item=><div>{
item.label}</div>)
return () => (
<>{
element}</>
)
- 修改样式class style
直接写class，不需要像react一样写className,style的写法与react相同两个大括号，可以理解为内层的大括号是属于对象的
<div class="app" style={
{
fontSize:"29px"}}>{
item.label}</div>
- v-model v-bind
v-bind不需要写：，直接用大括号包裹
return () => <><input v-model={
num.value } title={
num.value} /></>;
- 处理事件
不再使用@简写，统一为on+事件名
function alert1(){
alert("被点击")
}
return () => <><div onClick={
alert1}>点击</div></>;
- props
同样要先声明
props:['title'],
setup(props) {
return () => <><div>{
props.title}</div></>;
},
- emit
onClick里面是函数，不是函数的执行
emits:['myEvent'],
setup(props, context) {
const {
emit} =context
return () => <><div onClick={
()=>emit('myEvent')}>{
props.title}</div></>;
},
render函数
Vue 提供了一个 h() 函数用于创建 vnodes
- 第一个参数可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义
必填 - 第二个参数是一个对象表示传递的 prop
选填 - 第三个参数是子节点
选填（字符或数组）
如果使用了第三方组件库需要用resolveComponent包裹
h(
resolveComponent("el-button"),
{
onClick: addTodo, style: {
marginTop: "20px" } },
"Add Task"
),
v-model 指令扩展为 modelValue 和 onUpdate:modelValue
h(resolveComponent("el-input"), {
modelValue: newTodo.value,
"onUpdate:modelValue": (value) => (newTodo.value = value),
placeholder: "Add a new task",
onKeyup_enter: addTodo,
}),
