Vue3学习笔记（上）
Vue3的优势：
- 更容易维护：
- 组合式API
- 更好的TypeScript支持
- 更快的速度：
- 重写diff算法
- 模板编译优化
- 更高效的组件初始化
- 更小的体积：
- 良好的TreeShaking
- 按需引入
- 更优的数据响应式：Proxy
创建vue3项目
create-vue是vue官方新的脚手架工具，底层切换到了vite（下一代构建工具），为开发提供急速响应。
-
前提环境条件：
已安装16.0或更高版本的Node.js
node -v -
创建一个Vue应用
npm init vue@latest这一指令将会安装并执行create-vue
项目目录与关键文件
-
vite.config.js - 项目的配置文件（基于vite的配置）
-
package.json - 项目包（核心依赖项变成了Vue3）
-
main.js - 入口文件（createApp函数创建应用实例）
-
app.vue - 根组件（SFC单文件组件script - template）
变化一：脚本script和模板template顺序调整
变化二：模板template不再要求唯一根元素
变化三：脚本script添加setup标识支持组合式API
-
index.html - 单页入口（提供id为app的挂载点）
组合式API
setup选项
原始写法：
<script>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
export default {
setup () {
const message = 'hello'
const logmsg = () => {
console.log(message)
}
return {
message,
logmsg
}
}
}
</script>
语法糖写法：
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
export default {
const message = 'hello'
const logmsg = () => {
console.log(message)
}
}
</script>
setup语法糖原理：
执行时机：比beforeCreate还要早
注意：
- setup函数中，获取不到this（this指向undefined，因为setup函数创建比beforeCreate早，不指向组件实例）
- 数据和函数需要在setup最后return，才能在模板中应用
- 语法糖写法可以简化代码
reactive函数
作用：接受对象类型数据的参数传入并返回一个响应式的对象
核心步骤：
<script setup>
// 导入
import { reactive } from 'vue'
// 执行函数 传入函数 变量接收
const state = reactive(对象类型数据)
</script>
- 从vue包中导入reactive函数
- 在
<script setup>中执行reactive函数并传入类型为对象的初始值，并使用变量接收返回值
ref函数
作用：接收简单类型或者对象类型的数据传入并返回一个响应式对象
本质：在原有传入数据的基础上，外层包了一层对象，包成了复杂数据类型
底层：包成复杂数据类型之后，再借助reactive实现的响应式
注意点：
- 脚本中访问数据，需要通过 .value
- 在template中，不需要加 .value
核心步骤：
<script setup>
// 导入
import { ref } from 'vue'
// 执行函数 传入函数 变量接收
const count = ref(简单类型或复杂类型数据)
</script>
- 从vue包中导入ref函数
- 在
<script setup>中执行ref函数并传入初始值，使用变量接收ref函数的返回值
computed
计算属性基本思想和vue2的完全一致，组合式API下计算属性只是修改了写法
<script setup>
// 导入
import { computed } from 'vue'
// 执行函数 传入函数 变量接收
const computeddState = computed(() => {
return 基于响应式数据做计算之后的值
})
</script>
核心步骤：
- 导入computed函数
- 执行函数在回调参数中return基于响应式数据做计算的值，用变量接收
注意：
- 计算属性中不应该有”副作用”，比如异步请求、修改dom
- 避免直接修改计算属性的值，计算属性应该是只读的，特殊情况可以配置 get set
watch
作用：侦听一个或多个数据的变化，数据变化是执行回调函数。
- 导入watch函数
- 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
侦听单个数据：
<script setup>
// 导入
import { watch, ref } from 'vue'
const count = ref(0)
// 调用watch 侦听变化
watch(count, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
</script>
侦听多个数据：
<script setup>
// 导入
import { watch, ref } from 'vue'
const count = ref(0)
const name = ref('zs')
// 调用watch 侦听变化
watch(
[count, name],
([newCount, oldCount], [newName, oldName]) => {
console.log(newCount, oldCount, newName, oldName)
})
</script>
immediate
说明：在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调。
<script setup>
// 导入
import { watch, ref } from 'vue'
const count = ref(0)
// 调用watch 侦听变化
watch(count, (newValue, oldValue) => {
console.log(newValue, oldValue)
}, {
immediate: true
})
</script>
deep
watch默认进行的是浅层监视，开启deep: true才能监视到复杂数据类型内部数据的变化。
<script setup>
// 导入
import { watch, ref } from 'vue'
const userinfo = ref({
name: 'zs',
age: 18
})
// 调用watch 侦听变化
watch(userinfo, (newValue, oldValue) => {
console.log(newValue, oldValue)
}, {
deep: true
})
</script>
精确侦听到对象内的某个属性
<script setup>
// 导入
import { watch, ref } from 'vue'
const userinfo = ref({
name: 'zs',
age: 18
})
// 调用watch 侦听变化
watch(() => userinfo.value.age, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
</script>
Vue3的声明周期
| 选项式API | 组合式API |
|---|---|
| beforeCreate/created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
组合式API的生命周期函数写成函数的调用方式，可以调用多次，并不会冲突，而是按照顺序依次调用。
