一、创建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>
