无效 属性 ... 设置为 ... 缺少插件？ gsap.registerPlugin()

Question

在 Vue3 中，如果我在 mounted() 生命周期钩子中尝试一个 gsap 动画，它可以工作，但如果我在 onMounted 钩子中尝试它 setup ，我收到这些警告：

Invalid property rotationY set to 45 Missing plugin? gsap.registerPlugin()
Invalid property rotationX set to 45 Missing plugin? gsap.registerPlugin()

---

我的setup:

setup() {
    const comments = ref(null);
    const test = function() {
        gsap.fromTo(
            comments,
            { rotationY: 45 },
            {
                rotationX: 45,
                ease: 'back.in(1)',
            },
            'mousein'
        );
    };

    onMounted(test);

    return { comments };
},

Vue 文档说 setup 中的 onMounted 与 mounted() 相同，所以我怎么会得到不同的结果？

Answer 1

由于 comments 是 ref，您必须使用它的 value 属性来访问模板 ref:

const test = function() {
    gsap.fromTo(
        // BEFORE:
        // comments,

        // AFTER:
        comments.value,

        /*...*/
    );
};