typescript - 在从组合 API 创建的生命周期钩子(Hook)中使用它

Question

我在 Vue 3 中遇到 typescript 问题。

1. 每次修改 Prop “查询”时从 iTunes 获取数据。 (格式:[{}、{}、{}、...]
2. 调用函数从 fetch 中过滤未使用的信息

当我在 fetch 中调用函数(该函数将过滤对象以简化代码)时，它会抛出一个错误:

Property 'filterData' does not exist on type 'void'.

我的代码:

<template>
    <div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onUpdated } from 'vue';

interface Song {
    id: number;
    name: string;
    nameT: string;
    cover?: string;
    preview: string;
}

interface SongFromITunes {
    artistId: number;
    artistName: string;
    trackName: string;
    previewUrl: string;
    artworkUrl100?: string;
}

export default defineComponent({
    data() {
        return {
            list: [] as Array<Song>
        };
    },
    props: {
        query: String
    },
    methods: {
        filterData({
            artistId: id,
            artistName: name,
            trackName: nameT,
            artworkUrl100: cover,
            previewUrl: preview
        }: SongFromITunes): Song {
            return { id, name, nameT, cover, preview };
        }
    },
    setup(props) {
        onUpdated(() => {
            const { query } = props;
            if (query != null) {
                fetch(
                    `https://itunes.apple.com/search?term=${encodeURI(
                        query
                    )}&limit=10&entity=musicTrack`
                )
                    .then((resolve) => resolve.json())
                    .then((data) => data.results.map((item: SongFromITunes) => this.filterData(item));
            }
        });
    }
});
</script>

<style scoped></style>

Answer 1

我发现你的问题很有趣。

来自 docs很明显 this 不能在 setup() 中使用，因为 Vue 实例还不存在。

但在生命周期钩子(Hook)的情况下，您传递的回调必须稍后附加到新的 Vue 实例

Docs : 这些生命周期钩子(Hook)注册函数只能在 setup() 期间同步使用，因为它们依赖于内部全局状态来定位当前事件实例(其 setup() 正在被调用)。

所以看起来 正确的做法是 如果 Vue 只是使用 bind 并将回调绑定(bind)到实例会很容易 .不过貌似不是这样的……

您的解决方案是将 filterData 从 methods 移动到 setup()

    setup(props) {
        let filterData = function({
            artistId: id,
            artistName: name,
            trackName: nameT,
            artworkUrl100: cover,
            previewUrl: preview
        }: SongFromITunes): Song {
            return { id, name, nameT, cover, preview };
        }

        onUpdated(() => {
            const { query } = props;
            if (query != null) {
                fetch(
                    `https://itunes.apple.com/search?term=${encodeURI(
                        query
                    )}&limit=10&entity=musicTrack`
                )
                    .then((resolve) => resolve.json())
                    .then((data) => data.results.map((item: SongFromITunes) => filterData(item));
            }
        });

        return { filterData }
    }

更新

我真的很好奇这背后的原因，因为我觉得钩子(Hook)天生就绑定(bind)到实例上，可能很多人会期望 this 在回调中可用。所以我在 Vue discord 上询问并收到以下解释(感谢 Vaage#9161):

如果我们将 setup 中的生命周期钩子(Hook)绑定(bind)到实例，只会造成困惑并鼓励反模式。您做出选择、选项 api 或组合 api。如果您选择合成 api，那么 this 对您来说没有什么有趣的。一切都包含在 setup 闭包中。如果我们添加它， typescript 推理将更难实现，人们将开始使用 options api 与它结合使用。

当日消息

不要混用组合 API 和选项 api