完整原文地址见简书
更多完整Vue笔记目录敬请见《前端 Web 笔记 汇总目录(Updating)》
本文内容提要
- Composition API 的作用
- setup函数
- 例程,打印查看setup内容
- 非响应引用的案例
ref()
概念、原理 与 实战reactive()
概念、原理 与 实战- 使用
readonly
限制对象的访问权限- 使用
toRefs()
对reactive
对象进一步封装- 多个属性进行解构
- 多个属性 配合toRefs() 进行解构
- toRefs()无法处理 undefined的键值
- 使用toRef()应对上述问题
- 关于setup函数的三个参数【attrs、slots、emit】
- 回顾 没有 CompositionAPI时,emit的用法
- 使用setup的 context.emit 替代 this.$emit
- 使用Composition API开发 todoList
- 完善toDoList案例
- 优化上例的逻辑结构!
- setup的 computed 计算属性
- 当然以上是computed 的默认用法,实际上它可以接收一个对象
- 将上例的处理值换成 Object类型,再例
- setup 中的 watch 监听
- setup 中的 watch 监听:监听Object类型
- setup 中的 watch 监听:监听Object类型的 多个属性
- setup 中的 watchEffect监听 以及 与 watch 的异同比较
- 两者都可以用以下的方式,在一个设定的时延之后,停止监听
- 为 watch 配置 immediate属性,可使具备同watchEffect的 即时性
- setup 中的 生命周期
- setup中的provide、inject用法
- 配合上ref实现 响应特性 以及 readonly实现 单向数据流
- setup结合ref指令
Composition API 的作用
使得相同的、相关的功能代码 可以比较 完整地聚合起来,
提高可维护性、可读性,提高开发效率;
规避 同一个功能的代码,
却散落在 组件定义中的data、methods、computed、directives、template、mixin
等各处 的问题;
setup函数
--- Composition API 所有代码编写之前,
都要 建立在setup函数 之上;
--- 在created 组件实例 被完全初始化之前 回调;
(所以注意在setup
函数中,
使用与this
相关的调用是没有用的)
--- setup函数中的内容,
可以在 该组件的 模板template
中直接使用;
(如下例程)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div @click="handleClick">{
{name}}</div>
`,
setup(props, context) {
return {
name: 'zhao',
handleClick: () => {
alert(666);
}
}
}
});
const vm = app.mount('#heheApp');
</script>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/b019eb7f7e9b15fb3eb9935acae49c21.png)
例程,打印查看setup内容
<script>
const app = Vue.createApp({
template: `
<div @click="handleClick">{
{name}}</div>
`,
methods: {
test() {
console.log(this.$options);
}
},
mounted() {
this.test();
},
setup(props, context) {
return {
name: 'zhao',
handleClick: () => {
alert(666);
}
}
}
});
const vm = app.mount('#heheApp');
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/de0aa30f08f95e436ac0a7924a0fdfb9.png)
由于调用时序的关系,setup中 无法调用this等相关 如变量、methods中 等 其他内容,但是其他内容 却可以调用 setup函数!!【setup生时众为生,众生时setup已生】
<script>
const app = Vue.createApp({
template: `
<div @click="handleClick">{
{name}}</div>
`,
methods: {
test() {
console.log(this.$options.setup());
}
},
mounted() {
this.test();
},
setup(props, context) {
return {
name: 'zhao',
handleClick: () => {
alert(666);
}
}
}
});
const vm = app.mount('#heheApp');
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/f54549be9b3a3af29b15f5a70cf54b22.png)
非响应引用的案例
如下,这样没有使用ref
/reactive
的写法,是不会有响应的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{
{name}}</div>
`,
setup(props, context) {
let name = 'guan';
setTimeout(() => {
name = 'zhao';
}, 2000);
return { name }
}
});
const vm = app.mount('#heheApp');
</script>
</html>
如下,运行之后,两秒延时之后,DOM文本展示并不会自动改成zhao
,而是一直展示初始化的guan
:
![](https://i-blog.csdnimg.cn/blog_migrate/df412f14b70aafa00788c27a49be0242.png)
ref()
概念、原理 与 实战
使用
ref
可以 用于处理基础类型的数据
,赋能响应式
;
原理:通过 proxy 将数据
封装成
类似proxy({value: '【变量值】'})
这样的一个响应式引用
,
当数据
变化时,就会 触发template
等相关UI的更新
【赋予 非data中定义的变量 以响应式
的能力 ——
原先,我们是借助Vue的data函数
,完成响应式变量
的定义的;
有了ref
之后,我们可以不借助data
中的定义,
而直接在普通的函数
中对js变量
做proxy
封装,
就可以对普通的js引用
赋能响应式
了】;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{
{name}}</div>
`,
setup(props, context) {
const { ref } = Vue;
let name = ref('guan');
setTimeout(() => {
name.value = 'zhao';
}, 2000);
return { name }
}
});
const vm = app.mount('#heheApp');
</script>
</html>
运行效果:
![](https://i-blog.csdnimg.cn/blog_migrate/d3b6ccf8935ed35b524952209f235f8b.png)
两秒后自动变化:
![](https://i-blog.csdnimg.cn/blog_migrate/7ae602184953a8c1fa8551669f5b1aba.png)
reactive()
概念、原理 与 实战
使用
reactive()
用于处理非基础类型的数据(如Object、Array)
,赋能响应式
;
原理类似ref()
,只是处理的数据格式不同而已;
如下,普通的Object类型
是没有响应式
的效果的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{
{nameObj.name}}</div>
`,
setup(props, context) {
// const { ref } = Vue;
const nameObj = { name: 'guan'};
setTimeout(() => {
nameObj.name = 'zhao';
}, 2000);
return { nameObj }
}
});
const vm = app.mount('#heheApp');
</script>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/b3c2f37ea9a921277bee3c5f9ca42511.png)
使用reactive()
处理Object类型
后,具备响应式
的能力:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{
{nameObj.name}}</div>
`,
setup(props, context) {
const { reactive } = Vue;
const nameObj = reactive({ name: 'guan'});
setTimeout(() => {
nameObj.name = 'zhao';
}, 2000);
return { nameObj }
}
});
const vm = app.mount('#heheApp');
</script>
</html>
运行效果:
![](https://i-blog.csdnimg.cn/blog_migrate/16e8113e30d896d3d83ffc3a33830ef6.png)
两秒后自动变化:
![](https://i-blog.csdnimg.cn/blog_migrate/b20e7cb3c472ba7d56cfd18a468a1b0d.png)
使用reactive()
处理Array类型
数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{
{nameObj[0]}}</div>
`,