Devue3 development

author ：vita2333
link ：https://juejin.im/post/689231...

I've been looking forward to vue3, As soon as it was released, I started to experience , Here is a record of a few of the unusual small holes on the Internet ~

Custom global parameters

Definition ：

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

except setup() You need to get the instance first , Other places can go directly through $test Use ：

<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 adopt alias Alias reference

stay webpack in , To configure src Its alias is @, It can be written like this ：

// quote src/views/PageOne.vue
import PageOne from '@/views/PageOne.vue'
Copy code

If you use Vite, You need to make the following changes ：

// vite.config.js
module.exports={
alias: {
'/@/': path.resolve(__dirname, './src'),
},
}

// tsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["src/*"],
"/@/views/*": ["src/views/*"]
}
}
}

import PageOne from '/@/views/PageOne.vue'

More standardized props and emits

stay vue3 in , The parent-child component transfers values props and emits The writing method is more standardized （ More uniform naming ）, Embodied in ：

v-model The change of

<template>
<child-component v-model:value="myValue"></child-component>
</template>

v-model:value Equate to props:'value' and emits('update:value')

You need to specify the emits

For ease of management , It is suggested that emits Define all of the emit

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

track attrs and slots

I thought I could pass watch() Function directly watch(()=>attrs.xxx), It turns out that it can't . There are some on the official website , At first, I didn't pay attention to it ：

attrs and slots It's a state object , They are always updated as the component itself updates . This means that you should avoid deconstructing them , And always with attrs.x or slots.x Method reference of property. Please note that , And props Different ,attrs and slots It's nonresponsive . If you're going to base it on attrs or slots Change application side effects , Then it should be in onUpdated Do this in the lifecycle hook .

So respond to it attrs and slots, Need ：

import { onUpdated, reactive, watch, watchEffect } from 'vue'
export default {
setup(props, { attrs }) {
function _handleAttrsChange() {
console.log('attrs===')
console.log(attrs)
}
onUpdated(() => {
_handleAttrsChange()
})
// props and data It can be used normally. watch function
watchEffect(() => {
console.log('propsXxx===')
console.log(props.xxx)
})
const state = reactive({ count: 0 })
watch(() => state.count, (now, old) => {
//
})
},
}

VueRouter Do not use directly containing props The components of

I have an address list AddressList, Need to pass through props Receive parent parameters ：

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

By calling the component , No problem . But the configuration is vue-router An error will be reported ：

export default {
routes: [
{
path: 'address_list',
component: () => import( 'AddressList.vue'),
},
],
}

TypeError: Cannot add property __props, object is not extensible

Since you can't directly treat a component as route Use , Well, just call it on other pages

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

Last

Official account ： Front end development blog , reply 1024, Get the front-end advanced information