Vue3.0+Ts仅供个人使用+通俗易懂Transcript环境配置基础搭建npminstall-g@vue/cliyarnglobaladd@vue/cli创建项目vuecreateprojectName注：vue2.0升级到vue3.0vueaddtypescriptvue2.0有一些问题，组件之间依赖很深，导致组件维护困难跨组件代码复用，做组件不是特别友好的api2.使用这个API，TypeScript支持大型组件，Compositionapi组合可以很好地管理状态，跨组件复用代码3.steupsetup简介是另一种用来配置组件状态的实现。如果setup中定义的状态和方法要在模板中使用，returnsetup:()=>{constlist=ref([])//assignmentlist.value=[]return{list}}特别注意：setupmethodThis4.ref无法在[components,propsdataMethodsComputedLifecyclemethods]之前的设置中访问。在Vue2中创建响应式变量之前，直接在data.xml中定义一个响应式变量即可。使用组合api，我们必须在设置中使用ref来创建响应变量，并且必须返回它才能在页面中使用它。示例import{ref}from'vue'//初始化变量consttest=ref('defaultvalue')//assigntest.value='kaishi....'//return(returnablemethod)return{test}Actual栗子的使用5.LifecycleCompositionApi生命周期钩子和vue2.0一样，只是多了一个前缀onvue2.0lifecyclebeforeCreate:function(){console.log('BeforeCreate');},创建:function(){console.log('Created');},beforeMount:function(){console.log('BeforeMount');},mounted:function(){console.log('Mounted');},beforeUpdate:function(){控制台。日志（'更新前'）;}，更新:function(){console.log('Updated');},beforeDestroy:function(){console.log('BeforeDestroy');},destroyed:function(){console.log('Destroyed');}注：onMounted在mounted之前执行对照表APIHook(setup)beforeCreatecreatedbeforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmountederrorCapturedonErrorCapturedrenderTrackedonRenderTrackedrenderTriggeredonRenderTriggered6.setup中使用watch响应式更改//引入import{watch}from'vue'//它有三个参数1.要监听更新的响应式引用Orgetterfunction2.Acallbacktodotheupdatedoperation3.Optionalconfigurationitem7.setup从vue导入computed，computed函数返回一个只读的响应式引用，作为computed的第一个参数传递的getter类回调的输出为了访问新创建的计算变量的值，我们需要使用.value属性，如ref,computed}from'vue'exportdefaultdefineComponent({name:'Demo',data(){return{}},setup(props){constcount=ref(10)setTimeout(()=>{count.value=20})constn=computed(()=>{returncount.value})console.log(n.value)return{n,}}})8.关于setup接收两个参数props:parent组件传递的属性，setup函数中的props是响应式的，会随着数据的更新而更新，以及不能使用ES6解构，因为它不会让道具响应。context:是一个普通对象，暴露了3个组件的属性，context是无响应的，可以用es6解构分析，解析Attribute(attrs)槽(slots)来触发事件组件加载设置p注意事项组件执行setup时，没有创建组件实例，无法访问以下属性：datacomputedmethods9。跨组件传值在Vue2中可以使用Provide/Inject实现跨组件传值，在Vue3中也可以使用在setup中使用Provide创建响应变量，带ref/reactive使用provide('name','responsivevariabletopass')添加事件更新响应变量，使响应变量更新，provide中的变量跟随更新使用示例：父组件子组件<template>

10.TypeScript使用接口约束类型interfacereactive使用reactive()函数接收正常对象，返回一个响应式数据对象ref和reactiveref只能监听简单的数据，reactive可以监听所有数据ref修改数据需要使用这样的count.value=xxxForm，而reactive只需要ref修改数据，需要用到这样的count。属性名称=值。这样使用reactive就需要toRefs在返回的时候将其转化为响应式对象。反应式使用###关于接口使用https://www.cnblogs.com/xch-j...