vue3的基本认识

1、Vue3带来了什么

①性能的提升

• 打包大小减少41%

• 初次渲染快55%, 更新渲染快133%

• 内存减少54%

②源码的升级

• 使用Proxy代替defineProperty实现响应式

• 重写虚拟DOM的实现和Tree-Shaking

2.拥抱TypeScript

• Vue3可以更好的支持TypeScript

3.新的特性

① Composition API（组合API）

• setup配置
• ref与reactive
• watch与watchEffect
• provide与inject
• …

② 新的内置组件

• Fragment
• Teleport
• Suspense

4、创建Vue3.0工程

①查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

vue --version

②安装或者升级你的@vue/cli

npm install -g @vue/cli

③创建

vue create vue_test

④启动

cd vue_test
npm run serve

5、分析工程结构

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

App.vue

<template>
	<!-- Vue3组件中的模板结构可以没有根标签 -->
	<img alt="Vue logo" src="./assets/logo.png">
	<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'

	export default {
		name: 'App',
		components: {
			HelloWorld
		}
	}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>