2025-5-15Vue3快速上手

1、setup和选项式API之间的关系

       (1)vue2中的data,methods可以与vue3的setup共存

       （2）vue2中的data可以用this读取setup中的数据，但是反过来不行，因为setup中的this是undefined

（3）不建议vue2和vue3的语法混用

2、setup的挂载时机比beforeCreate早

输出顺序：

3、setup语法糖

(1)直接在script标签中加上setup,这样就只需要关注数据和方法，不用特地return 

注意：两个script标签中的语言要一致，均为ts/js

(2)只写一个script就可以既用setup语法糖，又暴露组件名（有时组件名和组件文件名不一定相同）

安装一个插件

npm i vite-plugin-vue-setup-extend -D

在vite.config.ts中引入该插件 

4.ref创建 基本类型的响应式数据 

(1)当基本类型数据被ref包裹，它就变成了响应式数据（数据变，页面变）

(2)ref返回的是一个RefImpl对象

(3)在template中使用ref创建的数据时不需要.value,但是在script中操作数据时需要.value