# 0、项目文件区别
## 入口文件
**Vue2.x** src/main.js
```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
**Vue3.x** src/main.js
```js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
```
## 路由文件
**Vue2.x** src/router/index.js
```js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
```
**Vue3.x** src/router/index.js
```js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
```
## vuex文件
**Vue2.x** src/store/index.js
```js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
```
**Vue3.x** src/store/index.js
```js
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
```
# 1、数据的双向绑定
Vue2.0使用Object.defineProperty实现。原理：通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知。Vue2.x版本中的双向绑定不能检测到下标的变化。
```html
vue2.x数据双向绑定
```
Vue3.0使用ES6的新特性porxy。原理：通过ES6的新特性proxy来劫持数据，当数据改变时发出通知。proxy可以劫持整个对象，并返回一个新对象。
```html
vue3.0数据双向绑定
```
# 2、项目创建和项目启动不同
Vue2.0创建项目
1. 输入`vue init webpack myApp`
2. 输入配置项
3. 开始项目`npm install`
4. 运行项目`npm run dev`
Vue3.x创建项目
1. 输入 `vue create myApp`
2. 输入配置项
3. 开始项目 `npm install`
4. 运行项目 `npm run serve`
# 3、项目目录
Vue2.0
```bash
myproject2
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
└── static
```
Vue3.0
```bash
myproject3
├── .git
├── .gitignore
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src
```
# 4、对文件的导入
- Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。
- vue3.x中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等。