核心方法
vue2.x， 通过Object.defineProperty()，遍历循环劫持所有数据
vue3，通过proxy（），可以直接监听对象
diff算法
vue2.x，在数据发生变化时，会生成一个虚拟dom，并和旧的虚拟dom进行对比，这个对比时全量对比，每个节点都会进行比对
vue3，在数据变化时，会生成一个虚拟dom，且为哪些不会发生变化的节点添加静态标记，在与旧虚拟dom对比时，会忽略静态标记的内容，提升速度
创建和挂载方式
vue2.x挂载
import Vue from 'vue' import App from 'https://blog.51cto.com/u_/App' import store from 'https://blog.51cto.com/u_/store' import router from 'https://blog.51cto.com/u_/router' new Vue({ el: '#app', router, store, render: h => h(App) })
vue3
import { createApp } from 'vue' import App from 'https://blog.51cto.com/u_/App.vue' import router from 'https://blog.51cto.com/u_/router' import store from 'https://blog.51cto.com/u_/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 'https://blog.51cto.com/u_/appStore' Vue.use(Vuex) consot modules={} const store = new Vuex.Store({ modules:{ appStore } }) export default store
vue3
import { createStore } from 'vuex' import appStore from 'https://blog.51cto.com/u_/appStore' export default createStore({ modules: { appStore } })
5，store的使用
vue2.x，直接通过this.$store.xxx使用
vue3.x，需要从vuex引入useStore，const store=useStore（）
到此这篇vue2和3什么区别（vue2.x和vue3.x的区别）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/15447.html