Vue2

目录

• 复用
• 杂笔

---

Vue2的背景是在一个功能相对较少的 node版本下，通过大量的语法糖和规范，来解决这些问题

比如 数组修改不能用索引，就用 push或者 Vue.set 来解决这个问题。

复用

在 Vue2 中：

• 如果两个分支的元素类型相同
• 且没有 key

Vue 会尝试复用，只更新它们的属性和文本

杂笔

Vue太抽象了

又能用jsx 又能用vue木板代码。template 由 Vue 编译器解析，TSX/JSX 由 (TypeScript) + Babel 解析

导致你可以在一个文件里面用2种 html衍生模板语法

模板语法 里面又可以用 v-html插入html

实际上用的还是render ，通过木板编译器支持将模板语法转为 render语法

<p>{{ message }}</p> => h('p', this.message)

所以 模板语法也是Vue的特色之一啊

---

render不仅可以写 jsx ，还可以用 h函数来组装结构

render() {
    return h('img', { attrs: { src: this.imageUrl } })
}

// 等价于
render() {
    return <img src={this.imageUrl} />
}

虽然用了 jsx但又不完全jsx

东西都得写在

Vue.component("MyComponent", {
  render() {
    return <div>{this.message}</div>;
  },
});

动态数据需要定义在 data/computed/methods/…… 中，在注册的时候交由Vue来处理

---

然后神秘的事情来了

你的 Vue 组件某个参数（假设叫 content ）支持 solt / funtion / string 3中方式传入数据

请问你有几种方式传入数据？

<script lang="tsx">
// 导入 Button
import { CreateElement } from "vue";
import { Button } from "@gt4/design";

export default {
  data() {
    return {
      message: "v-bing 指令传入 string",
    };
  },
  render(h: CreateElement) {
    // JSX语法传入 string(待验证)
    return <Button content="asdaadas" />;
    // JSX语法传入 function(待验证)
    return <Button content={() => <div>123</div>} />;
    // h函数传入 function(待验证)
    return h("Button", {
      props: {
        content: () => h("p", "这是段落文本"),
      },
    });
  },
};
</script>
<template>
  <div class="flex gap-4">
    <!-- 静态传入 string -->
    <t-button content="静态传入 string" />
    <!-- v-bing指令传入 string -->
    <t-button v-bind:content="message" />
    <!-- v-bing指令传入(语法糖) string -->
    <t-button :content="message" />
    <!-- 插槽传入（如果参数名称是default） solt -->
    <t-button>
      <span>插槽传入（如果参数名称是default） solt</span>
    </t-button>
    <!-- 具名插槽传入 solt -->
    <t-button>
      <template v-slot:content>
        <span>具名插槽传入 solt</span>
      </template>
    </t-button>
    <!-- 具名插槽(语法糖)传入 solt -->
    <t-button>
      <template #content>
        <span>具名插槽(语法糖)传入 solt</span>
      </template>
    </t-button>
  </div>
</template>

服啦！