vue2 选项API
- 通过data、methods、watch等配置选项组织代码逻辑
vue3 Composition API(组合式API)
- 所有的逻辑在setup函数中，使用ref、watch等函数组织代码
setup函数
- 是组合式API的入口函数，是vue3特有的选项
- 在beforeCreate之前执行
- 函数中不能使用this，是undefined
- 数据或函数在模板中使用，需要在setup中返回
reactive函数
- setup中返回的数据是响应式吗？ 不是 需要使用reactive转成响应式
- reactive通常定义复杂数据类型的响应数据
ref
- 定义响应式数据，不限类型
- 如果能确定数据是对象且字段名称也确定，使用reactive，其他使用ref
computed计算属性
数量统计、全选
vue2语法
computed:{
xx(){
return xxx
},
//完整写法
allcheck:{
set(V){
},
get(){
return xxx
}
}
}
vue3 定义计算属性
步骤：
1.从vue中导出computed函数
2.setup函数中，使用computed函数，传入一个函数，函数返回计算好的数据
3.最后setup函数返回一个对象，包含计算属性数据
watch监听
watch(监听的数据，回调函数，配置对象)
- 监听1个响应式数据
<template>
<p>{{ num }}</p>
</template>
<script setup>
import {ref,watch} from 'vue'
const num = ref(2)
// 监听单个数据
//watch(监听的数据，改变后回调函数)
watch(num,()=>{
console.log('num改变了');
})
setTimeout(()=>{
num.value++
},2000)
</script>
- 监听多个响应式数据
语法：
// watch([数据1,数据2,...],,改变后回调函数)
watch([count,user],()=>{
console.log("数据改变了")
代码：
<template>
<p>{{ num }}</p>
<p>{{ num2 }}</p>
</template>
<script setup>
import {ref,watch} from 'vue'
const num = ref(2)
const num2 = ref(5)
// 监听多个数据
watch([num,num2],()=>{
console.log('num和num2改变了');
})
setTimeout(()=>{
num2.value++
num.value++
},2000)
</script>
- 可以监听响应式对象数据中的一个属性
语法：
// watch(()=>user.name,改变后回调函数)
watch(()=>user.name,()=>{
console.log("改变");
})
代码：
<template>
<p>{{ obj.name }}===={{ obj.str.age }}</p>
</template>
<script setup>
import {ref,watch,reactive} from 'vue'
const obj = reactive({name:'wfk',str:{sex:'女',age:23}})
// 监听对象中的属性
watch(()=>obj.name,()=>{
console.log('name改变了');
})
setTimeout(()=>{
obj.name='xy'
},2000)
</script>
- 深度监听
语法：
// watch(()=>user.name,改变后回调函数,{deep:true})
代码：
<template>
<p>{{ obj.name }}===={{ obj.str.age }}</p>
</template>
<script setup>
import {ref,watch,reactive} from 'vue'
const obj = reactive({name:'wfk',str:{sex:'女',age:23}})
// 深度监听
watch(
()=>obj.str,
()=>{
console.log('age改变了');
},
{
immediate:true, //默认执行一次
deep:true //开启深度监听
}
)
setTimeout(()=>{
obj.str.age++
},2000)
</script>
<style>
</style>
生命周期
使用步骤：
- 从vue中导入以on开头的生命周期钩子函数
- 在setup函数中调用生命周期函数传入回调函数
- 生命周期钩子函数可以调用多次
ref获取Dom元素
步骤：
- 创建ref const myRef = ref(null) 默认值是null
- 模板中定义 ref='myRef'
- myRef.value
ref操作组件 ---defineExpose
配合defineExpose 暴露组件实例使用 ，暴露的响应式数据会自动接触响应式
父组件：
子组件：
组件通信
父传子 defineProps
步骤：
1.父组件提供数据
2.父组件将数据传递给子组件--自定义属性
3.子组件通过defineProps接收
4.子组件渲染父组件的数据
父组件
<template>
<div>
<p>我是父组件</p>
<son :num="num" :obj="obj"></son>
</div>
</template>
<script setup>
import {ref} from 'vue'
import son from './son.vue'
const num = ref(99)
const obj = ref('今天是2.9')
</script>
<style>
</style>
子组件
<template>
<div>
<p>我是子组件</p>
<p>{{ num }}===={{ obj }}</p>
</div>
</template>
<script setup>
import {ref} from 'vue'
const props = defineProps({
num:Number,
obj:String
})
</script>
<style>
</style>
子传父 defineEmits
子组件通过defineEmits获取emit函数（没有this）
子组件通过emit触发事件，并且传递数据
父组件提供方法
父组件通过自定义事件的方式给子组件注册事件
父组件
<template>
<div>
<p>我是父组件</p>
<son :num="num" :obj="obj" @changeNum="changeNum"></son>
</div>
</template>
<script setup>
import {ref} from 'vue'
import son from './son.vue'
const num = ref(99)
const obj = ref('今天是2.9')
const changeNum = (num2)=>{
num.value=num.value-num2
}
</script>
<style>
</style>
子组件
<template>
<div>
<p>我是子组件</p>
<p>{{ num }}===={{ obj }}</p>
<button @click="change">子传父</button>
</div>
</template>
<script setup>
import {ref} from 'vue'
const props = defineProps({
num:Number,
obj:String
})
// 子传父
const emit = defineEmits(['changeNum'])
const change = ()=>{
emit('changeNum',10)
}
</script>
<style>
</style>
跨级组件通信
- provide 提供后代组件需要的数据或函数
- inject 获取provide提供的数据或函数
app组件
后代组件
toRefs
- 使用reactive创建的响应式数据被展开或解构的时候使用toRefs保持响应式
- 作用：把对象中的每一个属性做一次包装称为响应式数据
