Vue3兼容大部分Vue2的特性
-
创建方式
-
ref reactive
-
setup()
-
声明周期
-
父子传值
一、创建方式
1.第一种通过手动来完成vue3 的创建
image.png
image.png
第一个要选中他的意思是选择vue的版本
image.png
- 这个选择 3版本 就行
- 回车以后就要看自己的选择，是给他设置记录，还是不用
- 再后面就是个css预处理器写有sass 还有less 看自己的习惯吧
2.第二种可以使用vite(脚手架)
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3
上面的“hello-vue3”是创建的项目名 也可以进行修改
3.区别
-
运行速度
-
工程目录结构上
手动方式创建
image.png
通过vite 脚手架创建
image.png
- 手动方式创建的vue3.0项目,工程目录结构是没有问题的
- vite目录结构是不完整的 第一个就是没有node依赖包 需要自己去yarn || npm install
二、ref reactive
1.png
- ref：主要用于基本类型的响应
- reactive：主要用于引用类型的响应。
改变数据的时候 声明ref的变量是需要加一个.value 进行改变
change.png
三、 setup用法(目前我知道两种)
-
第一种就是上面这种
1. export default {
2. setup () {
3.
4. },
5. return {
6.
7. }
8. }
这种写法是必须要return 如果没有return 就不能使用
-
第二种就是直接写在script标签上
setup.png
跟上面的一种写法区别就是不需要return出去
这种写法好像是不推荐使用,用的话在控制台会有一个提示
四、生命周期
vue3生命周期和vue2的生命周期用法相同,只是写法不一样了,create一系列应该是退役了
// 使用的时候必须先导入, 导入就可以使用了
// 使用方法和vue2一样
1. import { onMounted, onUpdated, onUnmounted } from 'vue'
2. onMounted() {
3. console.log(`我挂载了`);
4.}
五、父子传值
父组件
- 需要使用一个components进行注册。
-
注册分为局部注册和全局注册。现在使用的是局部注册,如果想使用全局注册的话可以去main.js使用use
image.png
子组件
-
子组件需要导入一个defineProps 来接受父组件传过来的值
image.png
