一、创建项目

1.是2开头说明当前使用的是vue-cli2，3开头的话就是vue-cli4

查看当前版本的命令

vue --version

2.如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装 安装3.0版本: 目前新项目搭建脚手架默认安装得是3.0版本

npm install -g vue-cli

3.如果是旧项目2.0版本到3.0切换得同学，即卸载当前版本，安装另外的版本 从2.0升级到3.0：

npm uninstall -g vue-cli
​
npm install -g @vue/cli

4.从新版本降到旧版本

从3.0降到2.0：

npm uninstall -g @vue/cli
npm install -g vue-cli

二.vue2.0版本目录

三.vue3.0版本目录

• vue-cli2.0与3.0在目录结构方面，有明显的不同

• vue-cli3.0移除了配置文件目录，config 和 build 文件夹

• 同时移除了 static 静态文件夹，新增了 public 文件夹，打开层级目录还会发现， index.html 移动到 public 中

• 3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同

• 没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变

• 移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中

• 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

3.0版本中不同环境的webpack配置文件也没有了（webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js） 同样，我们也可以再根目录中创建vue.config.js文件来进行webpack和vue的一些配置

四、2.0与3.0生命周期函数比较：

2.0周期名称     3.0 周期名称    说明

beforeCreate         setup       组件创建之前

created                  setup       组件创建完成

beforeMount    onBeforeMount   组件挂载之前

mounted            onMounted       组件挂载完成

beforeUpdate  onBeforeUpdate   数据更新，虚拟 DOM 打补丁之前

updated                onUpdated       数据更新，虚拟 DOM 渲染完成

beforeDestroy  onBeforeUnmount     组件销毁之前

destroyed            onUnmounted          组件销毁后

<template>
 
<router-link to="/">点这里去首页</router-link>
 
<hr>
 
<div class="home">
 
这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
<button @click="countAdd">点击加数字</button>
 
</div>
 
</template>
 
<script>
 
// 你需要使用到什么生命周期，就引出来什么生命周期
 
import {
 
onBeforeMount,
 
onMounted,
 
onBeforeUpdate,
 
onUpdated,
 
onBeforeUnmount,
 
onUnmounted,
 
ref
 
} from 'vue'
 
 
export default {
 
// setup 函数，就相当于 vue 2.0 中的 created
 
setup () {
 
const count = ref(0)
 
// 其他的生命周期都写在这里
 
onBeforeMount (() => {
 
count.value++
 
console.log('onBeforeMount', count.value)
 
})
 
onMounted (() => {
 
count.value++
 
console.log('onMounted', count.value)
 
})
 
// 注意，onBeforeUpdate 和 onUpdated 里面不要修改值，会死循环的哦！
 
onBeforeUpdate (() => {
 
console.log('onBeforeUpdate', count.value)
 
})
 
onUpdated (() => {
 
console.log('onUpdated', count.value)
 
})
 
onBeforeUnmount (() => {
 
count.value++
 
console.log('onBeforeUnmount', count.value)
 
})
 
onUnmounted (() => {
 
count.value++
 
console.log('onUnmounted', count.value)
 
})
 
// 定义一个函数，修改 count 的值。
 
const countAdd = () => {
 
count.value++
 
}
 
return {
 
count,
 
countAdd
 
}
 
}
 
}
 
</script>

首先，在 vue 3.0 中，生命周期是从 vue 中导出的，我们需要用到哪些，就导出哪些。

在大多数的组件中，我们用不到生命周期。即便是页面级别的应用，可能用到最多的是 onMounted 即可。

当然，那些绑定时间的操作会用到解绑，因此会用到 onUnmounted。其它的生命周期，正常情况下是基本用不到的。所以，通过引入使用的这种设定，可以减少我们的最终编译的项目的体积。而且，这样的引入使用，更加的逻辑清晰。

其次，除 setup 之外，其他的生命周期函数，都是在 setup 里面直接书写函数即可。

五、对文件的引用上

Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。

Vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等。

六、项目的启动

vue2.x版本启动

npm run dev

vue3.x版本启动

npm run serve

七、语法方面

1.v-model语法糖废弃，改用modelValue

<input v-model="value" />
 
<input modelValue="value" />

2.弃用全局API new Vue,使用createApp

const app = Vue.createApp({})

3.弃用Vue.prototype,在Vue3中，我们可以使用如下定义方式

const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

4.全局方法现在全部在app实例上，例如：

`app.directive`,`app.use`等

5.现在你需要手动挂载根节点

main.js
 
 
import { createApp } from 'vue'
 
import App from './App.vue'
 
 
createApp(App).mount('#app')

6.不能再使用Vue.nextTick/this.$nextTick，Vue3中你可以用：

import { nextTick } from 'vue'
nextTick(() => {
  // something
})

7.允许template设置key

8.正式弃用scopedSlots正式弃用，旧的不去新的不来。

9.监听数组变化需要使用deep属性，否则只能监听到整个数组被替换。

10.弃用$children，访问子组件可以使用$ref

11.filter被移除，我X，不能再使用|了。

12.移除事件API，$on,$once,$off不再使用。EventBus方法也不再使用。

八、新加入了Typescript以及PWA的支持

九、更精准的变更通知

2.x版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行 3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。