vue2和vue3新特性的区别

一.项目初始化

vue2在项目初始化中的命令：

vue init webpack 项目名称

vue3在初始化中的命令：

vue create 项目名称

二.项目运行

vue2项目运行命令：

npm run dev

vue3项目运行命令：

npm run serve

三.插槽slot的使用

vue2和vue3在使用具名插槽时，子组件中<slot></slot>标签的占位没有区别，而是在父组件中有区别。

vue2：

<tab-bar-item path="/home">
      <img slot="item-icon" src="../assets/img/tabbar/首页.png" alt="">
      <img slot="item--icon-active" src="../assets/img/tabbar/首页a.png" alt="">
      <div slot="item-text">首页</div>
</tab-bar-item>

vue3：

<tab-bar-item path="/home">
      <template v-slot:item-icon >
        <img  src="@/assets/img/tabbar/首页.png" alt="">
      </template>
     <template v-slot:item--icon-active>
       <img  src="@/assets/img/tabbar/首页a.png" alt="">
     </template>
      <template v-slot:item-text>
        <div>首页</div>
      </template>
</tab-bar-item>

即在vue3中必须用<template></template>标签包裹，并在标签中添加v-slot:插槽名。

四.main.js文件

vue2中main.js文件的配置（添加路由）：

import Vue from 'vue'
import App from './App'
import router from "./router";
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

vue3中：

import {createApp} from 'vue'
import App from './App'
import router from "@/router";

createApp(App).use(router).mount('#app')

如果不添加路由，即把路由的引用语段和.use(router)删除即可。

五.配置路由的index.js文件

vue2中的路由配置：

import  Vue from 'vue'
import  VueRouter from 'vue-router'

const Home = () =>import('../views/home/Home')//路由懒加载

//安装插件
Vue.use(VueRouter)

//创建路由对象
const routes =[
  {
    path:'',
    redirect:'/home'
  },

  {
        path:'/home',
        component:HomE
  },
]
const router=new VueRouter({
    routes,
    mode:'history'
})

//路由的导出
export default router

vue3中的路由配置：

import { createRouter, createWebHashHistory } from 'vue-router'

//通过懒加载的方式导入
const HomE = () =>import('../views/home/HomE')

//创建路由对象
const routes =[
    {
        path:'',
        redirect:'/home'
    },
    {
        path:'/home',
        component:HomE
    },
]


const router = createRouter({
    routes,
    history: createWebHashHistory()
})


//路由的导出
export default router

六.v-for的使用

在vue2中，v-for的使用无需加key值

<div v-for="item in titles">{{item}}</div>

而vue3中，v-for的使用必须添加key值

<div v-for="item in titles" :key="item">{{item}}</div>

暂时就先更新到这里，有新发现我再添加。