快速入门vue3组合式API

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

使用create-vue创建项目

1. 前提环境条件
已安装 16.0 或更高版本的 Node.js
node -v
2. 创建一个Vue应用
npm init vue@latest
这一指令将会安装并执行 create-vue

快速入门vue3组合式API_第1张图片

熟悉项目目录和关键文件 

快速入门vue3组合式API_第2张图片

关键文件:
1. vite.config.js - 项目的配置文件 基于vite的配置
2. package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite
3. main.js - 入口文件 createApp函数创建应用实例
4. app.vue - 根组件 SFC单文件组件 script - template - style
        变化一:脚本script和模板template顺序调整
        变化二:模板template不再要求唯一根元素
        变化三:脚本script添加setup标识支持组合式API
5. index.html - 单页入口 提供id为app的挂载点

组合式API 

setup选项

setup选项的写法和执行时机

快速入门vue3组合式API_第3张图片    快速入门vue3组合式API_第4张图片

1. 执行时机,比beforeCreate还要早

2. setup函数中,获取不到this (this是undefined)

网页显示为:                                                 

3. 数据 和 函数,需要在 setup 最后 return,才能模板中应用




reactive和ref函数

reactive()

作用: 接受 对象类型数据的参数传入 并返回一个 响应式的对象
核心步骤:
快速入门vue3组合式API_第6张图片
1. 从 vue 包中 导入 reactive 函数
2. 在

ref()

作用: 接收 简单类型或者对象类型的数据 传入 并返回一个 响应式的对象

本质:是在原有传入数据的基础上,外层包了一层对象,包成了复杂类型

           底层,包成复杂类型之后,再借助 reactive 实现的响应式

注意点:

           1. 脚本中访问数据,需要通过 .value

           2. 在template中,.value不需要加 (帮我们扒了一层)

核心步骤:

快速入门vue3组合式API_第7张图片

1. 从 vue 包中 导入 ref 函数
2. 在

computed

计算属性基本思想和Vue2的完全一致, 组合式API下的计算属性 只是修改了写法
核心步骤:1. 导入 computed函数
2. 执行函数 在回调参数中 return基于响应式数据做计算的值 ,用 变量接收 快速入门vue3组合式API_第8张图片


a

watch

作用: 侦听 一个或者多个数据 的变化,数据变化时执行回调函数
俩个额外参数:1. immediate(立即执行) 2. deep(深度侦听)

侦听单个数据

1. 导入watch 函数
2. 执行watch函数 传入要侦听的响应式数据 (ref对象) 和回调函数 快速入门vue3组合式API_第9张图片

侦听多个数据 

同时侦听多个响应式数据的变化, 不管哪个数据变化都需要执行回调 快速入门vue3组合式API_第10张图片

immediate 

在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调快速入门vue3组合式API_第11张图片

deep

通过watch监听的ref对象默认是 浅层侦听的,直接修改嵌套的对象属性不会触发回调执行 ,需要开启deep选项 快速入门vue3组合式API_第12张图片


a

精确侦听对象的某个属性 

在不开启deep的前提下,侦听age的变化,只有age变化时才执行回调


生命周期函数

Vue3的生命周期API (选项式 VS 组合式)

快速入门vue3组合式API_第13张图片

父子通信 

组合式API下的父传子

基本思想
1. 父组件中给 子组件绑定属性
2. 子组件内部通过 props选项接收
快速入门vue3组合式API_第14张图片

defineProps 原理:就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

组合式API下的子传父 

基本思想
1. 父组件中给 子组件标签通过@绑定事件
2. 子组件内部通过 emit 方法触发事件
快速入门vue3组合式API_第15张图片

模版引用 

如何使用(以获取dom为例 组件同理)

通过ref标识获取真实的dom对象或者组件实例对象

1. 调用ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签
快速入门vue3组合式API_第16张图片

defineExpose() 

默认情况下在

你可能感兴趣的:(#,前端vue入门,javascript,vue.js,前端,前端框架,开发语言)