vue3出来一段时间了，项目中还没有真正实践，只是写了些简单的demo。vue3相比vue2改动还是非常大的，相信不久vue3将会成为主流，打算写个系列作为学习输出。
关于两者的区别相信都能说出很多知识点，但是知识点不使用感受还是不大。这篇文章通过一个简单的实例分析下两者的区别。
1. 入门demo
我们先来感受下vue3使用最简单的写法，新建一个html，引入vue3的cdn地址（官网文档提供的地址），代码如下：
<html>
<body>
<div id="app">
<h4>{{info.msg}}</h4>
<div>{{title}}</div>
<button @click="changeTitle">改变title</button>
</div>
// 引入vue3.0
<script src="https://unpkg.com/vue@next"></script>
// vue3实例写法
<script>
// 通过解构方式拿到相关方法
const {createApp, reactive, ref} = Vue;
const app = createApp({
// setup是新增的生命周期函数，作为总启动入口，其他生命周期、方法，变量声明定义都要写到这个函数里面
setup() {
// 基本类型变成响应式，init是变量title的初始值
let title = ref('init');
// 引用类型变成响应式
let info = reactive({msg: 'hello vue3'});
const changeTitle = () => {
// 基本类型改变值需要.value
title.value = 'change title';
info.msg = 'msg'
}
// 模板中用到的变量和方法都需要return，不然不会生效（一开始方法changeTitle没return，排查了半天才发现没有return出来）
return {
info,
title,
changeTitle
}
}
});
// 挂载id为app的dom元素
app.mount('#app');
</script>
</body>
</html>
// vue2 实例写法
<script>
const app = new Vue({
// 这里不传，需要app.$mount('#app')挂载
el: '#app',
data: {
title: 'hi, vue2'
},
// 方法
methods: {
changeTitle() {
this.title = 'change title';
}
}
})
</script>
2. 主要区别点
2.1 挂载方式
-
vue3.0可以通过解构的方式拿到
createApp方法，通过该方法得到app调用mount进行挂载。这也是vue3函数式编程的设计理念，这种设计方式可以按需引入资源，更好的利用tree-shaking来减小打包体积。 -
vue2.0 是通过
new Vue创建实例，通过参数el确定挂载的dom进行挂载，也可以不传el直接使用app.$mount('#app')。
可见vue3.0功能模块拆分的更加细，可以单独使用某个功能（例如响应式），实现真正的按需使用。
挂载流程对应源码文件packages/vue--> packages/runtime-dom --> packages/runtime-core/renderer 可以看到createApp等方法，如图所示：
2.2 生命周期函数
vue3中移除了beforeCreate 和 created，增加了setup函数。其他周期函数基本就是命名上在vue2.x的基础上加上on前缀，以驼峰命名方式命名，要写到setup函数里面。
此外还增加了onRenderTracked和onRenderTriggered是用来调试的,这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。
vue3.0采用函数式编程方式，打破了this的限制，能够更好的复用性，真正体现实现功能的高内聚低耦合，更利于代码的可扩展性和可维护性。
2.3 数据响应方式
-
vue3.0提供了
reactive和ref，一般ref可以用来定义基础类型，也可以是引用类型，reactive只能用来定义引用类型。ref的本质就是
reactive({value: 原始数据})，例如Ref(10)=>Reactive({value:10});对于引用类型，什么时候用ref，什么时候用reactive？简单说，如果你只打算修改引用类型的一个属性，那么推荐用reactive，如果你打算变量重赋值，那么一定要用ref。
ref定义的变量通过
变量.value = xxx改变，reactive定义的变量通过 obj.xx = xx 即可。 -
vue2.0直接将数据放到了data中，通过this.xx = xx 来改变。
针对数据响应原理两者变化很大，vue2.0是利用object.defineProperty，vue3.0是利用Proxy和Reflect来实现，最大的优势就是vue3.0可以监听到数组、对象新增/删除或多层嵌套数据结构的响应。
上面几点是明显的区别点，还有很多隐形的区别点，比如编译阶段做了很多性能优化和打包体积更好的利用tree-shaking。
3. 总结
刚开始使用可能会有些不习惯，毕竟打破了原有的开发习惯。随着对vue3理解越深，发现vue3还是挺香的，打破现有舒适区才能迎接更好的舒适区。
感谢点赞支持哟~
附上webpack系列历史文章：
【webpack系列】从源码角度分析webpack打包产出及核心流程
【webpack系列】从源码角度分析loader是如何触发和执行的
【webpack系列】webpack是如何解析模块的
【webpack系列】webpack的plugin插件是如何运行的
【webpack系列】从源码角度分析webpack热更新流程
【webpack系列】从源码角度深度剖析html-webpack-plugin执行过程
