这篇文章主要介绍了vue2和Vue3对比分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue2和Vue3对比分析文章都会有所收获，下面我们一起来看看吧。
Vue2 vs Vue3
1、简单点说
2、源码
diff算法的优化
源码管理
vue2 poly-repo
vue3 mono-repo
源码结构对比
全新的API
什么是组合式 API？- Vue官方
1、setup
新的 setup 选项在组件被创建之前执行，一旦 props 被解析完成，它就将被作为组合式 API 的入口。
可以当做Vue2的beforeCreate和create生命周期用
可直接写await语法
SFC单文件组件中直接使用<script setup>即可，或者也可以结合export default使用
<script setup>
const result = await Http.get('/getUserInfo')
</script>
// or
export default {
setup(props, context) {
// Attribute (非响应式对象，等同于 $attrs)
console.log(context.attrs)
// 插槽 (非响应式对象，等同于 $slots)
console.log(context.slots)
// 触发事件 (方法，等同于 $emit)
console.log(context.emit)
// 暴露公共 property (函数)
console.log(context.expose)
}
}2、ref
ref 用来创建基础类型的响应式数据
template中默认调用value显示数据，script中需要使用.value 调用
和react ref差不多，react是.current获取值，vue3是.value。
Ref的本质是通过Reactive创建的，Ref(10)=>Reactive({value:10})
有一定的心智负担，尤大也明确说了不会支持script中直接访问。究其原因，还是基础类型无法拦截它的变化，当然也有大哥提出用new String('foo')类似的语法对基础类型进行包装。个人感觉直接拿已支持的reactive来搞也不错
相关api
Ref ts定义 import { type Ref } from 'vue';
isRef 判断是否为ref对象。一般是ref，toRef，toRefs创建的变量
toRefs 将reactive对象解构为单个响应式对象
shallowRef 创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的，简单理解为创建一个和ref相同结构的非响应式变量
triggerRef 强制更新页面DOM。即使创建的ref没有变，想更新dom可以用
customRef 提供类似于computed的get和set，可自定义ref行为
3、reactive
reactive 用来创建引用类型的响应式数据
reactive的本质是将每一层的数据都解析成proxy对象
reactive 的响应式默认都是递归的，改变某一层的值都会递归的调用一遍，重新渲染dom。
直接解构，响应性会丢失，需要用toRefs包裹。引用类型直接改变引用地址也会导致响应式丢失
相关api
import { reactive, toRefs } from 'vue'
const book = reactive({
author: 'Vue Team',
year: '2020',
title: 'Vue 3 Guide',
description: 'You are reading this book right now ;)',
price: 'free'
})
let { author, title } = toRefs(book)
title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'4、生命周期
区别不大，把setup当created用，其它就当改了个名
<script setup>
import { onMounted } from 'vue';
const getUserInfo = () => {
console.log('获取用户信息');
};
onMounted(getUserInfo);
</script>
5、watch & watchEffect
watch
import { ref, reactive, watch } from 'vue'
const counter1 = ref(0)
const counter2 = ref(0)
// 监听多个
watch([counter1, counter2], (newValue, oldValue) => {
console.log('The new counter1 value is: ' + counter1.value)
console.log('The new counter2 value is: ' + counter2.value)
})
const obj = reactive({
name: 'JJ',
age: 18
})
// 深度监听对象
watch(obj, (newValue, oldValue) => {
console.log('The new obj value is: ' + obj.value)
}, {
deep: true,
immediate: true
})
// watch监听单个属性
watch(() => obj.name, (newValue, oldValue) => {
console.log('The new obj value is: ' + obj.value)
}, {
deep: true,
immediate: true
})watchEffect
const stopWatch = watchEffect(
(oninvalidate): void => {
oninvalidate(() => {
console.log("前置校验函数");
});
// 引用了响应式的属性 count
console.log("watchEffect count变化", count.value);
},
{
// 副作用刷新时机 flush 一般使用post
// 可选：pre(组件更新前执行)/sync(强制效果始终同步触发)/post(组件更新后执行)
flush: "post",
// 开发调试
onTrigger() {
console.log("开发调试");
},
}
);6、computed
更加灵活，可以在定义响应式变量时声明
作用和vue2无差异
import { ref, computed } from 'vue'
const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)
// get set写法
const plusOne = computed({
get: () => counter.value + 1,
set: (val) => {
counter.value = val - 1
},
})
plusOne.value = 1
console.log(counter.value) // 0
counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2组件
1、异步组件
// template
<Suspense>
<template #default>
<AsyncComponent></AsyncComponent>
</template>
<template #fallback>
<div>loading...</div>
</template>
</Suspense>
// script
const AsyncComponent = defineAsyncComponent(() => import('./asyncComponent.vue'))2、Teleport传送组件
Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。之前写react是不怎么用这个属性，vue3这个估计也没多大用。
主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响
to 属性 插入指定元素位置，body，html，自定义className等等
<Teleport to="body">
<Loading></Loading>
</Teleport>
3、keep-alive缓存组件
4、组件通信
defineXxxx
defineXxxx 无需import即可直接使用
defineProps 代替过去的props
defineEmits 代替过去的$emit
defineOptions 自定义一些组件属性，比如组件名称（需要插件支持）
defineComponent 用于render函数、TSX、IDE提醒等
defineExpose 子组件声明的数据，暴露给父组件直接用
provide/inject
和vue2一致
vuex & pina
两者用法，除了pina没有Mutations，差别不大。但是官方推荐的东西，自然有它的各种优点
Vuex： State、Gettes、Mutations(同步)、Actions(异步)
Pinia： State、Gettes、Actions(同步异步都支持)
Vuex4 用于 Vue3 ，Vuex3 用于 Vue2
Pinia2.x 即支持 Vue2 也支持 Vue3
TS支持
import { ref } from 'vue'
let v = ref<string>('')
const renderDom = () => {
return (
<>
<input v-model={v.value} type="text" />
<div>
{v.value}
</div>
</>
)
}
export default renderDom插件
1、开源插件
unplugin-auto-import/vite
无需导入xxx，import { reactive,ref } from "vue";，只需要用即可
unplugin-vue-define-options
自定义组件名称，需要引入插件unplugin-vue-define-options,并在vite中配置
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import DefineOptions from 'unplugin-vue-define-options/vite';
export default defineConfig({
plugins: [vue(), DefineOptions()],
});不使用插件，也可以通过多写一个script标签来单独写options
<script>
export default {
name: "TButton",
};
</script>
<script setup>
defineOptions({
name: 'TButton',
});
</script>2、vscode插件
volar vscode
指令
1、v-model
2、自定义指令
生命周期（和vue3一致）
自定义拖拽指令v-move
import { Directive } from "vue";
const vMove: Directive = {
mounted(el: HTMLElement) {
let moveEl = el.firstElementChild as HTMLElement;
const mouseDown = (e: MouseEvent) => {
//鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
console.log(e.clientX, e.clientY, "-----起始", el.offsetLeft);
let X = e.clientX - el.offsetLeft;
let Y = e.clientY - el.offsetTop;
const move = (e: MouseEvent) => {
el.style.left = e.clientX - X + "px";
el.style.top = e.clientY - Y + "px";
console.log(e.clientX, e.clientY, "---改变");
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
});
};
moveEl.addEventListener("mousedown", mouseDown);
},
};Hook
用了react hook的人都知道很香，vue3支持这个相当不错，能解决很多业务场景的封装
1、自定义Hook
可以当做mixins写
// useWindowResize
import { onMounted, onUnmounted, ref } from "vue";
function useWindowResize() {
const width = ref(0);
const height = ref(0);
function onResize() {
width.value = window.innerWidth;
height.value = window.innerHeight;
}
onMounted(() => {
window.addEventListener("resize", onResize);
onResize();
});
onUnmounted(() => {
window.removeEventListener("resize", onResize);
});
return {
width,
height
};
}
export default useWindowResize;2、hook库
3、react vs vue3
关于“vue2和Vue3对比分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue2和Vue3对比分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注天达云行业资讯频道。