vue3.0学习注意点

1、vue3.0开始，过滤器已经移除，且不再支持

可以通过方法调用或者计算属性来实现

2、vue3.0支持多个根节点

<!-- Layout.vue -->
<template>
  <header>...</header>
  <footer>...</footer>
</template>

3、例如props和emit,不再需要手动引入，

必须声明 script setup
//props
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})



//defineEmits可以省略
const emits = defineEmits(['handleDelete'])

const handleItem = (i) => {
  emits('handleDelete', i)
}




//ref, reactive, computed, watch, onMounted, getCurrentInstance,nextTick等需要引入
import { nextTick } from 'vue'

nextTick(() => {
  // 一些和 DOM 有关的东西
})

4、v-on:click.native被移除

5、界面跳转路由需要引入

import { useRouter } from 'vue-router'
const router = useRouter()

...
  router.push({
    path: '/documents-list',
  })
...

6、生命周期引入后，可直接调用

import { ref, reactive, computed, watch, onMounted } from 'vue'

//初始化
onMounted(() => {
  fetchMarketData()
})