一、前言：
Vue3和Vue2对比：
- 性能提升：Vue3这个框架将Vue全部重构了。新的框架。底层采用TS来进行重构，性能提升能达到100%
- 对TS的支持，Vue3底层默认采用TS进行开发。我们Vue开发过程中，一般也会默认结合TS来使用
- Vue3目前创建项目采用了新的打包工具，vite工具（xxx）团队他们自己发布的一个打包。目标干掉webpack
- 新增了组合式api和响应式api进行开发（hook编程）
vue3优势：
更快：vue3重写了虚拟dom。速度提升很多
更小：新增了tree shaking技术，你们项目中没有用到的代码。打包会默认去掉。
更易于维护：Flow到TypeScript变化，让我们代码实现起来更加规范
vue2应该不再更新了，所以掌握vue3的编程有益无害
二、首先需要在vscode上安装属于vue3的插件：
然后需要禁用vue2的插件：（否则vue3项目会爆红）
注：如果你需要同时开发vue2和vue3的项目，可以给vue3设置一个工作区，在工作区内禁用vetur
三、vue2与vue3在编程时的区别：
1、在Vue3里面，我们可以支持在template标签下面同时创建多个标签。
<template>
<div>345</div>
<div>333</div>
<p>123</p>
</template>Vue3引入了一项技术，类似于React中Fragment，以后再template里面无需再创建根标签，默认采用Fragment来进行页面处理。
2、
<script lang='ts' setup>
</script>这个标签上面，lang=“ts”代表以后再这个script标签里，我们可以支持ts代码。后续我们打包的时候，就会默认将script标签里面的内容解析为js代码
steup：Vue3采用了新的api来进行编程，这些api想要能够被我们框架识别，必须再script标签上面增加steup标志，才能让我们打包的，将vue3的语法解析渲染
3、我们在Vue3项目中，创建项目默认不支持less和scss。要使用这两种技术，我们需要自己下来依赖包
<style lang='scss' scoped>
.box {
.h3 {
color: red;
}
}
</style>4、组件引入方式：
在Vue3这个项目中我们要引入外部的组件，components文件夹组件
特点：
- 引入组件后，我们无需注册，直接页面中渲染
- 默认已经加载src/components文件夹，这个文件夹下面的组件已经可以实现全局导入。
你在组件重要无需引入，默认用了某个组件，直接去src /components寻找
<template>
<h3>这是App</h3>
<Product></Product>
<User></User>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
.box {
.h3 {
color: red;
}
}
</style>5、vue3中提供组合式api -ref
ref这个组合式api需要我们引入到项目中定义组件内部数据
import {ref} from "vue"
在通过ref来定义内部数据
<template>
<div>
<h3>Reactive</h3>
<p>{
{count}}</p>
<button @click="count=100">修改</button>
<!-- 只要在template输出这个对象，默认调用value -->
<p>{
{username}}</p>
<button @click="changeUsername">修改username</button>
</div>
</template>
<script lang='ts' setup>
// 定义组件内部数据
import {ref} from "vue"
// 定义一个基本数据类型,useState
const count = ref(50)
const username = ref("xiaowang")
// 函数直接定义script标签里面
const changeUsername = ()=>{
console.log(username);
// username得到的不是一个普通数据类型，而是一个对象。
username.value = "xiaofeifei"
}
</script>
<style lang='less' scoped>
</style>script标签里面如果要获取或者修改当前定义的变量，必须对象.value的方式来实现
但是template标签里面我们可以直接使用ref定义的变量
6、vue3中提供组合式api -reactive
reactive定义数据和ref有点不一样，可以将所有的数据定义为一个对象，方便我们调用
<template>
<div>
<h3>Reactive</h3>
<p>{
{state.count}}</p>
<p>{
{state.user}}</p>
<button @click="++state.count">+</button>
<button @click="--state.count">-</button>
</div>
</template>
<script lang='ts' setup>
import { reactive } from 'vue';
/**
* reactive定义组件内部数据
* 类似于React 类组件 State
*/
const state = reactive({
count:10,
user:{
id:1,name:"xiaowang"
},
stus:[1,2,3]
})
</script>
<style lang='less' scoped>
</style>建议：
基本数据类型我们采用ref来定义
引用类型数据我们采用reactive来定义
Reactive来定义的数据，进行修改的时候，不需要value修改，直接进行值变化就可以
7、计算属性
Vue2中计算属性
export default {
computed:{
fullName(){
return this.firstName + this.lastName
}
}
}Vue3提供的所有操作都是采用组合式api的方式呈现的。
我们如果要实现计算属性，也需要导入计算属性的模块，来进行计算属性操作
<template>
<div>
<h3>
computed
</h3>
<p>{
{fullName}}</p>
<button @click="state.firstName='老'">修改姓</button>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,computed} from 'vue'
const state = reactive({
firstName:"小",
lastName:"王"
})
const fullName = computed(()=>{
return state.firstName + state.lastName
})
</script>
<style lang='less' scoped>
</style>计算属性也被封装为组合式的api，我们需要引入这个api来进行计算属性业务。
computed被封装成了一个函数，需要计算属性的时候，调用这个函数获取结果
这种编程的方式更加偏向hook编程
语法2：
<template>
<div>
<h3>
computed
</h3>
<p>{
{fullName}}</p>
<p>{
{upperCaseName}}</p>
<p>{
{newValue}}</p>
<button @click="newValue='zhang'">修改newValue</button>
<button @click="state.firstName='老'">修改姓</button>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,computed} from 'vue'
const state = reactive({
firstName:"小",
lastName:"wang"
})
const newValue = computed({
get(){
console.log(123);
return state.lastName
},
set(val){
console.log(val);
}
})
</script>
<style lang='less' scoped>
</style>语法2相对来说使用比较少，计算属性的值，一般获取来使用，很少对进行修改
8、watch
Vue2的语法
export default {
data(){
return {
username:"xiaowang"
}
},
watch:{
username:{
//当我们监控的username发生变化的时候，默认执行handler
handler(value){
}，
deep:true,
immediate:true
}
}
}Vue3里面watch也是采用api的形式提供
<template>
<div>
<h3>watch模块</h3>
<p>原始数据：{
{state.username}}</p>
<p>{
{state.user}}</p>
<button @click="state.username = 'xiaofeifei'">修改username</button>
<button @click="state.user.name = 'xiaoliu'">修改user</button>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,watch} from 'vue'
const state = reactive({
username:"xiaowang",
user:{
id:1,name:"王二麻子"
}
})
// 监听watch模块
// 第一个回调函数，要监控的属性是哪些。
// 第二个回调函数，数据发生变化，要执行业务
watch(
()=>state.username,
(val,prevVal)=>{
console.log(val);
console.log(prevVal);
}
)
</script>
<style lang='less' scoped>
</style>如果我们要监控user对象
当我们要监控引用类型的数据。需要深度监听和立即监听
第三个参数：提供一个对象，对象里加入deep：true、immediate：true
watch(
() => state.user,
(val, prevVal) => {
console.log(val);
console.log(prevVal);
},
{
deep:true,
immediate:true
}
)9、watchEffect函数
响应式的在跟踪你们的依赖项，一旦检测变化，立即执行回调函数。
watchEffect和watch都是用于进行页面的监控。
watchEffect提供了一个回调函数，这个函数中使用reactive中某些属性，只要这些属性发生变化，我们都可以监控到
watchEffect(()=>{
// 里面可以执行异步请求，日志记录等等
console.log(state.username);
// 监控user这个对象地址发生变化，里面属性变化检测
console.log(state.user);
// 使用了user对象里面某个属性才能监控到
console.log(state.user.name);
})wactEffect里面使用到的变量发生变化，我们才能监控到。
如果引用类型数据，地址发生变化你才能监控到。除非指定要监控引用类型里面某个属性
watchEffect一次性可以监控很多个属性。
10、声明周期函数
在VUE2中我们声明周期函数可以直接获取使用。
export default {
mounted(){
},
created(){
}
}Vue3中所有声明周期函数都需要引入后使用
<template>
<div>
<h3>
声明周期函数
</h3>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,onMounted} from 'vue'
onMounted(()=>{
console.log("页面挂载完成后执行");
})
</script>
<style lang='less' scoped>
</style>选项式API和Vue组合式api函数区别：
| 选项式 API | Hook inside setup |
|---|---|
beforeCreate |
Not needed |
created |
Not needed |
beforeMount |
onBeforeMount |
mounted |
onMounted |
beforeUpdate |
onBeforeUpdate |
updated |
onUpdated |
beforeDestory |
onBeforeUnmount |
| destory | onUnmounted |
errorCaptured |
onErrorCaptured |
renderTracked |
onRenderTracked |
renderTriggered |
onRenderTriggered |
11、父子组件传值方式
vue2和vue3的父子组件传参方式也不同，但是篇幅过长，新开了篇文章
vue2组件传参：
vue2父子组件传参方式汇总_先知demons的博客-CSDN博客
vue3组件传参：
vue3-实现父子组件之间的通信（详解+源码）_先知demons的博客-CSDN博客
12、过滤器filter
13、vue3中要获取对象时，不会直接打印出对象的值，而是一个proxy
具体详解请看：
vue3获取对象的值的时候，是一个proxy，如何获得我们需要真实的值_先知demons的博客-CSDN博客
14，图片的动态引入方式
vue2中动态引入静态资源是用require（‘路径’），但是vue3中无法使用require
具体详情请看：
vue3引入图片等无法使用require，需要用newURL来动态引入图片等静态资源_先知demons的博客-CSDN博客