vue3实战用法

今年开始公司的项目要求使用vue3了  理由是vue2停止维护了  （其实有什么关系呢   不过无所谓 权当学习）

需要注意

1. vue3里面没有this指向

2.定义值和方法 还有生命周期都在script里面写  用啥都要先引入 import { ref } from 'vue'

下面不多说 直接上代码

1.用reactive定义值

用reactive定义需要引入
import { reactive } from 'vue'
const form = reactive({
  status: '',
  area: '全部'
})

赋值的话
form.status = 2

2.用ref定义值

用ref定义需要引入
import { ref } from 'vue'

const status = ref([])
赋值的话 status.value = []

const statisarr = ref({})
赋值的话 statisarr.value = {}

const cgsRadio = ref('采购商')
赋值的话 cgsRadio.value = '111'

3.写事件

参数可带可不带  饿了么的下拉框 时间控件等默认都能用(e)拿到
function selectChange(e) {
    // 执行要做的事
}

4.生命周期

举个例子
还是先引入
import { onMounted } from 'vue'

onMounted(() => {
  initData()
})

5.父子组件通信

父组件 跟V2一样的写法
<assistant :showAssistant="showAssistant" @closeAssistant="closeAssistant" />

const showAssistant = ref(true)
function closeAssistant() {
  showAssistant.value = false
}

子组件接收  注意子组件要先引入defineProps和 defineEmits
import { defineProps, defineEmits} from 'vue'
接收值：
const props = defineProps({
  showAssistant: Boolean
})
调父组件方法
const emit = defineEmits(['closeAssistant'])
function closeDrawer() {
  emit('closeAssistant')
}

6.路由跳转

先引入路由
import { useRouter } from 'vue-router'

const router = useRouter()
A页面跳转
function lookDetail(item) {
  localStorage.setItem('enterpriseInfo', JSON.stringify(item))
  const query = {id: item.id}
  router.push({ name: 'companyDetail', query})
}

B页面拿参数
还是得先引入
import { useRoute } from 'vue-router'

const route = useRoute()

onMounted(() => {
  console.log(route.query)
})

7.调接口

api文件
export function queryBidPage(data) {
  return axios.post(`${commonBaseUrl}/api/xxx`, { ...data })
}

还是先引入
import { queryBidPage } from '@/api/customer.ts'

const initbidpage1 = async () => {
    let params = {
      bidType: '1'
    }
    const data = await queryBidPage(params)
    console.log(data)
}

8.饿了么的图标

饿了么的icon是需要单独在main.ts里面引入的

main.ts代码
import * as ElementPlusIconsVue from '@element-plus/icons'

const app = createApp(App)  // 这段代码main.ts本来就有 下面的for循环这3行写下面就行

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
}

.vue文件使用
可以直接使用了
<el-icon><CirclePlus /></el-icon>

template和style部分写法和vue2一样，开发起来不会太困难，会vue2的一般可以直接上手vue3，我写的时候也是打开了element-plus文档，一边写，一边看