这篇“vue3与vue2的区别是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue3与vue2的区别是什么”文章吧。
创新互联建站 -专业网站定制、快速模板网站建设、高性价比东辽网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式东辽网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖东辽地区。费用合理售后完善，10余年实体公司更值得信赖。
1.生命周期的变化：3.x(上） 2.x（下）
不难看出，vue3.0与vue2.0之间生命周期函数在销毁的时候有变化：
beforeDestroy --> beforeUnmount
destroyed --> unmounted 其他的区别主要在于书写使用的语言上的差别
在ts中使用 class 类组件书写可以 参考 vue-class-component 或者 vue-property-decorator
书写的风格和vue2.0的选项式区别不大。
如果使用js书写代码 则应当使用组合式。 具体变化带来的问题，会在下面的组合式写法中讲解。
2.定义全局变量的方法变化 // 之前(Vue 2.x)
Vue.prototype.$http = () => {}
Vue.prototype.url= 'http://123'
// 之后(Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}
app.config.globalProperties.url= 'http://123' 3.创建vue实例变化 //=======vue3.x
//使用createApp函数来实例化vue，
//该函数接收一个根组件选项对象作为第一个参数
//使用第二个参数，我们可以将根 prop 传递给应用程序
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App,{ userName: "blackLieo" })
.use(store)
.use(router)
.mount('#app')
//由于 createApp 方法返回应用实例本身，因此可以在其后链式调用其它方法，这些方法可以在以下部分中找到。
//=======vue2.x
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue({
router,
store,
render: h => h(App)
}).$mount('#app') 4.插槽使用变化 //================vue2.0使用插槽基本上直接使用slot进行操作//其中vue2.0经历了两次更迭，2.6.0版本slot升级为v-slot
// 具名 作用域插槽
//父组件调用该组件
默认插槽
// 作用域插槽
{{ current.id }}
{{ current.name }}
{{ current.label }}
{{ current.group }}
{{ current.runtime }}
{{ current.category }}
//==============vue3.0使用插槽//在vue3.0中，插槽使用v-slot 简写用#
// 可以写为v-slot:default #后面跟的是插槽名称
默认插槽
//作用域插槽
// 可以写为v-slot:test="newData"
{{ newData.aa }}
{{ newData.bb }}
//一个组件里面具有多个插槽时，一定要带上名称，否则可能会导致作用域错乱 5.自定义指令 在 Vue 2 中实现一个自定义指令：
// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}}) 在 Vue 2 中， 自定义指令通过以下几个可选钩子创建：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
在 Vue 3 中对自定义指令的 API 进行了更加语义化的修改， 就如组件生命周期变更一样， 都是为了更好的语义化， 变更如下：
所以在 Vue3 中， 可以这样来自定义指令：
const { createApp } from "vue"const app = createApp({})app.directive('focus', {
mounted(el) {
el.focus()
}}) 然后可以在模板中任何元素上使用新的 v-focus指令， 如下：
6.v-model 升级 Vue 3 中 v-model 发生了很大的变化：
变更：在自定义组件上使用v-model时， 属性以及事件的默认名称变了
变更：v-bind的.sync修饰符在 Vue 3 中又被去掉了, 合并到了v-model里
新增：同一组件可以同时设置多个 v-model
新增：开发者可以自定义 v-model修饰符 我们来详细了解一下，并对比一下vue2与vue3 在组件上使用 v-model，
这时v-model只能绑定在组件的value属性上，那如果我们要给自己的组件用一个别的属性，并且我们不想通过触发input来更新值。
但是在实际开发中，有些场景我们可能需要对一个 prop 进行 “双向绑定”， 这里以最常见的 dialog 为例子：dialog 挺合适属性双向绑定的，
外部可以控制组件的visible显示或者隐藏，组件内部关闭可以控制 visible属性隐藏，同时 visible 属性同步传输到外部。组件内部，
当我们关闭dialog时, 在子组件中以 update:PropName 模式触发事件。 事件为
this.$emit('update:visible', false) 然后在父组件中可以监听这个事件进行数据更新：
在vue2的开发中，我们实际会发现一个新的东西sync，所以也可以使用v-bind.sync来简化实现：
上面说了 Vue2 中v-model实现以及组件属性的双向绑定，那么在 Vue 3 中应该怎样实现的呢？modelValue 属性， 同时触发一个update:modelValue事件：
如果要绑定属性名， 只需要给v-model传递一个参数就行, 同时可以绑定多个v-model：
这个写法完全没有.sync什么事儿了， Vue 3 中抛弃了.sync写法， 统一使用v-model。
7.异步组件的使用 Vue3 中 使用 defineAsyncComponent 定义异步组件，配置选项 component 替换为 loader ,Loader 函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise，用法如下：
8.Composition API 使用Composition API 解决我们在完成功能时，在 data、methods、computed 以及 mounted 中反复的跳转，他将零散分布的
逻辑组合在一起维护，并可以将单独的逻辑再分为单独的文件 如果想要了解
我们先来了解一下Composition具有的API
setup 是 Vue3.x 新增的一个选项， 他是组件内使用 Composition API的入口。
setup 执行时机
会出现如下所示的输出结果：
setup 执行时机是在 beforeCreate 之前执行，详细的可以看后面生命周期讲解。
setup 参数
使用setup时，它接受两个参数：
setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。props 不再支持响应式：
setup(props) {
const { name } = props;
console.log(name);
const state = reactive({ count: 0 });
return {
state,
};
}, 对于以上的的问题，我们可以在后面的toRefs进行解释。
reactive、ref、toRefs、readonly
在 vue2.x 中， 定义数据都是在data中。reactive和ref来进行数据定义。
reactive用于处理对象的双向绑定，ref处理 js 基础类型或者处理对象的双向绑定。
注意refs
它接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property.value。
计数：{{ num }}s
主人年龄：{{ person.age }}
主人姓名：{{ person.name }}
动物类别：{{ animal.type }}
动物名称：{{ animal.name }}
动物年龄：{{ animal.age }}
我们绑定到页面是通过user.name,user.age；这样写感觉很繁琐，我们能不能直接将user中的属性解构出来使用呢?user进行结构， 这样会消除它的响应式， 这里就和上面我们说props不能使用 ES6 直接解构就呼应上了。toRefs。toRefs 用于将一个 reactive 对象转化为属性全部为 ref 对象的普通对象。具体使用方式如下：
计数：{{ num }}s
主人年龄：{{ person.age }}
主人姓名：{{ person.name }}
动物类别：{{ atype }}
动物名称：{{ aname }}
动物年龄：{{ aage }}
有时我们想跟踪响应式对象 (ref 或 reactive) 的变化，但我们也希望防止在应用程序的某个位置更改它，这时候，我们就需要readonly。proxy 对象：
import { reactive, readonly } from 'vue'
const original = reactive({ count: 0 })
const copy = readonly(original)
// 通过 original 修改 count，将会触发依赖 copy 的侦听器
original.count++
// 通过 copy 修改 count，将导致失败并出现警告
copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly." 在最开始的时候，我们就看到了两张图，其中的变化我们可以总结一下
我们可以看到beforeCreate和created被setup替换了（但是 Vue3 中你仍然可以使用， 因为 Vue3 是向下兼容的， 也就是你实际使用的是 vue2 的）。onRenderTriggered和onRenderTricked
import {
defineComponent,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onErrorCaptured,
onRenderTracked,
onRenderTriggered,} from "vue";export default defineComponent({
//beforeCreate和created是vue2的
beforeCreate() {
console.log("------beforeCreate-----");
},
created() {
console.log("------created-----");
},
setup() {
console.log("------setup-----");
// vue3.x生命周期写在setup中
onBeforeMount(() => {
console.log("------onBeforeMount-----");
});
onMounted(() => {
console.log("------onMounted-----");
});
onBeforeUpdate(() => {
console.log("------onBeforeUpdate-----");
});
onUpdated(() => {
console.log("------onUpdated-----");
});
onBeforeUnmount(() => {
console.log("------onBeforeUnmount-----");
});
onUnmounted(() => {
console.log("------onUnmounted-----");
});
onErrorCaptured(() => {
console.log("------onErrorCaptured-----");
});
onRenderTracked(() => {
console.log("------onRenderTracked-----");
});
// 调试哪些数据发生了变化
onRenderTriggered((event) => {
console.log("------onRenderTriggered-----", event);
});
},}); 具体怎么使用，是干什么的请参考官方文档，这里就不一一赘述了。
watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调。
watch(source, callback, [options]) 参数说明：
source: 可以支持 string,Object,Function,Array;
用于指定要侦听的响应式变量 callback:
执行的回调函数 options：支持 deep、immediate 和 flush 选项。
其实整体和原来的vue2.0有一定的相似性，基本参数没有发生大的改变。
接下来我会分别介绍这个三个参数都是如何使用的， 如果你对 watch 的使用不明白的请往下看：
//监听reactive对象：watch(
() => animal.aage,
(curAge, preAge) => {
console.log("新值:", curAge, "老值:", preAge);
}
);//监听ref变量
watch(num, (newVal, oldVal) => {
console.log("新值:", newVal, "老值:", oldVal);
});
//多个值的监听
watch([() => animal.aage, num], ([curAge, newVal], [preAge, oldVal]) => {
console.log("新值:", curAge, "老值:", preAge);
console.log("新值:", newVal, "老值:", oldVal);
});
//监听对象复杂时，请使用深度监听 让函数的第三个参数为deep：truewatch(
() => state.animal,
(newType, oldType) => {
console.log("新值:", newType, "老值:", oldType);
},
{ deep: true }
); 默认情况下，watch 是惰性的, 那什么情况下不是惰性的， 可以立即执行回调函数呢？其实使用也很简单， 给第三个参数中设置immediate: true即可。
//停止监听函数
const stopWatchRoom = watch(
() => state.animal,
(newType, oldType) => {
console.log("新值:", newType, "老值:", oldType);
},
{ deep: true }
);
setTimeout(() => {
// 停止监听
stopWatchRoom();
}, 3000); 还有一个监听函数watchEffect，介绍一下watchEffect，看看它的使用和watch究竟有何不同，在上面代码的基础上，我们来编写。
watchEffect(() => {
console.log(num);
}); 执行结果首先打印一次num值；然后每隔一秒，打印num值。
9.Hooks 在之前vue用的mixin，所谓的混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。vue-hooks。具体的vue-hooks，请参考网上教程
为什么产生了hooks？class-component/vue-options说起：
当一个模版依赖了很多mixin的时候，很容易出现数据来源不清或者命名冲突的问题，而且开发mixins的时候，逻辑及逻辑依赖的属性互相分散且mixin之间不可互相消费。这些都是开发中令人非常痛苦的点。
允许hooks间相互传递值
组件之间重用状态逻辑
明确指出逻辑来自哪里
我们先来封装一个hooks，假如这个hooks是一个实现年龄加减，获取双倍年龄的函数。用单独的文件存储 bus/useAge.ts
import { ref, Ref, computed } from "vue";type CountResultProps = {
age: Ref;
doubleAge: Ref;
increase: (curAge?: number) => void;
decrease: (curAge?: number) => void;};export default function useCount(initValue = 20): CountResultProps {
const age = ref(initValue);
const increase = (curAge?: number): void => {
if (typeof curAge !== "undefined") {
age.value += curAge;
} else {
age.value += 1;
}
};
const doubleAge = computed(() => age.value * 2);
const decrease = (curAge?: number): void => {
if (typeof curAge !== "undefined") {
age.value -= curAge;
} else {
age.value -= 1;
}
};
return {
age,
doubleAge,
increase,
decrease,
};} 在组件里面调用该hooks
计数：{{ num }}s
主人年龄：{{ person.age }}
主人姓名：{{ person.name }}
动物类别：{{ atype }}
动物名称：{{ aname }}
动物年龄：{{ aage }}
count: {{ age }}
双倍年龄： {{ doubleAge }}
加1
减一
10.vue2.x 与vue3.x的响应式数据对比 在vue2.0中，应该很多人都使用了$set这个东西吧。$forceUpdate强制更新呢？Object.defineProperty。而vue3.x使用的是Proxy
Object.defineProperty只能劫持对象的属性， 而 Proxy 是直接代理对象
由于Object.defineProperty只能劫持对象属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。Proxy 直接代理对象， 不需要遍历操作
Object.defineProperty对新增属性需要手动进行Observe
因为Object.defineProperty劫持的是对象的属性，所以新增属性时，需要重新遍历对象，Object.defineProperty进行劫持。也就是 Vue2.x$set才能保证新增的属性也是响应式的,Object.defineProperty去处理的。
Proxy有多种拦截方法，如apply，deleteProperty等等，是Object.defineProperty()不具备的。
Proxy是返回值是一个对象，可以直接进行操作，而defineProperty()要先遍历所有对象属性值才能进行操作。Object.defineProperty()兼容性高一些。
11.Teleport Teleport 是 Vue3.x 新推出的功能
Teleport 是什么呢？
Teleport 就像是哆啦 A 梦中的「任意门」，任意门的作用就是可以将人瞬间传送到另一个地方。有了这个认识，我们再来看一下为什么需要用到 Teleport 的特性呢，看一个小例子：
例如我们在使用Dialog组件时，我们实际开发中经常会使用到 Dialog，此时Dialog就被渲染到一层层子组件内部，处理嵌套组件的定位、z-index和样式都变得困难。但是组件希望位于页面的最上方，这时候我们将Dialog组件挂载在body上面是最好控制的，我们能够很好的通过zIndex来控制Dialog的位置，当他嵌套在templat里面的时候就不那么容易了。简单来说就是,即希望继续在组件内部使用Dialog,又希望渲染的 DOM 结构不嵌套在组件内部的 DOM 中。
此时就需要 Teleport 上场，我们可以用Dialog, 此时就建立了一个传送门，可以将Dialog渲染的内容传送到任何指定的地方。
计数：{{ num }}s
主人年龄：{{ person.age }}
主人姓名：{{ person.name }}
动物类别：{{ atype }}
动物名称：{{ aname }}
动物年龄：{{ aage }}
count: {{ age }}
倍数： {{ doubleAge }}
加1
减一
点击打开 Dialog
这是一段信息
取 消
确 定
我们可以很清楚的看到teleport上有一个to属性，这个属性是讲当前节点传送到制定位置去的。位置应该传送到哪里呢？
Vite App
重庆分公司
重庆分公司
