2

我想通过在vue3中使用gsap来制作运动图。我遇到了一个问题。下面是一个例子。data()返回的对象类型变量（如 tl ）默认转换为代理。当我稍后配置它时它不起作用。所以我尝试在setup()中定义一个变量而不使用reactive()。当我稍后配置它时它会起作用。

运行这个例子，我发现 tl1(define in setup without reactive()) 和 tl2.target(define in data()) 之间存在一些差异。您可以在 CodePen 上运行它。

有人可以告诉我为什么当它成为代理对象时它不起作用的原因吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app" style="width: 5rem;height: 5rem;">
        <button @click="moveOrigin">actionOrigin</button>
        <button @click="moveProxy">actionProxy</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
    <script>
        const app = {
            setup() {
                const tl1 = gsap.timeline({ paused: true });
                const flag = true;
                return { tl1,flag };
            },
            data(){
                const tl2 = gsap.timeline({ paused: true });
                return {tl2};
            },
            methods: {
                moveOrigin() {
                    console.log("tl1 Origin");
                    console.log(this.tl1);
                    if (this.flag) {
                        this.tl1.to("button", { y: "+=2rem", duration: 1 });
                    } else {
                        this.tl1.to("button", { y: "-=2rem", duration: 1 });
                    }
                    this.flag = !this.flag;
                    this.tl1.play();
                },
                moveProxy() {
                    console.log("tl2 Proxy");
                    console.log(this.tl2);
                    if (this.flag) {
                        this.tl2.to("button", { y: "+=2rem", duration: 1 });
                    } else {
                        this.tl2.to("button", { y: "-=2rem", duration: 1 });
                    }
                    this.flag = !this.flag;
                    this.tl2.play();
                },
            }
        };
        Vue.createApp(app).mount('#app');
    </script>
</body>
</html>
4

0 回答 0