vue3.0进阶

1、vue3.0的性能提升
(1)打包大小减少41%；
(2)初次渲染快55%，更新快33%；
(3)内存使用减少54%。
Composition Api
ref和reactive
computed和watch
新的生命周期函数
自定义函数-Hooks函数
其他新增特性
Teleport-瞬移组件的位置
Suspense-异步加载组件的新福音
全局API的优化和修改
还更好的支持typescript
在vue2中随着代码的增长，复杂组件的代码变得难以维护。
vue2对于typescript的支持很有限。
vue3的好处
vue3有个shims-vue.d.ts是专门为vue文件创建的定义文件，因为.vue在ts中是不被认可的。
vue3中我们不需要使用
在vue3的组件中不需要使用methods以及data使用的是
setup方法
vue2增加一个变量需要在

<div id="main">
   <h1>{{count}}</h1>
   <h2>{{double}}</h2>
  <button @click="increase">✋🏻+1</button> 
</div>
<script>
export default {
//vue2
	data(){
	 return {
	    count:0;
	  }
	},
	methods:{
		increase(){
     		this.count++
         }
	}
	
}
</script>
<script lang="ts">
import {ref,computed} from "vue"
export default {
	//而在vue3中我们需要
	setup(){
		const count = ref(0); //响应式对象ref
		const double = computed(()=>{
			return count.value*2
        })
		const increase = ()=>{
          count.value++
          //为什么值存在count.value上为啥模板直接用count呢，因为vue3的内部对于ref对象在模板引用的时候可以直接把值展示出来而不是使用对象.
        }
		return {
		    count,
		    increase,
		    double
		}
	}
}
</script>