目录
01为什么学vue3
02setup选项
03组合式API：reactive和ref函数
04组合式API：computed
05组合式API：watch
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选项的执行时机？
<script> export default { setup(){ }， beforeCreate(){ ） </script>2.setup写代码的特点是什么？
<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语法糖：语法糖写法如下
<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函数
2. 在<script setup>中执行ref 函数并传入初始值，使用变量接收 ref 函数的返回值
本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型
底层：包成复杂类型之后，再借助reactive实现的响应式
注意点：
1.脚本中访问数据，需要通过·value
2.在template中,.value不需要加(帮我们扒了一层)
<!-- 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><!-- 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 基于响应式数据做计算的值，用变量接收
<!-- 计算属性小案例 --> <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开启深度侦听
1. 侦听单个数据
<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>2. 侦听多个数据：侦听多个数据，第一个参数可以改写成数组的写法
<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>3. immediate：在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调
<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>4. deep
通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep
<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><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.生命周期函数基本使用
1. 导入生命周期函数
2. 执行生命周期函数，传入回调
<scirpt setup> //beforeCreate和created的相关代码 //一律放在setup中执行 import { onMounted } from 'vue' onMounted(()=>{ // 自定义逻辑 }) </script>2.执行多次 生命周期函数执行多次的时候，会按照顺序依次执行
<scirpt setup> import { onMounted } from 'vue' onMounted(()=>{ // 自定义逻辑 }) onMounted(()=>{ // 自定义逻辑 }) </script><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>
