vue2和vue3的区别

main.js

main.js入口文件 ：初始化实例使用的插件（css、router、store），将内容渲染到页面上，项目文件的入口，执行js的时机是从main.js从上到下的执行的
vue2

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

vue3

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

app.vue

app.vue：通常我们通过vue-cli生成脚手架的时候默认显示页面的初始位置
vue2

<template>
  <div id="app">
    <router-view />
  </div>
</template>

vue3

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

选项式(option API)和组合式(Composition API)

钩子函数

vue2使用钩子函数

  mounted() {
    console.log(1)
  }

vue3使用钩子函数

  setup() {
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }

路由

vue2

import Vue from 'vue'
import VueRouter from 'vue-router'
 
// 导入页面
// 目录下的 .vue文件 如果叫index.vue 导入的时候路径只用写到当前组件的目录
import home from '../views/home'
 
Vue.use(VueRouter)
// 配置路由
 
const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: home,
    // meta路由元数据=》传参（携带一些数据）=》访问当前页面的
    meta: {
      title: '首页'
    }
  }
]
 
const router = new VueRouter({
  routes
})
 
export default router

路由跳转

this.$router.push('/')

vue3

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'Layout',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Layout'),
    children: [
      {
        path: '',
        component: () => import(/* webpackChunkName: "Home" */ '../views/home')
      },
    ]
  },
]
 
// 创建路由实例
const router = createRouter({
  // 使用hash方式实现路由
  history: createWebHashHistory(),
  // 配置路由规则，写法和之前一样
  routes
})
 
export default router

vue3.0中createRouter来创建路由实例，createWebHashHistory代表使用hash模式的路由。

跳转路由

import { useRouter, useRoute } from 'vue-router'
export default {
  setup () {
    const route = useRoute()
    const router = useRouter()
 
    const toLink = () => {
      router.push('/')
    }
    const look = () => {
      console.log(route, router)
    }
    return { toLink, look }
  }
}

跳转路由需要引入useRouter 在setup函数中调用再去使用

vuex

vue2和vue3 定义的方式大致一样，只是使用起来有些区别

vue2

import Vue from 'vue'
import Vuex from 'vuex'
 
 
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  getters: {
 
  },
  actions: {
   
  },
  modules: {
  }
})

调用方式

this.$store.state....

vue3

import { createStore } from 'vuex'
 
export default createStore({
  state: {
  },
  mutations: {
  },
  getters: {
 
  },
  actions: {
   
  },
  modules: {
  }
})

调用方式

import { useStore } from 'vuex'
setup(){
 const store = useStore()
 store.state...
}

响应式数据

在vue2中我们在data中定义的数据是响应式的，但在vue3中 不能实现响应式，需要格外导入ref函数和reactive函数

ref
通过ref可以定义简单数据类型、复杂数据类型的数据，但是定义的数据如果要修改或者访问需要在变量名后面加.value属性

import { ref } from 'vue'
setup(){
 const num = ref(null)
 const obj = ref({})
 console.log(num.value++)
}

reactive
reactive只能定义复杂数据类型 用reactive定义的数据 修改时不用使用.value属性

import { reactive} from 'vue'
setup(){
 const list = reactive([])
 console.log(list)
}