vue jsx

一个分别用template，jsx，渲染函数写的简单todoList
Vue-cli创建的项目可以直接使用jsx，只需要在script标签上加上lang="jsx"

不再使用template声明模板，而是在setup函数中返回模板，第一次知道setup还能返回模板。其实setup可以返回两种类型

1. 返回一个对象时，该对象中的所有属性和方法都会被暴露给模板
2. 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>

1. 插值由{ {}}变成{}

  return () => ( <><div>{
   Date.now()}</div></>)

1. 替代v-if,使用三目运算符(使用ref，不会自动解包)

  const num = ref(2);
    return () => (
      <>{
   num.value > 1 ? <div>that is true</div> : <div>that is false</div>}</>
    );

1. 替代v-for,使用map,因为会返回一个新数组

    const obj = reactive([{
    label: "上班", key: 1 }, {
    label: "打游戏", key: 2 }]);
    const element=obj.map(item=><div>{
   item.label}</div>)
    return () => (
      <>{
   element}</>
    )

1. 修改样式class style

直接写class，不需要像react一样写className,style的写法与react相同两个大括号，可以理解为内层的大括号是属于对象的

<div class="app" style={
   {
   fontSize:"29px"}}>{
   item.label}</div>

1. v-model v-bind

v-bind不需要写：，直接用大括号包裹

 return () => <><input v-model={
   num.value } title={
   num.value} /></>;

1. 处理事件

不再使用@简写，统一为on+事件名

    function alert1(){
   
      alert("被点击")
    }
    return () => <><div onClick={
   alert1}>点击</div></>;

1. props

同样要先声明

props:['title'],
  setup(props) {
   
    return () => <><div>{
   props.title}</div></>;
  },

1. emit

onClick里面是函数，不是函数的执行

 emits:['myEvent'],
  setup(props, context) {
   
    const {
   emit} =context
    return () => <><div onClick={
   ()=>emit('myEvent')}>{
   props.title}</div></>;
  },

render函数

Vue 提供了一个 h() 函数用于创建 vnodes

1. 第一个参数可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义 必填
2. 第二个参数是一个对象表示传递的 prop 选填
3. 第三个参数是子节点 选填 （字符或数组）

如果使用了第三方组件库需要用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,
          }),