Vue3 setup() 可以与Vue2的data()、methods()共存 作者：马育民 • 2025-06-07 21:39 • 阅读：10003 # 介绍 Vue3 推荐使用组合式api，但是 Vue3 `setup()` 可以与Vue2的 `data()`、`methods()` 共存 - `setup()` 比 `data()`、`methods()` 先执行 - `data()` 可以访问 `setup()` 中的数据 - `data()` 中的数据 与 `setup()` 冲突时，以 `setup()` 为准 # 例子 ``` <template> 姓名：{{name}}<br> 年龄：{{age}}<br> 年龄myAge：{{myAge}}<br> 性别：{{sex}}<br> 身高：{{height}}<br> </template> <script lang="ts"> export default{ name:'Student', data(){ return { name:'张三', myAge:this.age,// data中可以访问setup() 中的数据 set:'女', // data()中的数据 与 setup()冲突时，以setup() 为准 } }, // setup() 比 data() 先执行 setup(){ return { age:20, sex:'男', height:1.82 } } } </script> <style> </style> ``` 原文出处：http://malaoshi.top/show_1GW1GishpzEV.html