vue3中一个新的配置项,值为函数。组件中所用到的数据,方法,生命周期,监视属性,计算属性等都要配置在setup中。
setup函数的两种返回值
? ? ? ? 1,若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。
? ? ? ? 2,若返回一个渲染函数:则可以自定义渲染内容。
注意点
? ? ? ? 1,尽量不要与Vue2.x配置混用
? ? ? ? 2,setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。
? ? ? ? 3,vue3不需要最外层的div,可以直接在template里面写
<template>
<h1>vue3</h1>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<h2>{{sex}}</h2>
<button @click="introduce">vue3入门</button>
</template>
<script>
export default{
setup(){
//数据
let name="张三"
let age=18
let sex="男"
//方法
function introduce(){
console.log(`我的名字叫${name},我今天${age}岁,我的性别是${sex}`)
}
//返回一个对象
return {
name,
age,
sex,
introduce
}
}
}
</script>
作用:定义一个响应式数据。创建一个包含响应式数据的引用对象(处理对象数据)。
<template>
<h1>vue3</h1>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<button @click="modify">动态数据-基本数据类型</button>
<h3>工作:{{obj.work}}</h3>
<h3>工资:{{obj.money}}</h3>
<button @click="GoToWork">动态数据-对象引用类型</button>
</template>
<script>
//需要先引入ref
import {ref} from 'vue'
export default{
setup(){
//基本数据类型
let name=ref("张三")
let age=ref(18)
//修改普通数据
function modify(){
//修改namd和age
name.value="李四"
age.value=28
}
//对象类型
let obj=ref({
work:"前端开发",
money:1000
})
function GoToWork(){
obj.value.work="测试"
obj.value.money=2000
}
//返回一个对象
return {
name,
age,
modify,
obj,
GoToWork
}
}
}
</script>
作用:定义一个对象类型的响应式数据,基本类型还是用ref
语法:const 代理对象=reactive(源对象)接收一个对象或数据,返回一个代理对象Proxy的实例对象,内部是基于ES6 Proxy来进行实现的,通过代码理对象操作源对象内部数据进行操作。
<template>
<h1>vue3</h1>
<h2>姓名:{{Obj.name}}</h2>
<h2>年纪:{{Obj.age}}</h2>
<h2>工作:{{Obj.job.work}} 我的工资是{{Obj.job.money}}</h2>
<h2>其它:{{Obj.other}}</h2>
<button @click="reactiveTest">reactive测试</button>
</template>
<script>
//要先引入reactive
import {reactive} from 'vue'
export default{
setup(){
//reactive的使用
let Obj=reactive({
name:"李四",
age:18,
job:{
work:"前端开发工程师",
money:1000
},
other:['看书','运动','打球']
})
function reactiveTest(){
Obj.name="王五"
Obj.age=28
Obj.job.work="java开发"
Obj.job.money=1200
Obj.other[2]='唱歌'
}
return {
Obj,
reactiveTest
}
}
}
</script>
从定义数据角度
1,ref用来定义基本类型数据(ref也可以用来定义对象或数组类型数据,它内部会自动通过reactive转为代码对象)
2,reactive用来定义对象或数组类型数据
从原理对比角度
1,ref是通过Object.defineProperty()的访问器属性get和set来实现响应的
2,reactive是通过ES6中的proxy来实现响应,并通过Relect操作源对象内部的数据
1,set的执行时机:在beforeCreate之前只执行一次,this是undefined。(setup的执行比beforeCreate要早)
2,setup的参数(一共有两个props和context)
? ? ? ? (1) props:值为对象,包含:组件外部传递过来,且组件内部声明接收 了的属性。
? ? ? ? (2) context上下文对象
? ? ? ? ? ? ? ? --1-- attrs:值为对象,包含:组件外部传递过来,但没有props配置中声明的属性,相当于this.$attrs
? ? ? ? ? ? ? ? --2-- slots:收到的插槽内容, 相当于 this.$slots。
? ? ? ? ? ? ? ? --3-- emit:分发自定义的事件函数,相当于this.$emit。
//父组件
<template>
<!-- 添加setupTest自定义事件 -->
<setupTestVue @setupTest="emitClick" name="张三" age="19">
<template v-slot:asd>
<span>哈哈哈</span>
</template>
</setupTestVue>
</template>
<script>
import setupTestVue from './components/setupTest.vue'
export default {
name: 'App',
components: {
setupTestVue
},
setup(){
function emitClick(){
console.log("触发了事件")
}
return{
emitClick
}
}
}
</script>
//子组件
<template>
<h1>sutup的注意点</h1>
<h2>姓名:{{Obj.name}}</h2>
<h2>年纪:{{Obj.age}}</h2>
<button @click="test">测试一下触发父组件中的事件</button>
</template>
<script>
//
import {reactive} from 'vue'
export default{
beforeCreate(){
console.log("beforeCreate")
},
//对父组件中定义的参数进行接收
props:['name','age'],
//对父组件中的事件进行接收
emits:['setupTest'],
setup(props,context){
console.log("setup",props,context.slots)
let Obj = reactive({
name:"小赵",
age:18
})
function test(){
//调用父组件中的emitClick事件
context.emit('setupTest',666)
}
return{
Obj,
test
}
}
}
</script>
? ? ? ? 1,computed函数,用之前需要先引用。
<template>
<h1>sutup的注意点</h1>
<input type="text" v-model="Obj.name">
<br/>
<input type="text" v-model="Obj.age">
<span>{{computerResult2}}</span>
</template>
<script>
//vue3中的计算属性是一个组合的api,在使用之前需要先引入
import {computed, reactive} from 'vue'
export default{
beforeCreate(){
console.log("beforeCreate")
},
setup(){
let Obj = reactive({
name:"小赵",
age:18
})
//1,计算属性简写形式
let computerResult1=computed(()=>{
return Obj.name+'-'+Obj.age
})
//2,计算属性完整写法
let computerResult2=computed({
get(){
return Obj.name+'-'+Obj.age
},
set(value){
const newResult = value.split('-')
Obj.name=newResult[0]
Obj.age=newResult[1]
}
})
return{
Obj,
computerResult1,
computerResult2
}
}
}
</script>
2,watch函数
两种常用的监视用法
<template>
<h1>监视属性的使用</h1>
<h2>累加:{{sum}}</h2>
<h2>累加:{{adds}}</h2>
<button @click="sum++">点击</button>
<button @click="adds+='++'">修改信息</button>
</template>
<script>
//需要先引入watch
import {ref,watch} from 'vue'
export default{
setup(){
let sum = ref(0)
let adds=ref('大家好')
//1,第一种写法,监视一个响应式数据
// watch(sum,(newvalue,oldvalue)=>{
// console.log('sum变民',newvalue,oldvalue)
// })
//2,监视所定义的多个响应式数据,直接传一个数组
watch([sum,adds],(newvalue,oldvalue)=>{
console.log(newvalue,oldvalue)
},{immediate:true})
return{
sum,
adds
}
}
}
</script>
其它的监视写法
let Obj=reactive({
name:"张三",
age:18,
other:{
job:"软件开发工程师"
}
})
/*
情况三:监视reactive所定义的一个响应式数据的全部属性
1.注意:此处无法正确的获取oldValue
2.注意:强制开启了深度监视(deep配置无效)
*/
/* watch(Obj,(newValue,oldValue)=>{
console.log('Obj变化了',newValue,oldValue)
},{deep:false}) //此处的deep配置无效 */
//情况四:监视reactive所定义的一个响应式数据中的某个属性,需要是一个函数
/* watch(()=>Obj.name,(newValue,oldValue)=>{
console.log('Obj的name变化了',newValue,oldValue)
}) */
//情况五:监视reactive所定义的一个响应式数据中的某些属性,监视多个,需要一个数组
/* watch([()=>Obj.name,()=>Obj.age],(newValue,oldValue)=>{
console.log('Obj的name或age变化了',newValue,oldValue)
}) */
//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
console.log('Obj的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效
watchEffect:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。
watchEffect有点像computed:
? ? ? 1,但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
? ? ? 2,而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。
<template>
<h1>监视属性的使用</h1>
<h2>累加:{{sum}}</h2>
<h2>累加:{{adds}}</h2>
<button @click="sum++">点击</button>
<button @click="adds+='++'">修改信息</button>
</template>
<script>
//需要先引入watchEffect
import {reactive, ref, watchEffect} from 'vue'
export default{
setup(){
let sum = ref(0)
let adds=ref('大家好')
//可以
watchEffect(()=>{
let val1=sum.value
let val2=adds.value
console.log(val1,val2)
console.log("被调用了")
})
return{
sum,
adds,
Obj
}
}
}
</script>
1,hooks就是把setup函数中使用的composition API进行封装,和vue2中的mixin很相。
2,可以进行代码复用,让setup中的逻辑更清晰易懂。
具体使用
在src下新建一个hooks文件里面包含一个setup.js文件用于鼠标点击空白处,获取对应的坐标
import { reactive,onMounted,onBeforeUnmount } from "vue"
export default function(){
let point=reactive({
x:0,
y:0
})
//封装一个公用方法
function savePoint(event){
point.x=event.pageX
point.y=event.pageY
console.log(event.pageX,event.pageY)
}
onMounted(()=>{
// window.addEventListener('click',(event)=>{
// point.x=event.pageX
// point.y=event.pageY
// console.log(event.pageX,event.pageY)
// })
window.addEventListener('click',savePoint)
})
onBeforeUnmount(()=>{
window.removeEventListener('click',savePoint)
})
return point
}
在其它页面中的使用
<template>
<h1>hook的使用</h1>
<h2>累加:{{sum}}</h2>
<button @click="sum++">点击</button>
<h2>获取当前的鼠标坐标,x:{{point.x}}坐标点y{{point.y}}</h2>
</template>
<script>
import {ref} from 'vue'
import usePoint from '../hooks/setPoint'
export default{
setup(){
let sum = ref(0)
let point = usePoint()
console.log(point)
return{
sum,
point
}
}
}
</script>
1,toRef创建一个ref对象,其value值指向另一个对象中的某个属性
2,语法const name=toRef(Obj,"name")
3,要将响应式对象中的某个属性单独提供给外部使用
<template>
<h1>toRef的使用</h1>
<h2>姓名:{{name}}</h2>
<h2>年纪:{{age}}</h2>
<h2>年纪:{{money}}</h2>
</template>
<script>
//引入toRef
import {toRef} from 'vue'
export default{
setup(){
let Obj={
name:"张三",
age:18,
job:{
eng:{
money:30
}
}
}
return{
//Obj,
name:toRef(Obj,'name'),
age:toRef(Obj,'age'),
money:toRef(Obj.job.eng,'money')
}
}
}
</script>
4,toRefs与toRef的功能一样,但可以批量创建多个ref对象
<template>
<h1>toRef的使用</h1>
<h2>姓名:{{name}}</h2>
<h2>年纪:{{age}}</h2>
<h2>年纪:{{job.eng.money}}</h2>
</template>
<script>
//引入toRefs
import {toRefs} from 'vue'
export default{
setup(){
let Obj={
name:"张三",
age:18,
job:{
eng:{
money:30
}
}
}
return{
...toRefs(Obj)
}
}
}
</script>
????????????????1,shallowReactive:只处理对象最外层的响应式(只处理一层)
????????????????2,shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理
????????什么时候使用
? ? ? ? ? ? ? ? 什么时候使用?
? ? ? ? ? ? ? ? A:如果有一个对象数据,结构比较深,但变化时只是最外层的属性变化就用 shallowReactive
? ? ? ? ? ? ? ? B:如果有一个对象数据,后续功能不会修改该对象中的属性,而是新的对象来替换就使用shallowRef
shallowReactive的使用
<template>
<h1>shallowReactive的使用</h1>
<h2>姓名:{{name}}</h2>
<h2>年纪:{{age}}</h2>
<h2>年纪:{{job.eng.money}}</h2>
<button @click="age++">修改年纪</button>
</template>
<script>
//引入toRefs
import {toRefs,shallowReactive} from 'vue'
export default{
setup(){
//job里面的数据不会受到影响
let Obj=shallowReactive({
name:"张三",
age:18,
job:{
eng:{
money:30
}
}
})
return{
...toRefs(Obj)
}
}
}
</script>
? ? ? ? readonly:让一个响应式数据变为直读的(深度)
? ? ? ? shallowReadonly:让一个响应式数据变为只读的(只读一层)
? ? ? ? 应用场景,不希望数据被修改
<template>
<h1>shallowReactive的使用</h1>
<h2>姓名:{{name}}</h2>
<h2>年纪:{{age}}</h2>
<h2>年纪:{{job.eng.money}}</h2>
<button @click="age++">修改年纪</button>
<button @click="job.eng.money++">修改薪水</button>
</template>
<script>
//引入toRefs
import {toRefs,reactive,readonly,shallowReadonly} from 'vue'
export default{
setup(){
let Obj=reactive({
name:"张三",
age:18,
job:{
eng:{
money:30
}
}
})
//禁止响应式的数据进行修改全部
//Obj=readonly(Obj)
//只限制第一层的数据只读
Obj=shallowReadonly(Obj)
return{
...toRefs(Obj)
}
}
}
</script>
toRaw
? ? ? ? 作用:将一个由reactive生成的响应式对象转为普通对象
? ? ? ? 使用场景:用于读取响应式对象中的普通对象,这个普通对象的所有操作,不会引起页面更新
<template>
<h1>toRaw的使用</h1>
<h2>姓名:{{name}}</h2>
<h2>年纪:{{age}}</h2>
<h2>年纪:{{job.eng.money}}</h2>
<button @click="showToRaw">输出最原始的Obj</button>
</template>
<script>
//引入toRaw
import {toRefs,reactive,toRaw} from 'vue'
export default{
setup(){
let Obj=reactive({
name:"张三",
age:18,
job:{
eng:{
money:30
}
}
})
function showToRaw(){
let O = toRaw(Obj)
O.age++
console.log(O)//输出的结果为一个普通对象
}
return{
...toRefs(Obj),
showToRaw
}
}
}
</script>
markRaw
? ? ? ? 作用:标记一个对象,使用其不会成为响应式对象
? ? ? ? 应用场景:
? ? ? ? ? ? ? ? 1,有些值不应该被设置为响应式的,例如复杂的第三方库等
? ? ? ? ? ? ? ? 2,当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能
<template>
<h1>markRaw的使用</h1>
<h2>姓名:{{name}}</h2>
<h2>年纪:{{age}}</h2>
<h2>年纪:{{job.eng.money}}</h2>
<button @click="showMarkRaw">输出最原始的Obj</button>
</template>
<script>
//引入markRaw
import {toRefs,reactive,markRaw} from 'vue'
export default{
setup(){
let Obj=reactive({
name:"张三",
age:18,
job:{
eng:{
money:30
}
}
})
function showMarkRaw(){
let others={address:"湖北武汉",weight:180}
Obj.others=markRaw(others)
console.log(Obj)
}
return{
...toRefs(Obj),
showMarkRaw,
}
}
}
</script>
? ? ? ? 作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制。
<template>
<input type="text" v-model="keyWord">
<h3>{{keyWord}}</h3>
</template>
<script>
import {ref,customRef} from 'vue'
export default {
name: 'App',
setup() {
//自定义一个ref——名为:myRef
function myRef(value,delay){
let timer
//需要接受的两个参数track,trigger
return customRef((track,trigger)=>{
return {
get(){
console.log(`有人从myRef这个容器中读取数据了,我把${value}给他了`)
track() //通知Vue追踪value的变化(提前和get商量一下,让他认为这个value是有用的)
return value
},
set(newValue){
console.log(`有人把myRef这个容器中数据改为了:${newValue}`)
clearTimeout(timer)
timer = setTimeout(()=>{
value = newValue
trigger() //通知Vue去重新解析模板
},delay)
},
}
})
}
// let keyWord = ref('hello') //使用Vue提供的ref
let keyWord = myRef('hello',500) //使用程序员自定义的ref
return {keyWord}
}
}
</script>
作用:实现祖与后代组件之间的通信
用法:父组件有一个provide选择来提供数据,后代组件有一个inject选项来开始使用这些数据
//祖祖组件
<template>
<!-- 我是祖祖组件 -->
<div>
<h3>我是App组件</h3>
<h3>{{name}}--{{price}}</h3>
<ChildsVue/>
</div>
</template>
<script>
//引入provide
import {reactive,toRefs,provide} from 'vue'
import ChildsVue from './components/ChildView.vue'
export default {
name: 'App',
components: {
ChildsVue
},
setup(){
//将祖祖组件的内容传递到孙组件
let car = reactive({
name:"三轮车",
price:"3000元"
})
provide('car',car)//给自己的后代元素传递数据
return{
...toRefs(car)
}
}
}
</script>
//父组件
//子组件里面也可以使用inject
<template>
<div class="Childs">
<h1>子组件</h1>
<sonVue/>
</div>
</template>
<script>
import sonVue from './sonView.vue'
export default{
name:"ChildView",
components:{sonVue}
}
</script>
<style>
.Childs{
background-color: gray;
padding: 10px;
}
</style>
//孙子组件
<template>
<div class="son">
<h1>孙组件</h1>
</div>
</template>
<script>
// 在孙子组件里面进行接受
import {inject} from 'vue'
export default{
name:"sonView",
setup(){
let car = inject('car')
console.log(car,'+++++')
}
}
</script>
<style>
.son{
background-color: gold;
padding: 10px;
}
</style>
isRef:检查一个值是否为一个ref对象
isReactive:检查一个对象是否由reactive创建的响应式代理
isReadonly:检查一个对象是否由readonly创建的只读对象
isProxy:检查一个对象是否由react或者readonly方法创建的代理对象
<template>
<h3>进行响应式代理的测试</h3>
</template>
<script>
import {ref,reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'
export default {
name:'App',
setup(){
let car = reactive({name:'三轮车',price:'3000元'})
let sum = ref(0)
let car2 = readonly(car)
console.log(isRef(sum))//true
console.log(isReactive(car))//true
console.log(isReadonly(car2))//true
console.log(isProxy(car))//true
console.log(isProxy(sum))//false
return {...toRefs(car)}
}
}
</script>
<style>
.app{
background-color: gray;
padding: 10px;
}
</style>
? ? ? ? teleport是一种能够将我们的组件html结构移动到指定位置的技术
? ? ? ? 例如父组件里面包含子组件,子组件是一个弹窗,需要把弹窗移动给body
????????
//父组件
<template>
<div class="son">
<h1>父组件</h1>
<DialogVue/>
</div>
</template>
<script>
// 父组件里面包括子组件
import DialogVue from './DialogView.vue'
export default{
name:"sonView",
components:{DialogVue},
}
</script>
<style>
.son{
background-color: gold;
padding: 10px;
}
</style>
//子组件,要移动的组件
<template>
<div>
<button @click="isShow=true">弹窗</button>
<!--这里的to可以是html,body或者是某个指定的选择器,如果是选择器前面需要加#号-->
<teleport to="body">
<div v-if="isShow" class="DialogView">
<h1>这是一个对话弹</h1>
<h4>描述</h4>
<button @click="isShow=false">关闭</button>
</div>
</teleport>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name:"DialogView",
setup(){
let isShow = ref(false)
return{
isShow
}
}
}
</script>
<style>
.DialogView{
width:300px;
height: 300px;
background-color: aqua;
}
</style>
12,Susperse
等待异步组件渲染时做一些其它的事情
使用步骤
1,引入异步组件
2,使用Susperse包裹好组件,并配置好default与fallback
<template>
<div class="Childs">
<h1>父组件</h1>
<Suspense>
<template v-slot:default>
<sonVue/>
</template>
<template v-slot:fallback>
<h3>正在加载中.....</h3>
</template>
</Suspense>
</div>
</template>
<script>
//静态引入
//import sonVue from './sonView.vue'
//异步引入或者叫动态引入
import {defineAsyncComponent} from 'vue'
const sonVue = defineAsyncComponent(()=>import('./sonView.vue'))
export default{
name:"ChildView",
components:{sonVue}
}
</script>
<style>
.Childs{
background-color: gray;
padding: 10px;
}
</style>