关于vue.js:Vue3开发踩坑

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

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

自定义全局参数

定义：

// main.js
const 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.vue
import PageOne from '@/views/PageOne.vue'
复制代码

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

// vite.config.js
module.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.js
export 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.js
export 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，支付前端进阶材料