前文指路：
Vue零基础教程|从前端框架到GIS开发系列课程（五）组件式开发
Vue零基础教程|从前端框架到GIS开发系列课程（四）计算属性与侦听器
Vue零基础教程|从前端框架到GIS开发系列课程（三）模板语法
0帧起手《Vue零基础教程》，从前端框架到GIS开发系列课程
什么是组合式API(了解)
从整体上划分, Vue分为如下几个核心模块
-
编译器.
-
渲染器.
-
响应式系统.
将模块里的每个功能解耦成一个一个函数,
每个函数实现特定的功能, 这些函数可以任意组合使用, 就叫做组合式API
比如:
-
reactive: 将普通对象转换成响应式对象
-
computed: 定义一个计算属性
-
watch: 定义一个侦听器
小结
使用一个函数实现一个特定的小功能, 再加这些函数任意组合, 实现更复杂的功能.
这些函数就叫做组合式API
为什么提出组合式API(了解)
1) Options API下代码的组织形式
使用Options API实现一个功能, 需要在不同的地方编写代码
-
状态(数据)在data中定义
-
方法在methods中定义
-
计算属性
-
...
当新添加一个功能时, 代码的组织会比较零散
2) Composition API下代码的组织形式
Party3
Vue响应式原理(理解)
1) 什么是响应式
当数据改变时, 引用数据的函数会自动重新执行
2) 手动完成响应过程
首先, 明确一个概念: 响应式是一个过程, 这个过程存在两个参与者: 一方触发, 另一方响应
比如说, 我们家小胖有时候不乖, 我会打他, 他会哭. 这里我就是触发者, 小胖就是响应者
同样, 所谓数据响应式的两个参与者
-
触发者: 数据
-
响应者: 引用数据的函数
当数据改变时, 引用数据的函数响应数据的改变, 重新执行
我们先手动完成响应过程
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"></div><script>// 定义一个全局对象: `触发者`const obj = { name: 'hello' }// effect函数引用了obj.name, 这个函数就是 `响应者`function effect() {// 这里可以通过app拿到DOM对象app.innerHTML = obj.name}effect()// 当obj.name改变时, 手动执行effect函数, 完成响应过程setTimeout(() => {obj.name = 'brojie'effect()}, 1000)</script></body></html>
为了方便, 我们把引用了数据的函数 叫做 副作用函数
3) 副作用函数
如果一个函数引用了外部的资源, 这个函数会受到外部资源改变的影响
我们就说这个函数存在副作用. 因此, 也把该函数叫做副作用函数
这里, 大家不要被这个陌生的名字吓唬住
所谓副作用函数就是引用了数据的函数或者说数据关联的函数
4) reactive()函数
在Vue3的响应式模块中, 给我们提供了一个API: reactive
reactive(): 将普通对象转换成响应式对象
如何理解响应式对象
如果一个对象的get和set过程被拦截, 并且经过自定义后与某个副作用函数建立了依赖关系.
这样的对象就被认为是具有响应式特性的. 即: 当数据改变时, 所依赖的函数会自动重新执行
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><script>const { reactive } = Vue// 将普通对象转换成响应式对象const pState = reactive({ name: 'xiaoming', age: 20 })console.log(pState)</script></body></html>
5) effect()函数
响应式对象要跟副作用函数配合使用. 在Vue3中提供了一个API: effect
effect(): 注册副作用函数, 建立响应式对象和副作用函数之间的关系
如何建立依赖
-
定义一个函数, 这个函数中引用了响应式对象的属性
-
通过effect注册副作用函数