vue3 - defineProps到底做了什么?

Question

defineProps做了什么?

// Parent.vue
<script setup>
const data = ref(["peter", "tom"])
</script>
<template>
    <Child :data="data" />
</template>

// Child.vue
<script setup>
    const {data} = defineProps(["data"])
</script>
<template>
    <p v-for="item in data">{{item}}</p>
</template>

script setup文档

里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。

这里的const {data} = defineProps(["data"])怎么处理？
我的理解它应该是会被提到setup函数之外，类似于下面这样

{
    prop: {
        "data": data
    }
    setup(prop){
        ....
    }
}

我不太理解当父组件修改data的时候，如果我在子组件的setup中使用data，子组件是怎么得到这个新的data的呢？setup它只执行了一次啊？

附：vue真是太难学了，搞不明白

Answer 1

这是 Vue 通过依赖收集自动帮你处理好的，在React中也是如此 �� 将 Props 传递给组件 – React 中文文档

• #访问 Props - 组合式 API：setup() | Vue.js
• #传递 props - 组件基础 | Vue.js
• #响应式 props 解构 - 响应性语法糖 | Vue.js

至于为什么会出现 defineProps/defineEmits，是因为在 script:setup 中，我们并不能像在普通 setup 中一样写声明 props 和 emit:

export default {
  props: {
    title: String
  },
  emits: ['check'],
  setup(props) {
    console.log(props.title)
  }
}

你会发现你不知道如何去声明 props 和 emits，因为省略了 setup() 的入口缺少了上下文来源。所以出现了 defineProps() 和 defineEmits() 两个宏。

• #Setup 上下文 - 组合式 API：setup() | Vue.js

同理，后续又出现了 defineOptions()、defineModel() 之类的各种新的宏，来方便我们在 script:setup 中方便的书写业务逻辑，也避免书写多个 sciprt 块这种很不优雅的方式。

• <script setup> | Vue.js

Answer 2

子组件：

// Child.vue
<script setup>
    const {data} = defineProps(["data"])
</script>
<template>
    <p v-for="item in data">{{item}}</p>
</template>

将被编译为：

import {
  renderList,
  Fragment,
  openBlock,
  createElementBlock,
  toDisplayString,
} from "vue";

const sfc = {
  __name: "Child1",
  __file: "src/Child1.vue",
  props: ["data"],
  setup(props, { expose }) {
    expose();

    return { __isScriptSetup: true };
  },
};

function render(ctx, cache, props, setup, data, options) {
  return (
    openBlock(true),
    createElementBlock(
      Fragment,
      null,
      renderList(props.data, (item) => {
        return (
          openBlock(),
          createElementBlock("p", null, toDisplayString(item), 1 /* TEXT */)
        );
      }),
      256 /* UNKEYED_FRAGMENT */
    )
  );
}

sfc.render = render;

export default sfc;

可以看到，组件包含一个 setup 函数和一个 render 函数，分别由 <script setup> 和 <template> 编译而来。

在一个组件的生命周期中，setup 函数仅运行一次；而 render 函数会在第一次渲染和每次组件更新时运行，参考：Vue - 生命周期图示。

父组件 ref 的更新，将触发父组件的更新。父组件更新过程中，将会把最新的 ref 的值传递给子组件，并触发子组件的更新。子组件的 render 函数将运行，并通过 props.data 获取最新值。