2024年最新Vue3 学习笔记 —— （一）深入理解组合式 API(1)，2024年最新前端面试题整理

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 必须 return，外部才能拿到值

return { counter, increment,decrement }

}

}

3.2 toRefs() ? toRef()

---

在上面的代码中，我们使用 ref() 和 reactive() 分别可以实现响应式的数据，我们是否可以两者一起使用呢？

3.2.1 ref() 和 reactive() 连用

ref() 和 reactive() 实现响应式对象 {{ count }}

3.2.2 使用 toRefs() 和 reactive()

实现响应式对象 {{ count }}

3.2.3 使用 toRef() 和 reactive()

实现响应式对象 {{ count }}

ref 和 reactive 分别是两种响应式数据的变量风格，具体看个人情况使用

3.3 computed 计算属性

---

3.3.1 配合 ref() 使用 实现响应式

{{count}} ， {{double}}

3.3.2 配合 toRefs() 和 reactive() 实现响应式

{{count}} ， {{double}}

3.4 定义函数

---

3.4.1 函数与 watch

事件：{{count}}

<button @click=“add”>添加

3.4.2 Vue3.0 函数与生命周期函数

文档

新的生命周期函数钩子要在 setup() 中使用

1. onMounted

2. onUpdated

3. onUnmounted

export default {

setup() {

// mounted

onMounted(() => {

console.log(‘Component is mounted!’)

})

}

}

四、Vue3 组件化（拆分+传值+注册）

===================================================================================

这里主要是回顾 组件化编程

拆分的方式同 Vue2，注册 + 引入

组件拆分的案例我们沿用上面的计数器来实现 （参考 3.1.4 小节的内容）

4.1 组件拆分

---

预览效果：

编码如下：

1. 定义一个新的 vue 文件，命名为 CounterView.vue 文件

2. 使用 props 接受父组件 App.vue 穿过来的值

我是子组件 CounterView

{{counter}}

3. 修改父组件 App.vue，改为引用 CounterView.vue ，并注册为组件

<button @click=“increament(1)”>增加

<button @click=“increament(-1)”>减少

4.2 事件拆分

---

这里我们在上面的基础上，将 setup() 中定义的事件，拆分至另一个新的 vue 文件

首先我们需要补充一些前置概念：

1. 在 setup() 中是没有 this 关键字的

2. setup() 是可以接受两个参数的 （props, context），然后我们打印接受到的值如下

3. cotext 中，可以看到 emit 关键字，是不是很熟悉，vue2 中我们要子组件传事件给父组件，用的是 this.$emit("事件名称", '值"), 在 Vue3 中也会用到类似的，后面会有具体的演示

4. 编码如下：

在子组件完成事件注册

<button @click=“increament(1)”>增加

<button @click=“increament(-1)”>减少

在父组件完成事件调用

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】