关于VUE3.0由于vue3.0的语法几乎完全兼容vue2.x的语法，本文主要介绍如何使用composition-api，主要分为以下几点在使用vite体验vue3.0composition-api方面，vue3.0composition-api解决了哪些问题？.composition-api解决什么问题？使用传统的选项配置方式编写组件时，随着业务的复杂度越来越高，代码量会不断增加；因为相关业务的代码需要跟随option的配置写入具体的Compositon-api提供了几个函数reactwatchEffectcomputedreftoRefslifecyclehooksreactiveimport{reactive,computed}from'vue'exportdefault{setup(){conststate=reactive({count:0})functionincrement(){state.count++}return{state,increment}}}Reactive相当于当前的Vue.observable()API，react处理后的函数可以成为响应式数据，类似于optionapiwatchEffectimport{reactive,computed,watchEffect}from'vue'exportdefault{setup(){conststate=reactive({count:0})constdouble=computed(()=>state.count*2)functionincrement(){state.count++}watchEffect(()=>{console.log(double.value)})return{状态，递增}}}Vue检测状态变化的方法，我们可以在渲染时使用它感谢依赖跟踪，当反应状态变化时，视图将自动更新。在DOM中渲染某些东西被认为是一种“副作用”：我们的程序在程序本身(DOM)之外修改状态。要应用和自动重新应用基于响应状态的副作用，我们可以使用watchEffectAPI=>state.count*2)functionincrement(){state.count++}return{state,increment}}}有时我们需要依赖于其他状态的状态——在Vue中这是通过计算属性处理的。直接创建一个计算值，我们可以使用上面的computedAPIref来返回computedproperty计算结果是什么？如果我们猜测computed是如何在内部实现的，我们可能会得出以下结论：如果value是像number这样的原始类型，它与computed内部更新逻辑的连接一旦返回就会丢失。这是因为JavaScript基本类型是按值传递的，而不是按引用传递的。当将值作为属性分配给对象时，也会出现同样的问题。如果在分配给属性或从函数返回时不保持其响应性，则反应值没有多大用处。为了确保我们始终可以读取最新的计算值，我们需要将实际值包装在一个对象中并返回该对象functioncomputed(getter){constref={value:null}watchEffect(()=>{ref.value=getter()})returnref}所以要获取ref和computed的值应该是返回值下面的valueletcount=ref(1)console.log(count.value)//1letdouble=computed(()=>count.value*2)//2值得注意的是，当我们在模板中使用ref或computed时，vue会自动用reactive处理它们，而不会使用count.value或double.value的值，这两个
