vue3与vue2的区别是什么

这篇“vue3与vue2的区别是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3与vue2的区别是什么”文章吧。

创新互联建站-专业网站定制、快速模板网站建设、高性价比东辽网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式东辽网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖东辽地区。费用合理售后完善,10余年实体公司更值得信赖。

vue3与vue2的区别是什么

1.生命周期的变化:3.x(上) 2.x(下)

vue3与vue2的区别是什么
vue3与vue2的区别是什么

不难看出,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与vue2的区别是什么

所以在 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就将节点挂载在这里来了


  
    
    
    
    Vite App
  
  
    

    

       

如图所示:
vue3与vue2的区别是什么

12.Suspense

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

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

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


      
        

Loadding...

              

效果如图:
vue3与vue2的区别是什么

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的区别是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


本文题目:vue3与vue2的区别是什么
网页网址:http://scyanting.com/article/pghjhc.html