Lehman-Blog - vue2
type: channel
link: https://blog.lehman.top/tag/vue2/
items: vue2和vue3的对比

vue2和vue3的对比
type: item
date: 2022-06-14T10:38:00+08:00
description: 创建方式不同vue2 是一个构造函数，通过new创建一个Vue实例new Vue({}) vue3 是一个对象。通过对象Vue的createApp()方法创建一个vue实例Vue.createApp({}) 挂载容器的方式不同vue2new Vue({ el: '#app' }) new Vue({}).$mount('#app') vue3Vue.createApp({}).mount('#app') 双向数据绑定原理改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下 1.defineProperty只能监听某个属性，不能对全对象监听 2.可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可） 3.可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化 生命周期钩子 — Lifecyle HooksVue2--------------vue3 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted activated -> onActivated deactivated -> onDeactivated API风格的改变Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。vue2 Options API（选项式API）存在的问题：使用传统的Options API时，新增或者修改一个需求，就需要分别在data、methods、computed、watch等里面不断地寻找、修改。如果代码量大的时候，修改起来就很痛苦。vue3中 Composition API（组合式API）的优势：更加优雅的组织我们的代码、函数，让相关功能的代码更加有序的组织在一起，都写在setup里面。甚至可以把他们都变成一个个hook函数，修改那部分就可以直接去对应的文件里修改。把定义数据、方法这部分也添加了模块化封装的思想技术栈-拍档对比vue2名称简介文档 Node.jsJavaScript 运行环境https://nodejs.orgJavascriptJavascripthttps://www.javascript.com/npm包管理工具https://www.npmjs.comVue CLI前端开发与构建工具https://cli.vuejs.org/Vue.js渐进式 JavaScript 框架https://staging-cn.vuejs.orgVue RouterVue.js 官方路由管理器https://next.router.vuejs.orgVuex用于 Vue 的状态管理库https://vuex.vuejs.org/Axios简洁、易用且高效的 http 库http://www.axios-js.comLessCSS 预处理、扩展语言（css可选其它）https://lesscss.orgAntDesignVueAntDesign 的 Vue 实现（UI可选其它）https://antdv.comvue3名称简介文档 Node.jsJavaScript 运行环境https://nodejs.orgTypeScriptTypeScripthttps://www.typescriptlang.org/Yarn包管理工具https://yarnpkg.comVite下一代前端开发与构建工具https://cn.vitejs.devES6ECMAScript 6https://es6.ruanyifeng.comVue.js渐进式 JavaScript 框架https://staging-cn.vuejs.orgVue RouterVue.js 官方路由管理器https://next.router.vuejs.orgPinia用于 Vue 的…