什么是响应式？

Vue3 的响应式是：当更改响应式对象的值改变时，视图会随即自动更新。

ref()

ref() 返回一个响应式对象，可以用 value 属性来访问或更改对象的值。
ref 对象在模板中会自动解包，用变量名不需要加 .value 就能访问。

1
2
3
4
5
6
7
8
9
10
11

<script setup>
import { ref } from 'vue';

const say = ref('hi'); // 定义值为 hi 的响应式变量 say
say.value = 'hello'; // 把 say 的值改为 hello
</script>

<template>
    <!-- 自动解包，不需要些成 {{ say.value }} -->
    <p>{{ say }}</p>
</template>

reactive()

本文总结 Vue3 组件实例在模板中暴露的常用公共属性和方法，以及对应的 组合式 API 函数。

$data/$props/$options 属性在 组合式 API 下几乎用不到。
$el 不建议用。
$slots 表示父组件所传入插槽的一个对象，很少用，有兴趣可查看官方文档。

$parent

模板中用 $parent 获取父组件实例，可访问父组件用 defineExpose() 显式暴露的绑定。

组合式 API 先在 setup 中用 getCurrentInstance() 获取到当前组件实例，再用 parent 属性访问父组件。getCurrentInstance().parent 除了能访问父组 defineExpose() 暴漏的绑定外，能访问父组件更多的属性和方法，多用于组件的开发，在应用开发中一般不建议用。

1
2
3
4
5

import { getCurrentInstance } from 'vue';

const parent = getCurrentInstance().parent; // 获取父组件的实例
parent.exposed // 访问父组件 defineExpose() 暴露的绑定
parent.refs // 父组件中的模板引用，在模板中用 $parent.$refs

$root

Laravel Eloquent ORM 提供了数据模型关联表操作的 API，熟练掌握这些API后，才体会到 Laravel 数据库操作有多高效。

一、hasMany 一对多关联

save/saveMany 创建关联记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 新建一条数据 Post 的评论，save 将自动添加 post_id 字段
$comment = new Comment(['message' => 'A new comment.']);
$post = Post::find(1);
$post->comments()->save($comment);

// 保持多条记录
$post->comments()->saveMany([
    new Comment(['message' => 'A new comment.']),
    new Comment(['message' => 'Another new comment.']),
]);

// 更新后需要重新加载模型及其关联，才会加到 $post->comments 中
$post->refresh();

// 所有评论，包括新保存的评论...
$post->comments;

create/createMany 创建关联记录

和 save/saveMany 的区别是参数时数组，而不是模型。

call、apply、bind 是 JavaScript 函数的原型方法，用于改变函数的 this 指向来执行函数。一般这种鬼操作能不用则不用，没得选的时候才有必要用。

• apply() 调用一个具有给定 this 值的函数，以及以一个数组（或一个类数组对象的形式提供的参数
• call() 使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数
• bind() 创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const bar = {
    name: 'johnny'
};
function foo (age, hobby) {
    console.log(this.name, age, hobby);
}

// apply 和 call 作用相同，传参方式不同
foo.apply(bar, [28, 'sleep']); // johnny 28 sleep
foo.call(bar, 28, 'sleep'); // johnny 28 sleep

// 先绑定对象返回一个函数
const bindBar = foo.bind(bar);
bindBar(28, 'sleep'); // johnny 28 sleep

参考：深入理解JavaScript——call、apply、bind三大将

见过箭头函数后，知道箭头函数是 function 定义函数的简写，然后还有一点是箭头函数中的 this 是上级代码的 this。
其实除了这两点外，箭头函数和 function 函数还有很多区别。

1、基本语法

1
2
3
4
5
6
7
8
9
10
11
12

// 没有参数时
() => {
    // code ...
}
// 有参数时
(param1, param2, ..., paramN) => {
    // code ...
}
// 只有1个参数时，圆括号可以省略
param => {
    // code ...
}

2、this 指向

• 在顶级代码中， this 指向 window 对象；
• 在 function 定义的函数中， this 指向该函数的对象；
• 在箭头函数中，箭头函数不会创建自己的 this，始终指向箭头函数所在作用域下的 this。

用原型方法 apply()、call()、bind() 不能改变箭头函数中 this 的指向。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const bar = {
    name: 'johnny'
};
function foo () {
    console.log(this.name);
}

const fa = () => {
    console.log(this.name);
};

// bar 作为 foo() 实例的 this
foo.call(bar); // johnny
fa.call(bar); // TypeError: Cannot read properties of undefined (reading 'name')

3、箭头函数不能做构造函数

JavaScript中，用可变变量访问对象方法或类静态方法，如果访问的方法中 this，此时 this 将会是 undefined。
用对象解构赋值获得函数名（如：xxx）后，用函数名后面加括号（如：xxx()）执行函数，this 也是 undefined。

问题复现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 动态访问方法
class Cls1 {
    fn () {
        console.log(this);
    }
}

const obj = new Cls1();

// ❌ 错误方法
const fn1 = obj.fn;
fn1(); // this undefined

// 解构赋值取得
const { fn } = obj;

// ❌ 错误方法
fn(); // this undefined

基本用法

我们知道，一个 js Promise 对象，我们可以用 then()、catch()、finally() 进行链式操作，如：

1
2
3
4
5
6
7

promiseObj.then((res) => {
    // do something
}).catch((error) => {
    // do something
}).finally(() => {
    // do something
})

这是 js Promise 的基本使用，但是要用好 Promise，还有一下几个问题需要搞清楚。

怎样创建 Promise 对象

用 Promise 对象创建 Promise 实例

父组件传参数到子组件 - props

在 <script setup> 中用 defineProps() 声明组件的属性，在父组件模板中引用子组件时，就可以给通过属性给子组件传参数（可以是值、变量、函数、对象等）。

defineProps 是编译器宏，Vue3 编译器宏不需要导入，并且只能在 <script setup> 中使用。

ex: 子组件声明、调用属性

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- HelloWorld.vue 子组件-->
<script setup>
// 声明属性
defineProps([{
    msg: String
}])
</script>

<template>
  <div>
    {{ msg }}
  </div>
</template>

ex: 父组件使用属性

1
2
3
4
5
6
7
8

<!-- Demo.vue 父组件 -->
<script setup>
import HelloWorld from './HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="Welcome"/>
</template>

父组件传递事件到子组件

用 VueRouter hash 模式时，点击浏览器上的后退按钮，浏览器显示上一次浏览页面的时候，会重新执行页面，像页面刷新一样。

跟微信小程序不一样，微信小程序后退的时候不会重新执行，只是给我们一个 onShow 事件，这样如果需要刷新数据，我们就可以在 onShow 里面解决。

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。

基本语法

在 <script> 标签上添加 setup 属性启用该语法，里面的代码会背编译成组件 setup() 函数的内容，每次组件实例被创建时执行。

1
2
3

<script setup>
// 组合式 API 写在这里
</script>

如果要使用 TypeScript，加上 lang="ts" 属性即可。

1
2

<script lang="ts" setup>
</script>

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用。

响应式

响应式即变量数据变化的时候，视图跟着变化。
响应式状态需要明确使用 响应式 API 来创建.
常用 API：

• ref()
• reactive()
• computed()
• watch()
• watchEffect()
• readonly()