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