vue3与vue2的区别是什么

这篇“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，
例如：
vue2 的输入框的双向绑定，其实就相当于传递了value属性， 并触发了input事件：

这时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 中应该怎样实现的呢？
在 Vue3 中, 在自定义组件上使用v-model, 相当于传递一个modelValue 属性， 同时触发一个update:modelValue事件：

如果要绑定属性名， 只需要给v-model传递一个参数就行, 同时可以绑定多个v-model：

这个写法完全没有.sync什么事儿了， Vue 3 中抛弃了.sync写法， 统一使用v-model。

7.异步组件的使用

Vue3 中 使用 defineAsyncComponent 定义异步组件，配置选项 component 替换为 loader ,Loader 函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise，用法如下：

我们可以很清楚的看到teleport上有一个to属性，这个属性是讲当前节点传送到制定位置去的。位置应该传送到哪里呢？
答案就是在index.html上面
下面是我们的首页 你会看到有一个p的ID名为dialogLL，teleport就将节点挂载在这里来了

如图所示：

12.Suspense

Suspense是 Vue3.x 中新增的特性， 那它有什么用呢？我们通过 Vue2.x 中的一些场景来认识它的作用。 Vue2.x 中应该经常遇到这样的场景：

在前后端交互获取数据时， 是一个异步过程，一般我们都会提供一个加载中的动画，当数据返回时配合v-if来控制数据显示。
它提供两个template slot, 刚开始会渲染一个 fallback 状态下的内容， 直到到达某个条件后才会渲染 default 状态的正式内容， 通过使用
Suspense组件进行展示异步渲染就更加的简单。
具体的使用，我们可以用下面的例子来表示：
这是需要等待取值完成的的组件：

在其他组件内调用它，当等待取值的组件取值完成后，会将loading状态变为OK状态

      
        
Loadding...
      
    
  

效果如图：

13.片段（Fragment）

在 Vue2.x 中， template中只允许有一个根节点：

但是在 Vue3.x 中，你可以直接写多个根节点：

14.Tree-Shaking变化

Vue3.x 在考虑到 tree-shaking的基础上重构了全局和内部 API, 表现结果就是现在的全局 API 需要通过 ES Module的引用方式进行具名引用， 比如在 Vue2.x 中，我们要使用 nextTick:

// vue2.ximport Vue from "vue"Vue.nextTick(()=>{
    ...})或者 
this.nextTick(()=>{
    ...})

Vue.nextTick() 是一个从 Vue 对象直接暴露出来的全局 API，其实 $nextTick() 只是 Vue.nextTick() 的一个简易包装，只是为了方便而把后者的回调函数的 this 绑定到了当前的实例。
在 Vue3.x 中改写成这样：

import { nextTick } from "vue"nextTick(() =>{
    ...})

受影响的 API

这是一个比较大的变化， 因为以前的全局 API 现在只能通过具名导入，这一更改会对以下 API 有影响：

1. Vue.nextTick

2. Vue.observable（用 Vue.reactive 替换）

3. Vue.version

4. Vue.compile（仅限完整版本时可用）

5. Vue.set（仅在 2.x 兼容版本中可用）

6. Vue.delete（与上同）

以上就是关于“vue3与vue2的区别是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。