目录01为什么学vue302setup选项03组合式APIreactive和ref函数04组合式APIcomputed05组合式APIwatch06组合式API - 生命周期函数01为什么学vue3vue3的优势更易维护组合式api;更好的ts支持更快的速度重写diff算法;模板编译优化;高效的组件初始化更小的体积按需引入;良好的TreeSharking更优的数据响应式:ProxyVue2选项式API vs Vue3组合式API02setup选项1.setup选项的执行时机beforeCreate钩子之前自动执行2.setup写代码的特点是什么定义数据函数然后以对象方式return3.script setup解决了什么问题经过语法糖的封装更简单的使用组合式AP4.setup中的this还指向组件实例吗指向undefined1.setup选项的执行时机script export default { setup(){ } beforeCreate(){ /script2.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 clicklogMessage classbtn按钮/button /template3.setup语法糖语法糖写法如下script setup //数据 const message 这是语法糖的message //函数 const logMessage (){ console.log(message); } /script03组合式APIreactive和ref函数reactive()作用接受对象类型数据的参数传入并返回一个响应式的对象核心步骤1.从vue包中导入reactive函数2.在script setup中执行reactive函数并传入类型为对象的初始值并使用变量接收返回值ref()作用接收简单类型或者对象类型的数据传入并返回一个响应式的对象核心步骤1.从vue包中导入ref函数2. 在script setup中执行ref 函数并传入初始值使用变量接收 ref 函数的返回值本质是在原有传入数据的基础上外层包了一层对象包成了复杂类型底层包成复杂类型之后再借助reactive实现的响应式注意点1.脚本中访问数据需要通过·value2.在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 clicksetData添加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 clicksetCount1/button /div /template1.reactive和ref函数的共同作用是什么用函数调用的方式生成响应式数据2. reactive vs ref ?(1).reactive不能处理简单类型的数据(2).ref参数类型支持更好但是必须通过.value访问修改(3).ref函数的内部实现依赖于reactive函数3.在实际生活中推荐使用哪一个推荐使用ref函数更加灵活统一04组合式APIcomputed计算属性基本思想与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 item2) }) //定义一个修改数据的方法 const addFun (){ list.value.push(666) } /script template div div原始数据{{ list }}/div div计算后的数据{{ computedList }}/div button clickaddFun typebutton修改/button /div /template05组合式APIwatch侦听一个或者多个数据的变化数据变化时执行回调函数俩个额外参数: 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}) }) /script2. 侦听多个数据侦听多个数据第一个参数可以改写成数组的写法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]) }) /script3. 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 }) /script4. deep通过watch监听的ref对象默认是浅层侦听的直接修改嵌套的对象属性不会触发回调执行需要开启deepscript setup // 1. 导入watch import { ref, watch } from vue const state ref({ count: 0 }) // 2. 监听对象state watch(state, (){ console.log(数据变化了) }) const changeStateByCount (){ // 直接修改不会引发回调执行 state.value.count } /scriptscript 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 } /script06组合式API - 生命周期函数1.生命周期函数基本使用1. 导入生命周期函数2. 执行生命周期函数传入回调scirpt setup //beforeCreate和created的相关代码 //一律放在setup中执行 import { onMounted } from vue onMounted((){ // 自定义逻辑 }) /script2.执行多次 生命周期函数执行多次的时候会按照顺序依次执行scirpt setup import { onMounted } from vue onMounted((){ // 自定义逻辑 }) onMounted((){ // 自定义逻辑 }) /scriptscript setup import { onMounted } from vue; const getList (){ setTimeout((){ console.log(发送请求获取数据); },2000) } //一进入页面的请求 getList() //如果有些代码需要在mounted中执行 onMounted((){ console.log(mounted生命周期函数1); }) //写成函数的调用方式可以调用多次 //调用多次并不会冲突而是按照顺序依次执行 onMounted((){ console.log(mounted生命周期函数2); }) /script