目录
[06组合式API - 生命周期函数](#06组合式API - 生命周期函数)
01为什么学vue3
vue3的优势：
更易维护：组合式api;更好的ts支持
更快的速度：重写diff算法;模板编译优化;高效的组件初始化
更小的体积：按需引入;良好的TreeSharking
更优的数据响应式:Proxy
Vue2选项式API vs Vue3组合式API
02setup选项
1.setup选项的执行时机？
beforeCreate钩子之前自动执行
2.setup写代码的特点是什么？
定义数据+函数然后以对象方式return
3.<script setup>解决了什么问题？
经过语法糖的封装更简单的使用组合式AP
4.setup中的this还指向组件实例吗？
指向undefined
1.setup选项的执行时机？
javascript
<script>
export default {
setup(){
}，
beforeCreate(){
）
</script>2.setup写代码的特点是什么？
javascript
<script>
//数据 和 函数,需要在setup 最后return,才能在模板中应用
export default{
setup(){
//数据
const message = 'hello Vue3'
//函数
const logMessage = ()=>{
console.log(message);
}
return {
message,
logMessage
}
console.log('setup函数');
},
beforeCreate(){
console.log('beforeCreate函数');
}
}
</script>
<template>
<button @click=logMessage class="btn">按钮</button>
</template>3.setup语法糖：语法糖写法如下
javascript
<script setup>
//数据
const message = '这是语法糖的message'
//函数
const logMessage = ()=>{
console.log(message);
}
</script>03组合式API：reactive和ref函数
reactive()
作用：接受对象类型数据的参数传入并返回一个响应式的对象
核心步骤：1.从vue包中导入reactive函数
2.在<script setup>中执行reactive函数并传入类型为对象的初始值，并使用变量接收返回值
ref()作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象
核心步骤：1.从vue包中导入ref函数
- 在<script setup>中执行ref 函数并传入初始值，使用变量接收 ref 函数的返回值
本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型
底层：包成复杂类型之后，再借助reactive实现的响应式
注意点：
1.脚本中访问数据，需要通过·value
2.在template中,.value不需要加(帮我们扒了一层)
javascript
<!-- reactive -->
<script setup>
//reactive:接收对象类型数据的参数传入并返回一个响应式的对象
import {reactive} from 'vue'
const zero = reactive({
count:200
})
const setData = ()=>{
zero.count++
}
</script>
<template>
<div>
{{ zero.count }}
</div>
<button @click="setData">添加1</button>
</template>
javascript
<!-- ref() -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
const setCount = ()=>{
//count本质是对象，不能直接count++
count.value++
}
</script>
<template>
<div>
<div>{{ count }}</div>
<button @click="setCount">+1</button>
</div>
</template>1.reactive和ref函数的共同作用是什么？
用函数调用的方式生成响应式数据
2. reactive vs ref ?
(1).reactive不能处理简单类型的数据
(2).ref参数类型支持更好但是必须通过.value访问修改
(3).ref函数的内部实现依赖于reactive函数
3.在实际生活中推荐使用哪一个？
推荐使用ref函数，更加灵活统一
04组合式API：computed
计算属性基本思想与Vue2的完全一致，组合式API下的计算属性只是修改了写法
核心步骤：
1.导入computed函数
2.执行函数子啊回调参数中return 基于响应式数据做计算的值，用变量接收
javascript
<!-- 计算属性小案例 -->
<script setup>
//const计算属性 = computed (()=>{
//return 计算返回的值
//})
import { computed,ref } from 'vue'
//声明数据
const list = ref([1,2,3,4,5,6,7,8])
//基于list派生一个计算属性，从list中过滤出>2
const computedList = computed(()=>{
//list是对象 list.value才是数组
return list.value.filter(item => item>2)
})
//定义一个修改数据的方法
const addFun = ()=>{
list.value.push(666)
}
</script>
<template>
<div>
<div>原始数据：{{ list }}</div>
<div>计算后的数据：{{ computedList }}</div>
<button @click="addFun" type="button">修改</button>
</div>
</template>05组合式API：watch
侦听一个或者多个数据的变化，数据变化时执行回调函数，
俩个额外参数: immediate控制立刻执行，deep开启深度侦听
- 侦听单个数据
javascript
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
// 2. 调用watch 侦听变化
watch(count, (newValue, oldValue)=>{
console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
})
</script>- 侦听多个数据：侦听多个数据，第一个参数可以改写成数组的写法
javascript
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('cp')
// 2. 调用watch 侦听变化
watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
})
</script>- immediate：在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调
javascript
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
// 2. 调用watch 侦听变化
watch(count, (newValue, oldValue)=>{
console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
},{
immediate: true
})
</script>- deep
通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep
javascript
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const state = ref({ count: 0 })
// 2. 监听对象state
watch(state, ()=>{
console.log('数据变化了')
})
const changeStateByCount = ()=>{
// 直接修改不会引发回调执行
state.value.count++
}
</script>
javascript
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const state = ref({ count: 0 })
// 2. 监听对象state 并开启deep
watch(state, ()=>{
console.log('数据变化了')
},{deep:true})
const changeStateByCount = ()=>{
// 此时修改可以触发回调
state.value.count++
}
</script>06组合式API - 生命周期函数
1.生命周期函数基本使用
导入生命周期函数
执行生命周期函数，传入回调
javascript
<scirpt setup>
//beforeCreate和created的相关代码
//一律放在setup中执行
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
})
</script>2.执行多次 生命周期函数执行多次的时候，会按照顺序依次执行
javascript
<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
})
onMounted(()=>{
// 自定义逻辑
})
</script>
javascript
<script setup>
import { onMounted } from 'vue';
const getList = ()=>{
setTimeout(()=>{
console.log('发送请求，获取数据');
},2000)
}
//一进入页面的请求
getList()
//如果有些代码需要在mounted中执行
onMounted(()=>{
console.log('mounted生命周期函数1');
})
//写成函数的调用方式，可以调用多次
//调用多次并不会冲突，而是按照顺序依次执行
onMounted(()=>{
console.log('mounted生命周期函数2');
})
</script>