vue3与vue2.x的区别

 

核心方法

vue2.x， 通过Object.defineProperty()，遍历循环劫持所有数据

vue3，通过proxy（），可以直接监听对象

 

 

diff算法

vue2.x，在数据发生变化时，会生成一个虚拟dom，并和旧的虚拟dom进行对比，这个对比时全量对比，每个节点都会进行比对

vue3，在数据变化时，会生成一个虚拟dom，且为哪些不会发生变化的节点添加静态标记，在与旧虚拟dom对比时，会忽略静态标记的内容，提升速度

 

 

 

创建和挂载方式

 

vue2.x挂载

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

 

vue3

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const vm = createApp(App)
vm.use(store).use(router).mount('#app');

 

 

 

组件创建

vue2.x

<template>
  <div />
</template>

<script>
export default {
  name: '',
  data() {
    return {
    }
  }
}
</script>

 

 

vue3

<template>
  <div />
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: '',
  setup() {
    return {
    }
  }
})
</script>

 

 

 

 

全局变量

vue2.x

//main 
Vue.prototype.$xxx='xxxx'

//其他组件
this.$xxx

 

 

vue3

var app=createApp(App)

app.config.globalProperties.$xxx='xxx'


//组件内使用
import { getCurrentInstance } from 'vue'


const { proxy } = getCurrentInstance()
const sysName = proxy.$systemName

 

 

 

生命钩子

vue2.x

<script>
export default {
  name: '',
  data() {
    return {
    }
  },
  beforeCreate(){
  //初始化前
  },
  created(){
  //初始化
  },
  actived(){
  //keep-alive 
  },
  deactived(){
  
  },
  beforeMounte{
  //挂载前
  },
  mounted(){
  //挂载
  },
  beofreUpdate(){
  //数据更新前
  },
  update(){
  //数据更新
  },
  beforeDestroy(){
  //销毁前
  },
  destroy(){
  //销毁
  }
}
</script>

 

 

 

vue3

<script>
import { defineComponent,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
export default defineComponent({
  name: '',
  setup() {
        onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
    return {
    }
  }
})
</script>

 

 

 

其他不同

1，变量定义

vue2.x，直接在data（）{ return { }} return里的对象放置属性即可

vue3，在setup里，需要在vue里引入ref和reactive来分别定义基础类型和引用类型，再return

 

2，props，emit，slots，attrs 

vue2.x, props在注册完毕后，可以直接通过this.xxx来调用数据，emit，slots，attrs这些直接通过this.$emit,this.$slots,this.$attrs使用

vue3， props在注册完毕之后，可以在setup里参数获取

setup (props，{emit，slots，attrs}){

}

 

 

 

3，router的创建

vue2.x

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const routes=[
]

const createRouter = () => new Router({
  mode: 'hash',//history
  routes: routes
})

const router = createRouter()

export default router

 

 

vue3

import { createRouter,createWebHashHistory} from "vue-router";

const routes = [

]

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

 

 

4,router的使用

vue2.x 直接使用this.$router和this.$route使用

vue3，需要从vue-router引入 useRoute userRouter两个函数的实例来使用

 

 

5，store的创建

vue2.x

import Vue from 'vue'
import Vuex from 'vuex'
import appStore from './appStore'
Vue.use(Vuex)

consot modules={}

const store = new Vuex.Store({
  modules:{
   appStore 
 }
})

export default store

 

 

 

 

vue3

import { createStore } from 'vuex'
import appStore from './appStore'

export default createStore({
  modules: {
    appStore
  }
})

 

 

 

5，store的使用

vue2.x，直接通过this.$store.xxx使用

vue3.x，需要从vuex引入useStore，const store=useStore（）