第十三节：Vue3高级之 render/h函数、jsx、自定义指令、teleport、插件

一. render/h函数(了解)

 详见：https://v3.cn.vuejs.org/guide/render-function.html#dom-树

 

 

二. jsx(了解)

 　Vue3.x版本创建的项目使用jsx已经不需要配置babel了。

 代码分享：

<script>
  import HelloWorld from './HelloWorld.vue';
  export default {
    data() {
      return {
        counter: 0
      }
    },
    render() {
      const increment = () => this.counter++;
      const decrement = () => this.counter--;
      return (
        <div>
          <h2>当前计数: {this.counter}</h2>
          <button onClick={increment}>+1</button>
          <button onClick={decrement}>-1</button>
          <HelloWorld>
          </HelloWorld>
        </div>
      )
    }
  }
</script>

View Code