介绍
1. 创建Vue3工程的两种方式
- 使用
vue-cli
:创建方法同Vue2是相同的,但要注意vue-cli的版本要在4.5.0以上 - 使用
vite
:优势: 1. 开发环境中,无需打包操作,可快速的冷启动 2. 轻量快速的热重载(HMR) 3. 真正的按需编译,不再等待整个应用编译完成 使用: 1. npm init vite-app vue3_test_vite 2. cd vue3_test_vite 3. npm install 4. npm run dev
2. 目录结构分析
main.js
中的变化
// 引入的是一个名为createApp的工厂函数
import {
createApp } from "vue";
import App from "./App.vue";
// 创建应用实例对象--app(类似于之前Vue2中的vm,但app比vm更轻)
const app = createApp(App);
console.log("-----dudu-----", app);
// 挂载
app.mount("#app");
// 卸载
setTimeout(() => {
app.unmount("#app");
}, 2000);
App.main
的变化
// 定义组件的函数,参数是一个配置对象
import {
defineComponent } from 'vue';
export default defineComponent({
name: 'App',
components: {
HelloWorld
}
});
其余的与Vue2基本一致,但Vue3组件中的模板结构可以没有根标签
常用 Composition API
1. setup
Vue3中一个新的配置项,值为一个函数
组件中所用到的:数据、方法等等都要配置在setup中
两种返回值:
1. 若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用
2. 若返回一个渲染函数,则可以自定义渲染内容
注意点
1. 尽量不要与Vue2中的配置混用
- Vue2配置的内容可以访问到setup中的属性和方法
- 但是setup中访问不到Vue2中配置的内容
- 如果配置出现了重名,setup配置优先
2. setup不能是一个async函数,因为函数的返回值不再是return的对象,而是promise对象,模板看不到return对象中的属性
<template>
<div>
<h1>个人信息</h1>
<h2>姓名:{
{ name }}</h2>
<h2>年龄:{
{ age }}</h2>
<button @click="sayHello">打招呼</button>
</div>
</template>
<script>
import {
h } from "vue";
export default {
name: "App",
components: {
},
// 此处暂时不考虑响应式的问题
setup() {
let name = "LMY";
let age = 25;
function sayHello() {
alert(`你好,我是${
name},我今年${
age}岁了`);
}
return {
name, age, sayHello };
// 返回一个渲染函数,此时不解析模板中的内容,将函数返回的内容添加到组件中
// return () => h("h1", "dudu");
},
};
</script>
setup执行的时机:在beforeCreate之前执行一次,this是undefined
beforeCreate() {
console.log("---beforeCreate---", this);
},
setup() {
console.log("---setup---", this);
}
setup的参数之一props
:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性
<demo msg="Hello" dudu="Vue3"></demo>
export default {
name: "Demo",
props: ["msg", "dudu"],
setup(props) {
console.log(props); // Proxy {msg: 'Hello', dudu: 'Vue3'}
},
};
setup的参数之二context
:上下文对象
attrs属性:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this.$attrs
export default {
name: "Demo",
props: ["msg"],
setup(props, context) {
console.log(context.attrs); // Proxy {dudu: 'Vue3', __vInternal: 1}
},
};
slots属性:收到的插槽内容,相当于this.$slots
<demo>
<!-- 使用v-slot命令才能在子组件的上下文参数中接收到 -->
<template v-slot:dudu>
<div>大河之剑天上来</div>
</template>
</demo>
export default {
name: "Demo",
setup(props, context) {
console.log(context.slots); // Proxy {_: 1, __vInternal: 1, dudu: ƒ}
},
}