一、创建vue3项目
npm init vue@latest
二、语法介绍
1.< script setup>语法糖
<script setup>
const aa = '123'
const clickFn = () => {
console.log(123);
}
</script>
<template>
<div>{
{ aa }}</div>
<button @click="clickFn">aa</button>
</template>
2.响应式函数
2.1reactive()
2.1.1介绍
接收一个对象类型数据的参数传入并返回一个响应式的对象
2.1.2使用
<script setup>
import { reactive } from 'vue'
const rea = reactive({ aa: 123, bb: '22' })
const clickFn = () => {
console.log(123);
rea.aa += 1
}
</script>
<template>
<div>{
{ rea.aa }}</div>
<button @click="clickFn">aa</button>
</template>
2.2 ref()
2.2.1介绍
接收简单类型或者对象类型的数据传入并返回一个响应式对象
2.2.1使用
<script setup>
import { ref } from 'vue'
const re = ref(0)
</script>
<template>
<div>{
{ re }}</div>
</template>
2.3比较ref和reactive
1.reactive不能处理简单类型的数据
2.ref参数类型支持更好但是必须通过.value访问修改
3.ref函数的内部实现依赖于reactive函数
推荐使用ref函数，更加灵活
3.computed计算属性
3.1使用
<script setup>
import { ref, computed } from 'vue'
const aa = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
const com = computed(() => {
return aa.value.filter(item => item > 2)
})
setTimeout(() => {
aa.value.push(9, 10)
}, 3000)
</script>
<template>
<div>
原值 -{
{ aa }}
计算属性-{
{ com }}
</div>
</template>
3.2注意
1.计算属性不能直接修改dom或异步请求
2.计算属性应该是只读的
4.watch函数
4.1介绍
介绍
watch是用来监听一个或多个数据变化的。数据变化时执行回调函数
定义
watch(值, (newv, oldv) => {
console.log(newv, oldv, 1);
},{
immediate:true,
deep:true
})
参数属性
immediate 立即执行
deep 深度监听
4.2监听单个数据
<script setup>
import { ref, watch } from 'vue'
const aa = ref(0)
const clickFn = () => {
aa.value += 1
}
watch(aa, (newv, oldv) => {
console.log(newv, oldv, 1);
})
</script>
<template>
<div>
<button @click="clickFn">aa</button>
</div>
</template>
4.3.监听多个数据的变化
<script>
import { ref, watch } from 'vue'
const aa = ref(0)
const bb = ref('qa')
const clickFn = () => {
aa.value += 1
}
const clickFn1 = () => {
bb.value += 1
}
watch([aa, bb], (newv, oldv) => {
//只要有其中一个数据变化就会触发
console.log(newv, oldv, 1);
}, {
immediate: true
})
</script>
<template>
<div>
<button @click="clickFn">aa</button>
<button @click="clickFn1">bb</button>
</div>
</template>
4.4 立即执行监听
<script setup>
import { ref, watch } from 'vue'
const aa = ref(0)
const clickFn = () => {
aa.value += 1
}
watch(aa, (newv, oldv) => {
console.log(newv, oldv, 1);
})
</script>
<template>
<div>
<button @click="clickFn">aa</button>
</div>
</template>
4.5 深度监听
<script setup>
import { ref, watch } from 'vue'
const aa = ref({ aa: 123 })
const clickFn = () => {
aa.value.aa += 1
}
watch(aa, (newv, oldv) => {
console.log(newv, oldv, 1);
}, {
deep: true
})
</script>
<template>
<div>
{
{ aa.aa }}
<button @click="clickFn">aa</button>
</div>
</template>
4.6 监听对象中的某个值
<script setup>
import { ref, watch } from 'vue'
const aa = ref({ aa: 123, bb: 235 })
const clickFn = () => {
aa.value.aa += 1
}
const clickFn1 = () => {
aa.value.bb += 1
}
watch(() => aa.value.aa, (newv, oldv) => {
console.log(newv, oldv, 1);
}, {
deep: true
})
</script>
<template>
<div>
{
{ aa.aa }}
<button @click="clickFn">aa</button>
<button @click="clickFn1">aa1</button>
</div>
</template>
5.生命周期函数
5.1介绍
介绍
1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
2、onBeforeMount() : 组件挂载到节点上之前执行的函数；
3、onMounted() : 组件挂载完成后执行的函数；
4、onBeforeUpdate(): 组件更新之前执行的函数；
5、onUpdated(): 组件更新完成之后执行的函数；
6、onBeforeUnmount(): 组件卸载之前执行的函数；
7、onUnmounted(): 组件卸载完成后执行的函数；
8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
注意
生命周期函数可以执行多次，多次执行时传入的回调会在时机成熟时依次执行
5.2使用
<script setup>
import { onMounted } from 'vue'
// 组件挂载
onMounted(() => {
console.log('组件挂载');
})
</script>
6.传参方法
6.1.父子通信
6.1.1父传子
//在父组件中
<script setup>
import children from './components/children.vue'
import { ref } from 'vue'
const data = ref('ccc')
</script>
<template>
<div>
<children :data="data"></children>
</div>
</template>
//在子组件中
<script setup>
const props = defineProps({
data: String
})
</script>
<template>
<div>{
{ data }}</div>
</template>
6.1.2子传父
//在子组件中
<script setup>
//通过defineEmits生成emit方法 数组中可以创建多个值
const emit = defineEmits(['child'])
const send = () => {
emit('child', 123)
}
</script>
<template>
<button @click="send">aaa</button>
</template>
//在父组件中
<script setup>
import children from './components/children.vue'
const child = (data) => {
console.log(data);
}
</script>
<template>
<div>
<children @child="child"></children>
</div>
</template>
6.2获取dom实例或组件对象
6.2.1使用
<script setup>
//导入子组件
import child from './components/children.vue'
import { onMounted, ref } from 'vue'
// 使用ref创建refs对象
const aa = ref(null)
const bb = ref(null)
// 组件挂载完成之后获取对象
onMounted(() => {
console.log(aa.value);
console.log(bb.value);
})
</script>
<template>
<!-- 通过ref标识绑定ref对象 -->
<div ref="aa">
123
</div>
<!-- 通过ref标识绑定组件 -->
<child ref="bb"></child>
</template>
6.2.2defineExpose()
介绍
默认情况下在<script setup>语法糖下组件内部的属性和方法是不开发给父组件访问的，
可以通过defineExpose()编译宏指定那些属性和方法允许访问
使用
//在子组件
<script setup>
import { ref } from "vue"
const aa = ref(0)
//透露给父组件的值
defineExpose({
aa
})
</script>
<template>
<div>{
{ aa }}</div>
</template>
//在父组件
<script setup>
import child from './components/children.vue'
import { onMounted, ref } from 'vue'
const bb = ref(null)
// 组件挂载完成之后获取对象
onMounted(() => {
console.log(bb.value.aa);
})
</script>
<template>
<!-- 通过ref标识绑定组件 -->
<child ref="bb"></child>
</template>
6.3.provide和inject
6.3.1介绍
在顶层组件通过provide传数据
在底层组件通过inject接收数据
6.3.2使用
组件嵌套关系 父组件-> children.vue -> 底层组件
//在父组件
<script setup>
import child from './components/children.vue'
//传值
provide('value123', '顶层数据')
//传响应式数据
const aa = ref(0)
provide('value234', aa)
//传方法
const setAA = () => {
aa.value += 1
}
provide('value345', setAA)
</script>
<template>
<!-- 通过ref标识绑定组件 -->
<child ref="bb"></child>
</template>
//在底层组件
<script setup>
import { inject } from "vue";
const bb = inject('value123')
const aa = inject('value234')
const setAA = inject('value345')
</script>
<template>
<div>{
{ bb }}</div>
<div>{
{ aa }}</div>
<button @click="setAA">aa</button>
</template>