vue3使用总结

区别

vue创建方式

// vue2
new Vue({
el: '#app',
router,
store,
render: h=>h(App)
})
// vue3
import { createApp } from vue
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

---

挂载全局属性

vue2写全局属性的时候没有顺序限制，只要是导入的这个Vue实例就行了

Vue3的属性挂载实在createApp(App)之后，mount之前的。

// vue2
Vue.prototype.$XXX = XXX
// vue3
const app = createApp(App)
app.config.globalProperties.$XXX = XXX
app.mount('#app')

在用新版antdv的时候要注意2.x的已经全部帮我们挂载好了当我们全局引用的时候,在use(antv)的时候帮我们添加 了一个全局的属性。如果按需导入的话，需要手动挂载全局属性

import { createApp } from vue
import antdv from "ant-design-vue";
const app = createApp(App)
app.use(router)
app.use(store)
app.use(antdv)
app.mount('#app')

// antdv的源码部分展示
var install = function install(app) {
components.forEach(function (component) {
app.use(component);
});
app.config.globalProperties.$message = _message.default;
app.config.globalProperties.$notification = _notification.default;
app.config.globalProperties.$info = _modal.default.info;
app.config.globalProperties.$success = _modal.default.success;
app.config.globalProperties.$error = _modal.default.error;
app.config.globalProperties.$warning = _modal.default.warning;
app.config.globalProperties.$confirm = _modal.default.confirm;
app.config.globalProperties.$destroyAll = _modal.default.destroyAll;
return app;
};

异步加载组件

项目中最多的是在路由中异步加载组件,官方说由于函数式组件被定义为纯函数，因此异步组件的定义需要通过将其包装在新的 defineAsyncComponent 助手方法中来显式地定义目前我还没有体验要其中的奥妙

// vue2
const load = (component) => import(`../pages/${component}.vue`)
const routes = [
{
path: '/login',
component: load('login'),
meta: {}
},
]
//vue3
import { defineAsyncComponent } from 'vue'
const load = defineAsyncComponent(() => import(`../pages/${component}.vue`))
const routes = [
{
path: '/login',
component: load('login'),
meta: {}
},
]

自定义指令

vue2

• bind - 指令绑定到元素后发生。只发生一次。
• inserted - 元素插入父 DOM 后发生。
• update - 当元素更新，但子元素尚未更新时，将调用此钩子。
• componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
• unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

vue3

• bind → beforeMount
• inserted → mounted
• beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
• update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
• componentUpdated → updated
• beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
• unbind -> unmounted

template支持

vue2支持一个DOM节点vue3支持多个根节点

Data 选项

在vue2中data可以是对象，也可以是返回对象的函数

<!-- Object 声明 -->
<script>
const app = new Vue({
data: {
apiKey: 'a1b2c3'
}
})
</script>

<!-- Function 声明 -->
<script>
const app = new Vue({
data() {
return {
apiKey: 'a1b2c3'
}
}
})
</script>

但是在vue3中规定支支持返回对象的函数这一种方法

<script>
import { createApp } from 'vue'

createApp({
data() {
return {
apiKey: 'a1b2c3'
}
}
}).mount('#app')
</script>

Mixin 合并行为变更

之前的使用中，我们在Mixin中定义的data会被合并到新的组件中，但是在vue3中只会保留组件中的data

const mixinsA = {
data(){
return {
user:{
mag: 'i im mixinsA',
mixinsA: true
}
}
}
}
const componentA = {
mixins:[mixinsA],
data() {
reurun {
user:{
msg: 'i im componentA'
}
}
}
}


// vue2
componentA.$data.user :
{
msg: 'i im componentA',
mixinsA: true
}

// vue3
{
msg: 'i im componentA',
}