一、Vue3初体验

作者: 温新

阅读: 2496

时间: 2021-01-31 11:59:34

Vue3与Vue有什么区别？Vue2.x到Vue3这个过程及结果，中间发生了巨大的变化。Vue2.x可以升级到Vue3.0，很遗憾，不能升级。如同 ThinkPHP3到ThinkPHP5发生了翻天覆地的变化，无法直接升级。因此，只有重新学习。不过有Vue2.x的基础之后，学习起来还是很容易。

未来开发中选择版本必然是Vue3，但是当下该选择使用Vue2.x还是继续使用。但是作为即将投入生产环境中的Vue3，学习它刻不容缓。

今天做一个Vue的初体验。Vue3 Go。

Vue3案例

<!DOCTYPE html>
<html>
<head>
	<title>Vue3初体验</title>
	<meta charset="utf-8">
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		webName:{{ webName}}
	</div>

	<script>
		Vue.createApp({
			data () {
				return {
					webName:'自如初'
				}
			}
		}).mount('#app')
	</script>
</body>
</html>

Vue3通过createApp函数创建一个新的应用实例；通过mount函数挂载Vue实例接管区。

Vue2.x案例

<!DOCTYPE html>
<html>
<head>
	<title>Vue2.x</title>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		网站名：{{ message }}
	</div>

	<script>
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: "自如初博客"
		  }
		})
	</script>
</body>
</html>

体验对比

关于Vue2.x的案例就不在多说了。

Vue3是一个全新的Vue，Vue2.x中的一些方法在Vue中已被抛弃。

从这两个案例中可以看出，Vue3与Vue2.x创建实例的方法截然不同了。习惯了Vue2.x后再来看Vue3会觉得有些陌生但又有些似曾相识。

Vue3的优点是非常明显的，从这两个案例中来看，Vue3的调用更加简洁更加美观。

Vue2.x提供18个月维护，现在开始一起来学习Vue3并使用它吧。

2020-01-31

请登录后再评论