干货：带你快速上手Vue3.0＋Vite构建工具
Vue2.x和Vue3.x版本差异：https://www.jianshu.com/p/d3f973433274
一、Vue3介绍
参照Vue官方：https://cn.vuejs.org/guide/quick-start.html
二、Vue3入门程序
1、CDN方式
Vue官方提供直接引入服务地址，只要使用标签，就可以直接引入并且使用它
2、NPM方式
不推荐
3、命令行工具（CLI）
利用vue-cli脚手架创建vue3项目，之前我们利用脚手架创建vue2项目时选择的是vue2模板，现在我们要选择vue3模板
4、Vite【推荐】
4.1、Vite概述
Vite：下一代前端开发与构建工具【类似于webpack】vite服务器启动速度比webpack快，由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快，当浏览器请求需要的模块时，在对模块进行编译，这种按需求动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发优势越明显，vite热更新比webpack快，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不像webpack重新将该模块的所有依赖重新编译
4.2、Vite安装
4.4、创建项目
5、创建容器
6、使用Vue
三、组合式API
Vue2：选项式API，把data、computed、methods给拆分Vue3：组合式API，把data、computed、methods给组合到一起
实现组合式API的函数：setup()，组件被创建之前执行
1、组合式API
1.1、使用setup方法
1.2、setup配合script
2、ref
当我们对属性进行更改后，页面中的数据不会直接渲染更改，我们需要用到ref方法
ref只能更改基本数据类型，那么引用数据类型可以使用reactive方法
3、reactive
4、toRefs
我们可以通过toRefs对对象进行解构，那么解构出来的属性也具备响应式
5、watch
watch：侦听器
5.1、监听基本类型
可以获取新值和旧值
5.2、监听引用数据类型
Vue3.0中的watch可以监听到属性的变化
获得的数据都是新数据
5.3、监听多个数据
6、watcheEffect
是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
7、computed
computed：计算属性
7.1、简写方式
7.2、完整方式
8、生命周期钩子函数
Vue2.0生命周期钩子函数和Vue3.0有一些区别
setup围绕着beforeCreate和created执行，所以如果以前在beforeCreate或者created中编写的一些业务，现在可以全部写到setup中
Vue3中的生命周期钩子函数可以重复定义执行
9、props
setup函数有两个参数，其中一个参数就是props，和Vue2.0中的props作用一样，都是用于组件传参
9.1、代码案例
9.2、语法糖
10、context
同理！
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20221217A048YY00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
