作者：vita2333
链接：https://juejin.im/post/689231...

期待了很久的vue3，一公布就上手体验了一把，这里记录几个本人碰到的网上不常见的小坑~

自定义全局参数

定义：

// main.jsconst app = createApp(App)app.config.globalProperties.$test = 'test'

除了setup()须要先取得实例，其余中央能够间接通过$test应用：

<tempalte>    <div>{{ $test }}</div></tempalte><script>import { getCurrentInstance } from 'vue'export default {  setup() {    const test = getCurrentInstance()?.appContext.config.globalProperties.$test    console.log('test===')     console.log(test)  },}</script>

Vite通过alias别名援用

在webpack中，配置src的别名为@，能够这么写：

// 援用src/views/PageOne.vueimport PageOne from '@/views/PageOne.vue'复制代码

如果应用Vite，则须要做以下批改：

// vite.config.jsmodule.exports={  alias: {    '/@/': path.resolve(__dirname, './src'),  },}
// tsconfig.json{  "compilerOptions": {    "paths": {      "@/*": ["src/*"],      "/@/views/*": ["src/views/*"]    }  }}
import PageOne from '/@/views/PageOne.vue'

更加标准的props和emits

在vue3中，父子组件传值的props和emits写法更加标准（命名更对立），体现在：

  1. v-model的变动
<template>    <child-component v-model:value="myValue"></child-component></template>

v-model:value等同于props:'value'和emits('update:value')

  1. 须要指定emits

为了便于管理，倡议在emits中定义所有用到的emit

 export default {    emits: ['update:value', 'otherEmit'],    setup(props, { emit }) {      emit('update:value')      emit('otherEmit')    },  }

跟踪attrs和slots

原本认为能够通过watch()函数间接watch(()=>attrs.xxx)，后果是不行。这里官网有些，一开始本人没留神：

attrs 和 slots 是有状态的对象，它们总是会随组件自身的更新而更新。这意味着你应该防止对它们进行解构，并始终以 attrs.x 或 slots.x 的形式援用 property。请留神，与 props 不同，attrs 和 slots 是非响应式的。如果你打算依据 attrs 或 slots 更改利用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。

所以要响应式解决attrs和slots，就须要：

import { onUpdated, reactive, watch, watchEffect } from 'vue'export default {  setup(props, { attrs }) {    function _handleAttrsChange() {      console.log('attrs===')      console.log(attrs)    }    onUpdated(() => {      _handleAttrsChange()    })    // props和data能够失常应用watch函数    watchEffect(() => {      console.log('propsXxx===')      console.log(props.xxx)    })    const state = reactive({ count: 0 })    watch(() => state.count, (now, old) => {      //    })  },}

VueRouter不能间接应用含有props的组件

我有一个地址列表AddressList，须要通过props接管父组件参数：

// router.jsexport default {  name: 'AddressList',  props: {    propName: String,  },}

通过组件调用，没有问题。然而配置为vue-router项时会报错：

export default {  routes: [    {      path: 'address_list',      component: () => import( 'AddressList.vue'),    },  ],}
TypeError: Cannot add property __props, object is not extensible

既然不能间接将组件作为route应用，那么就在其余页面中调用就好了

// router.jsexport default {  routes: [    {      path: 'address_list',      component: () => import( 'Page.vue'),      meta: { component: 'AddressList' },    },  ],}
<!--Page.vue--><template>    <component :is="component" /></template><script lang="ts">  import AddressList from '/@/views/AddressList.vue'  import { defineComponent } from 'vue'  export default defineComponent({    name: 'Page',    components: { AddressList },    computed: {      component () {        return this.$route.meta.component      },    },  })</script>

相干文章

  1. 一份很棒的Vue3 学习清单
  2. 让你30分钟疾速把握vue 3
  3. 一篇文章上手Vue3中新增的API

最初

关注公众号：前端开发博客，回复 1024，支付前端进阶材料