Vue3和Vue2对比,我们如何选用?

Vue3带来的新变化

  1. 性能提升(零成本:从vue2切到vue3就享受到)

    首次渲染更快,diff算法更快,内存占用更少,打包体积更小,....

  2. 更好的Typescript支持(在vue下写TS更方便了)

  3. 提供新的写代码的方式:Composition API (需要学习成本)

这些Vue2.0的语法不能用了

vue3.0对于2.0版本的大部分语法都是可以兼容的(之前是怎么写的,现在也正常写),但是也有一些破坏性的语法更新,这个大家要格外注意

        1.移除了vue实例上的$on方法 (eventBusVue.prototype.$eventBus=new Vue(); this.$on('事件名', 回调)现有实现模式不再支持,可以使用三方插件替代)。下边是vue2中eventBus的用法

Vue.prototype.$eventBus = new Vue()
组件1
this.$on('事件名', 回调)
组件2
this.$emit('事件名')

        2.移除过滤器选项 。下边是vue2中过滤器的用法:

<div>{{ msg | format}}</div>
插值表达式里, 不能再使用过滤器filter, 可以使用methods替代
{{format(msg)}}

        3.移除 .sync语法(v-bind时不能使用.sync修饰符了,现在它v-model语法合并了)。下边是vue2中.sync的用法

<el-dialog :visibel.sync="showDialog"/>  

小结

  1. vue3发布已久,相关生态基本成熟,是学习的好时机;

  2. 新变化:性能提升;更好支持TS; 提供compositionAPI;

  3. 抛弃了:$on, filter, .sync

vue2和3的项目区别

主要看三个位置:

  1. package.json

  2. main.js

  3. app.vue

package.json

首先我们可以看一下package.json文件,在dependencies配置项中显示,我们当前使用的版本为3

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.2.25"  // 版本号
}

main.js

import Vue from 'vue'
import App from './App.vue'
new Vue({render: h => h(App)}).$mount('#app')

vue3.x的写法

import { createApp } from 'vue'
import App from './App.vue' // 根组件
createApp(App).mount('#app')

app.vue

打开app.vue发现:vue3.0的单文件组件中不再强制要求必须有唯一根元素

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

以上就我们当前阶段需要关注的所有的内容,接下来我们就可以基于当前环境学习vue3的知识点了。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇

)">
下一篇>>