vue3.0 新的api属性

1
2
3
4
import { useRouter } from 'vue-router'
const router=useRouter()
router.push('/')
即可调用路由跳转等方法

1
2
3
import { useStore } from 'vuex'
const { state, commit } = useStore() 
可获取vuex的派发方法和数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { defineAsyncComponent } from 'vue'
component: defineAsyncComponent(() => import('../views/Home.vue')), //路由注册
components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )//本地组件组测
  }
const AsyncComp = defineAsyncComponent({
  // 需要异步加载的组件
  loader: () => import('./Foo.vue')
  // 正在加载时显示的组件 loding动画等
  loadingComponent: LoadingComponent,
  //组件加载失败显示的组件
  errorComponent: ErrorComponent,
  // 加载组件延迟多少秒
  delay: 200,
  // 加载时间超过了，则显示错误的组件
  // 默认无穷加载事件
  timeout: 3000,
  // 返回一个布尔值，当错误值不等于404则重新尝试加载
  retryWhen: error => error.code !== 404,
  // 允许的最大重试次数
  maxRetries: 3,
  // 定义组件是否可以被控制,如果被控制，他的加载状态和加载失败状态将由父组件控制
  suspensible: false
})

1
2
3
4
5
6
7
8
9
10
11
<my-component v-model:foo.capitalize="myText"></my-component>

子组件
emit('update:foo',更新父组件的数据)

capitalize 自定义修饰符。用于在同步数据，对数据进行拦截过滤在发送给父组件
if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
}
emit('update:state', false)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
子组件
<teleport to="#mode" v-show="state" disable='false'>
    <div class="mode">
      <slot name="modetest"> </slot>
      <button>关闭</button>
    </div>
  </teleport>
 disable是否被传送,false为被传送 
 
父组件使用后，虽然渲染的位置变化了，但是实际组件树没有变化，所有的传值,事件,组件之间的上下级关系没有发生变化 
注意to后面如果是id 则要用# 是一个选择器
在html里面可以添加一个新的#mode节点

**jsx使用方式
import { defineComponent, PropType, reactive, Teleport, toRefs } from 'vue'
<Teleport to='#tabbarModule'>
</Teleport>

1
2
3
import {getCurrentInstance} from 'vue'

const { proxy } = getCurrentInstance() 组件实例 生产下也一样可以使用

1
2
3
4
5
6
7
8
const state=reactive({
    loading:false
})
useScoll(toRef(state,'loading')) //传递单个参数给这个hooks使用,

//该函数在内部会对loading修改.toRef包装后的数据更改后会修改原本响应式数据,但是不会刷新视图,
//响应式数据被更改后会触发一次视图更新,所以这样不会进行两次视图刷新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

直接理解成react的空标签就行了
``jsx
import {Fragment} from 'vue'

return ()=>(
    <>
    </>
)


带来的attrs问题

//子 Toast组件
return ()=>(
    <>
        <div></div>
        <Loading />
    </>
)



//父使用 
<>
    <Toast style='color:red'/>
</>

style继承的问题,以往有根标签,直接继承给跟标签,现在是空标签,需要直接attrs在哪里


return ()=>(
    <>
        <div v-bind="$attrs"></div>
        <Loading />
    </>
)

//现在很多新的vue3 ui组件直接加style,就会报警,没设置根标签也没有attrs指定继承位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
export interface HomeStateInfo {
    name: string;
    skeletonLoading: boolean;
    skeletList: string[];
    list: number[];
    loading: {
        [key: string]: boolean;
    }
}
interface SetLoading {
    prop: string;
    status: boolean;
}
import { GlobalStateInfo } from '../index'

import { Module } from 'vuex'
export const HomeState: HomeStateInfo = {
    name: '',
    skeletonLoading: true,
    skeletList: ['/', '/index', 'home'],
    list: [1, 2, 3, 4, 5, 6],
    loading: {}
}

export const HomeModel: Module<HomeStateInfo, GlobalStateInfo> = {
    namespaced: true,//是否开启命名空间
    state: HomeState,
    mutations: {
        ['CHANE_NAME'](state, payload: string) {
            state.name = payload
        },
        ['changeSkeletonState'](state, payload: boolean) {
            state.skeletonLoading = payload
        },
        ['changeList'](state, payload: number[]) {
            state.list = payload
        },
        ['SET_LOADING_STATUS'](state, payload: SetLoading) {
            state.loading[payload.prop] = payload.status
        }
    },
    actions: {
        ['addLoad']: (injectee) => {
            const { state, commit } = injectee
            return new Promise((reslove) => {
                const newarr = [...state.list]
                for (let index = 0; index < state.list.length; index++) {
                    newarr.push(state.list[index] + 1)
                }
                setTimeout(() => {
                    reslove()
                    commit('changeSkeletonState', false)
                    commit('changeList', newarr)
                }, 3000)
            })
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createStore } from 'vuex'
import { HomeModel, HomeStateInfo } from './home/home'

export interface GlobalStateInfo {
  HomeModel: HomeStateInfo;//模块数据名称
}
export default createStore<GlobalStateInfo>({
  mutations: {

  },
  modules: {
    HomeModel
  }
})

1
2
3
4
5
6
7
import { GlobalStateInfo } from "@/store/index";

setup
const store = useStore<GlobalStateInfo>();

onMounted
await store.dispatch("HomeModel/addLoad");