Vue3：组合式写法入门
Date: May 11, 2023
认识Vue3
1. Vue3组合式API体验
通过 Counter 案例 体验Vue3新引入的组合式API
<script> export default { data(){ return { count:0 } }, methods:{ addCount(){ this.count++ } } } </script>
<script setup> import { ref } from 'vue' const count = ref(0) const addCount = ()=> count.value++ </script>
特点：
1.代码量变少
2.分散式维护变成集中式维护 2. Vue3更多的优势
2. Vue3更多的优势
使用create-vue搭建Vue3项目
1. 认识create-vue
create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应
2. 使用create-vue创建项目
前置条件 - 已安装16.0或更高版本的Node.js
执行如下命令，这一指令将会安装并执行 create-vue
npm init vue@latest
熟悉项目和关键文件
组合式API - setup选项
1. setup选项的写法和执行时机
写法
<script> export default { setup(){ }, beforeCreate(){ } } </script>
执行时机 > 在beforeCreate钩子之前执行
2. setup中写代码的特点
在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用
<script> export default { setup(){ const message = 'this is message' const logMessage = ()=>{ console.log(message) } // 必须return才可以 return { message, logMessage } } } </script>
3.
script标签添加 setup标记，不需要再写导出语句，默认会添加导出语句
<script setup> const message = 'this is message' const logMessage = ()=>{ console.log(message) } </script>
左边是采用语法糖的写法，右边是转译后的复杂写法：
案例：
<template> <div> {{ message }} <button @click="logMessage">log</button> </div> </template> <script setup> //采用setup方式：省略export default 与 return const message = 'this is message' const logMessage = () => { console.log(message); } </script> <style> </style>
总结：
1.setup选项的执行时机？
1.beforecreate钩子之前 自动执行
2.setup写代码的特点是什么？
1.定义数据＋函数 然后以对象方式return
3.
组合式API - reactive和ref函数
1. reactive
**作用：**接受对象类型数据的参数传入并返回一个响应式的对象
注：响应式对象可以引发视图的更新
核心步骤：
1.从 vue 包中导入 reactive 函数
2.在
<script setup> // 导入 import {reactive} from 'vue' // 执行函数 传入参数 变量接收 const state = reactive(对象类型数据) </script>
案例：
<script setup> // 导入 import { reactive } from 'vue' // 执行函数 传入参数 变量接收 const state = reactive({ // msg:'this is msg' //这里传入一个常规的对象 })//通过reactive()会返回给state一个响应式对象 const setState = ()=>{ // 修改数据更新视图 state.msg = 'this is new msg' } </script> <template> <p>{{ state.msg }}</p> <button @click="setState">change msg</button> </template>
效果：
2. ref
作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象
核心步骤：
1.从 vue 包中导入 ref 函数
2.在
<script setup> // 导入 import { ref } from 'vue' // 执行函数 传入参数 变量接收 const state = reactive(简单类型或者复杂类型数据) </script>
案例：
<script setup> // 导入 import { ref } from 'vue' // 执行函数 传入参数 变量接收 const count = ref(0) const setCount = ()=>{ // 修改数据更新视图必须加上.value count.value++ } </script> <template> <button @click="setCount">{{count}}</button> </template>
效果：
注意：打印通过ref创建的响应式对象
3. reactive 对比 ref
二者基本作用：接收数据，返回响应式对象
响应式对象：可以引发视图的更新
1.都是用来生成响应式数据
2.不同点
1.reactive不能处理简单类型的数据
2.ref参数类型支持更好，但是必须通过.value做访问修改
3.ref函数内部的实现依赖于reactive函数
3.在实际工作中的推荐
1.推荐使用ref函数，减少记忆负担，小兔鲜项目都使用ref
组合式API - computed
计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法
核心步骤：
1.导入computed函数
2.执行函数在回调函数中return基于响应式数据做计算的值，用变量接收
<script setup> // 导入 import {ref, computed } from 'vue' // 计算属性 变量接收 在回调参数中return计算值 const computedList = computed(() => { return 基于响应式数据做计算之后的值 }) </script>
案例：
<template> <div> 原始响应式数组 - {{ list }} </div> <div> 计算属性数组 - {{ computedList }} </div> </template> <script setup> // 原始响应式数组 import { ref } from 'vue' // 1. 导入computed import { computed } from 'vue' const list = ref([1, 2, 3, 4, 5, 6, 7, 8]) // 2. 执行函数 const computedList = computed(() => { return list.value.filter(item => item > 2) }) </script>
效果：
总结：
最佳实践
1.计算属性中不应该有“副作用〞
计算属性应该专注于数据的计算，而不应该处理如异步请求/修改dom等操作
2.避免直接修改计算属性的值
计算属性应该是只读的，因此我们的计算属性一般用const修饰
组合式API - watch
**作用：**侦听一个或者多个数据的变化，数据变化时执行回调函数，
两个额外参数 immediate控制立刻执行，deep开启深度侦听
1. 侦听单个数据
具体步骤：
1.导入watph函数
2.执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
案例：
<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>
注意：watch中ref对象不需要加.value
效果：
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>
效果：
注意：开启deep也会开启递归遍历，会带来额外的性能损耗，所以绝大情况下，不建议开启deep
5. 精确侦听对象的某个属性
**需求：**在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调
具体操作：
如果你想要侦听某个属性，那就在watch中将第一个参数写成回调函数的写法
案例：
<template> <div> <p>当前name -- {{ state.name }}</p> <p>当前age -- {{ state.age }}</p> <hr/> <button @click="changeName">CName</button> <button @click="changeAge">CAge</button> </div> </template> <script setup> import { ref, watch } from 'vue' const state = ref({ name: 'cp', age: 18, }) const changeName = () => { state.value.name = "test" } const changeAge = () => { state.value.age = 20 } watch( () => state.value.age, //要侦听谁就把谁写过来 () => console.log('age发生变化了') //数据变化时要执行的回调 ) </script>
效果：
总结：
1.作为watch函数的第一个参数，ref对象需要添加.value吗？
不需要，watch会自动读取
2.watch只能侦听单个数据吗？
单个或者多个
1.不开启deep，直接修改嵌套属性能触发回调吗？
不能，默认是浅层侦听
2.不开启deep，想在某个层次比较深的属性变化时执行回调怎么做？
可以把第一个参数写成函数的写法，返回要监听的具体属性
