vue3学习笔记-根据vue2与vue3的区别（持续补充）

一、前言：

Vue3和Vue2对比：

1. 性能提升：Vue3这个框架将Vue全部重构了。新的框架。底层采用TS来进行重构，性能提升能达到100%
2. 对TS的支持，Vue3底层默认采用TS进行开发。我们Vue开发过程中，一般也会默认结合TS来使用
3. Vue3目前创建项目采用了新的打包工具，vite工具（xxx）团队他们自己发布的一个打包。目标干掉webpack
4. 新增了组合式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标签下面同时创建多个标签。

Vue3引入了一项技术，类似于React中Fragment，以后再template里面无需再创建根标签，默认采用Fragment来进行页面处理。

2、

这个标签上面，lang=“ts”代表以后再这个script标签里，我们可以支持ts代码。后续我们打包的时候，就会默认将script标签里面的内容解析为js代码

steup：Vue3采用了新的api来进行编程，这些api想要能够被我们框架识别，必须再script标签上面增加steup标志，才能让我们打包的，将vue3的语法解析渲染

3、我们在Vue3项目中，创建项目默认不支持less和scss。要使用这两种技术，我们需要自己下来依赖包

 4、组件引入方式：

在Vue3这个项目中我们要引入外部的组件，components文件夹组件

特点：

1. 引入组件后，我们无需注册，直接页面中渲染
2. 默认已经加载src/components文件夹，这个文件夹下面的组件已经可以实现全局导入。

你在组件重要无需引入，默认用了某个组件，直接去src /components寻找

5、vue3中提供组合式api -ref

ref这个组合式api需要我们引入到项目中定义组件内部数据

import {ref} from "vue"

在通过ref来定义内部数据

script标签里面如果要获取或者修改当前定义的变量，必须对象.value的方式来实现

但是template标签里面我们可以直接使用ref定义的变量

6、vue3中提供组合式api -reactive

reactive定义数据和ref有点不一样，可以将所有的数据定义为一个对象，方便我们调用

建议：

基本数据类型我们采用ref来定义

引用类型数据我们采用reactive来定义

Reactive来定义的数据，进行修改的时候，不需要value修改，直接进行值变化就可以

7、计算属性

Vue2中计算属性

export default {
    computed:{
        fullName(){
            return this.firstName + this.lastName
        }
    }
}

Vue3提供的所有操作都是采用组合式api的方式呈现的。

我们如果要实现计算属性，也需要导入计算属性的模块，来进行计算属性操作

计算属性也被封装为组合式的api，我们需要引入这个api来进行计算属性业务。

computed被封装成了一个函数，需要计算属性的时候，调用这个函数获取结果

这种编程的方式更加偏向hook编程

语法2：

语法2相对来说使用比较少，计算属性的值，一般获取来使用，很少对进行修改

8、watch

Vue2的语法

export default {
    data(){
        return {
            username:"xiaowang"
        }
    },
    watch:{
        username:{
            //当我们监控的username发生变化的时候，默认执行handler
            handler(value){
            }，
            deep:true,
            immediate:true
        }
    }
}

Vue3里面watch也是采用api的形式提供

如果我们要监控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中所有声明周期函数都需要引入后使用

选项式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博客