vue3.0 新的api属性

71 阅读 0 评论 47 点赞

我是靠谱客的博主洁净外套，最近开发中收集的这篇文章主要介绍vue3.0 新的api属性，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

vue3.0 只需要升级vuecli4.0以上的版本就可以选择性的安装了

获取路由对象

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

获取vuex

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

异步组件新方法

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
})

v-model新方式可直接进行双向绑定 update:props

v-model:propName="bindingExpression"

<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)

teleport 窗口,不改变组件树的位置，但是改变渲染的地方，比如模态窗口,渲染位置可以定义在app以外的位置

子组件
<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>

获取当前组件的实例,

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

toRef

传递数据给消费函数,也就是hooks,传递数据但是要保证数据能和响应式数据发生关联

const state=reactive({
loading:false
})
useScoll(toRef(state,'loading')) //传递单个参数给这个hooks使用,
//该函数在内部会对loading修改.toRef包装后的数据更改后会修改原本响应式数据,但是不会刷新视图,
//响应式数据被更改后会触发一次视图更新,所以这样不会进行两次视图刷新

Fragment


直接理解成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指定继承位置

ts方式对于vue3.0建议ts写

vuex ts

模块home

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)
})
}
}
}

store/index 主仓库文件

import { createStore } from 'vuex'
import { HomeModel, HomeStateInfo } from './home/home'
export interface GlobalStateInfo {
HomeModel: HomeStateInfo;//模块数据名称
}
export default createStore<GlobalStateInfo>({
mutations: {
},
modules: {
HomeModel
}
})

vue文件引用

import { GlobalStateInfo } from "@/store/index";
setup
const store = useStore<GlobalStateInfo>();
onMounted
await store.dispatch("HomeModel/addLoad");