Vue3：代理对象(Proxy)、渲染函数(render)

Proxy 代理对象

const person = { name: "张三" };

// 创建person的代理对象
const p = new Proxy(person, {
    get(target, property) {
        console.log("拦截到获取操作");
        return target[property];
    },
    set(target, property, value) {
        console.log("拦截到修改或新增操作");
        target[property] = value;
    },
});

渲染函数 render

render 函数返回什么，页面中就显示什么。
在vue3 的组合式API 中，渲染函数就是一个函数，名字不固定。
在选项式API中，渲染函数名是固定的。

// 选项式API - JavaScript
export default {
  render () {

  }
}

// 选项式API - TypeScript
defineComponent({
  render() {
    
  },
});

<!-- 组合式API - 语法糖 -->
<script setup lang="ts">
  import { h } from "vue";
  
  const render = () => {
    h(
      // 参数一：元素标签名
    	"div",
      // 参数二：元素属性
      {
        class: "container",
        onclick:function () {
          alert("clicked");
        },
      },
      // 参数三：子元素
      [
        h("span", "我是子元素span"),
        h("span", "我是子元素span"),
        "我是文本",
      ],
    ),
  };
</script>

<template>
	<render />
</template>