摸鱼第二天

vue3后台开发一般会使用element-plus来辅助开发

• vue中组件的封装和自定义事件重要
• vue3中主要使用组合api

import { defineComponent, reactive, ref } from vue;
import xxx from './xxx'
export default defineComponent({
  name:'xxxx',
  //引入其他的组件
  components:{xxx},
  //vue3中自定义分发事件
  emits:['tabClick']
  serup(props,{ emit }){
  const activeTab = ref('1')
  const tabClick =(tab:string):void=>{
   activeTab.value = tab
   emit('tabClick',tab)
  }
  const target = reactive({
   name:'',
   data:[],
   nameData:[]
  })
  //筛选符合条件的数组
  data = nameData.filter((item)=>{
      return item.x.includes(traget.name)
  })
  }
  //element表格项
  //vuue3tsx插槽的写法
  <el-tabel-column
  label="xxxx"
  width="0"
  v-slots={{
  default:(scope:any)=>{
  return(
  <el-button
  onClick={():void=>{
  localStorage.setItem('xx',scope.row)
  router.push(name:'',params:scope.row)
   }
  }
  ><el-button>
  )
  }
  }}
  >
  </el-tabel-column>
})

vue2中生命周期与vue3的生命周期

vue2 beforeCreate created beforeMount mounted brforeUpdate updated beforeDestroy destroyed

vue3 beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted

与vue版本生命周期相对应的组合式API

• beforeCreate created --> 使用 setup()
• beforeMount --> onBeforeMount
• mounted --> onMounted
• beforeUpdate --> onBeforeUpdate
• updated --> onUpdared
• beforeDestroy --> onBeforeUnmount
• destroyed --> onUnmouned
• errorCaptured --> onErrorCaptured