前言
本文并非标题党,而是实实在在的硬核文章,如果有想要学习Vue3的网友,可以大致的浏览一下本文,总体来说本篇博客涵盖了Vue3中绝大部分内容,包含常用的CompositionAPI(组合式API)、其它CompositionAPI以及一些新的特性:Fragment、Teleport、Suspense、provide和inject。
项目搭建
既然是学习Vue3,那么首先应该需要的是如何初始化项目,在这里提供了两种方式供大家参考
- 方式一:vue-cli脚手架初始化Vue3项目
官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
// 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
// 安装或者升级你的@vue/cli
npm install -g @vue/cli
// 创建
vue create vue_test
// 启动
cd vue_test
npm run serve
- 方式二:vite初始化Vue3项目
vite官网:https://vitejs.cn/
// 创建工程
npm init vite-app <project-name>
// 进入工程目录
cd <project-name>
// 安装依赖
npm install
// 运行
npm run dev
项目目录结构分析
这里的项目目录结构分析主要是main.js文件
- Vue2里面的main.js
new Vue({
el: '#app',
components: {},
template: ''
});
- Vue3里面的main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
在Vue2里面,通过new Vue({})构造函数创建应用实例对象,而Vue3引入的不再是Vue的构造函数,引入的是一个名为createApp的工厂函数创建应用实例对象。
Vue3-devtool获取
devtool:https://chrome.zzzmh.cn/info?token=ljjemllljcmogpfapbkkighbhhppjdbg
Composition API
setup
理解:Vue3.0中一个新的配置项,值为一个函数
setup是所有Composition API(组合式API)的入口
组件中所用到的数据、方法等等,均要配置在setup里面
setup函数的两种返回值
- 若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用
- 若返回一个渲染函数,则可以自定义渲染内容
setup的执行时机
- 在beforeCreate之前执行一次,此时this为undefined
setup的参数
props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性
context:上下文对象
- attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this.$attrs
- slots:收到的插槽内容,相当于this.$slots
- emit:分发自定义事件的函数,相当于this.$emit
注意事项:
尽量不要与Vue2x的配置使用
- Vue2x的配置(data、methods、computed)均可以访问到setup中的属性、方法
- setup中不能访问Vue2x的配置(data、methods、computed)
- 如果data里面的属性和setup里面的属性有重名,则setup优先
setup不能是一个async函数,因为返回值不再是return的对象,而是Promise,模板看不到return对象中的属性,但是后期也可以返回一个Promise实例,需要Suspense和异步组件的配合
示例一:setup函数的两种返回值
<template>
<h2>练习setup相关内容</h2>
<!--<h2>setup返回一个对象,并使用对象中的属性和方法</h2>-->
<!--<p>姓名:{{student.name}}</p>-->
<!--<p>年龄:{{student.age}}</p>-->
<!--<button @click="hello">点击查看控制台信息</button>-->
<hr>
<h2>setup返回一个函数</h2>
</template>
<script>
import {h} from 'vue'
export default {
name: "setupComponent",
setup(){
// 属性
let student={
name:'张三',
age:18,
}
// 方法
function hello() {
console.log(`大家好,我叫${student.name},今年${student.age}`)
}
return{ // 返回一个对象
student,
hello,
}
// return()=>h('h1','你好') // 返回一个函数
}
}
</script>
<style scoped>
</style>
这里需要注意的是setup里面定义的属性和方法均要return出去,否则无法使用
示例二:setup里面的参数和方法和配置项混合使用
<template>
<h2>setup和配置项混用</h2>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>性别:{{sex}}</h2>
<button @click="sayHello">sayHello(Vue3里面的方法)</button>
<button @click="sayWelcome">sayWelcome(Vue2里面的方法)</button>
</template>
<script>
export default {
name: "setup01_component",
data(){
return{
sex:'男',
sum:0,
}
},
methods:{
sayWelcome(){
console.log(`sayWelcome`)
},
},
setup(){
let sum=100;
let name='张三';
let age=18;
function sayHello() {
console.log(`我叫${name},今年${age}`)
}
return{
name,
age,
sayHello,
test02,
sum
}
}
}
</script>
<style scoped>
</style>
这段代码是先实现了setup里面的属性和方法,以及Vue2中配置项里面的属性和方法。接下来添加对应的混合方法
<template>
<h2>setup和配置项混用</h2>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>性别:{{sex}}</h2>
<button @click="sayHello">sayHello(Vue3里面的方法)</button>
<button @click="sayWelcome">sayWelcome(Vue2里面的方法)</button>
<br>
<br>
<button @click="test01">测试Vue2里面调用Vue3里面的属性和方法</button>
<br>
<br>
<button @click="test02">测试Vue3setup里面调用Vue2里面的属性和方法</button>
<br>
<h2>sum的值是:{{sum}}</h2>
</template>
<script>
export default {
name: "setup01_component",
data(){
return{
sex:'男',
sum:0,
}
},
methods:{
sayWelcome(){
console.log(`sayWelcome`)
},
test01(){
console.log(this.sex); // Vue2里面的属性(data里面的属性)
// setup里面的属性
console.log(this.name);
console.log(this.age);
// setup里面的方法
this.sayHello();
}
},
setup(){
let sum=100;
let name='张三';
let age=18;
function sayHello() {
console.log(`我叫${name},今年${age}`)
}
function test02() {
// setup里面的属性
console.log(name);
console.log(age);
// data里面的属性
console.log(this.sex);
console.log(this.sayWelcome);
}
return{
name,
age,
sayHello,
test02,
sum
}
}
}
</script>
<style scoped>
</style>
这里新增了test01和test02方法,分别点击,控制台可以看到,点击配置项里面test01方法时,除了自身的sex属性有值,setup里面定义的属性也有值以及方法也可以调用,点击setup里面定义的test02方法时,控制台只能输出setup里面定义的属性和方法,而配置项里面定义的属性和方法值均为undefined。
- setup里面定义的属性和方法均可以在配置项里面使用(methods、computed、watch等),而配置项里面定义的属性和方法无法在setup里面调用
- 如果setup里面的属性和data里面的属性有重名,则setup里面的属性优先
示例三:setup的执行时机
setup会在beforeCreate之前执行一次
<template>
<h2>setup的执行机制</h2>
</template>
<script>
export default {
name: "setup_component03",
setup(){
console.log('setup')
},
beforeCreate(){
console.log('beforeCreate')
}
}
</script>
<style scoped>
</style>
查看控制台的话我们看到的顺序是setup>beforeCreate
setup里面context和props的使用
Vue2里面props和slot的使用
讲解setup这里面的两个参数之前,先回顾一下Vue2里面的相关知识
- props和自定义事件的使用
- attrs
- slot(插槽)
示例一:Vue2props和自定义事件的使用
准备两个组件,分别为parent.vue组件和child.vue组件
parent.vue
<template>
<div class="parent">
我是父组件
<child msg="传递信息" name="张三" @sendParentMsg="getMsg"/>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent",
components: {Child},
methods:{
getMsg(msg){
console.log(msg)
}
}
}
</script>
<style scoped>
.parent{
padding: 10px;
background-color: red;
}
</style>
child.vue
<template>
<div class="child">
<h2>我是子组件</h2>
<p>父组件传递过来的消息是:{{msg}}</p>
<p>父组件传递过来的消息是:{{name}}</p>
<button @click="sendMsg">向父组件的传递信息</button>
</div>
</template>
<script>
export default {
name: "Child",
props:{
msg:{
type:String,
default:''
},
name:{
type:String,
default:''
}
},
mounted(){
console.log(this);
},
methods:{
sendMsg(){
this.$emit("sendParentMsg",'通知父组件更新')
}
}
}
</script>
<style scoped>
.child{
padding: 10px;
background-color: orange;
}
</style>
child组件对应的代码如下:
<template>
<div class="child">
<h2>我是子组件</h2>
<!--<p>父组件传递过来的消息是:{{msg}}</p>-->
<!--<p>父组件传递过来的消息是:{{name}}</p>-->
<p>父组件传递过来的消息是:{{$attrs.msg}}</p>
<p>父组件传递过来的消息是:{{$attrs.name}}</p>
<button @click="sendMsg">向父组件的传递信息</button>
</div>
</template>
<script>
export default {
name: "Child",
// props:{
// msg:{
// type:String,
// default:''
// },
// name:{
// type:String,
// default:''
// }
// },
mounted(){
console.log(this);
},
methods:{
sendMsg(){
this.$emit("sendParentMsg",'通知父组件更新')
}
}
}
</script>
<style scoped>
.child{
padding: 10px;
background-color: orange;
}
</style>
子组件通过props接收父组件传递的信息,通过this.$emit()自定义事件向父组件传递信息。当使用props接收数据的时候,attrs里面的数据为空,如果没有使用props接收数据的话,那么props里面就有值。
示例二:Vue2里面slot的使用
同理准备两个组件,一个Index.vue组件,另一个为MySlot.vue组件
Index.vue
<template>
<div class="index">
<h2>我是Index组件</h2>
<!--写法一-->
<my-slot>
<!--插槽里面的内容-->
<h2>传入的slot参数</h2>
<h2>传入的slot参数</h2>
<h2>传入的slot参数</h2>
<h2>传入的slot参数</h2>
</my-slot>
<!--写法二-->
<my-slot>
<template slot="header">
<h2>我是header组件</h2>
</template>
<template slot="footer">
<h2>我是footer附件</h2>
</template>
</my-slot>
</div>
</template>
<script>
import MySlot from "./MySlot";
export default {
name: "Index",
components: {MySlot}
}
</script>
<style scoped>
.index{
padding: 10px;
background: red;
}
</style>
MySlot.vue
<template>
<div class="slot">
<h2>我是MySlot组件</h2>
<slot></slot>
<br>
<slot name="header"></slot>
<br>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: "MySlot",
mounted(){
console.log(this);
}
}
</script>
<style scoped>
.slot{
padding: 10px;
background: orange;
}
</style>
ref
作用:定义一个响应式数据
语法:const xxx=ref(initValue)
创建一个包含响应式数据的引用对象(reference对象);
JS中操作数据:xxx.value=xxx;
模板中读取数据:不需要.value,直接:
{{xxx}}01-06 11:34