Vue3笔记

1. Vue2 选项式 API vs Vue3 组合式API

 

特点:

  1. 代码量变少

  2. 分散式维护变成集中式维护

 

2. Vue3的优势

Vue3笔记_第1张图片

 

使用create-vue搭建Vue3项目

1. 认识create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应

2. 使用create-vue创建项目

npm init vue@latest

Vue3笔记_第2张图片 

 

熟悉项目和关键文件

Vue3笔记_第3张图片

setup 函数

在setup函数中写的数据和方法需要在末尾以对象的方式return,才能给模版使用

 

 组合式API - reactive和ref函数

1. reactive :接受对象类型数据的参数传入并返回一个响应式的对象

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

3. reactive 对比 ref

  1. 都是用来生成响应式数据

  2. 不同点

    1. reactive不能处理简单类型的数据

    2. ref参数类型支持更好,但是必须通过.value做访问修改

    3. ref函数内部的实现依赖于reactive函数

  3. 在实际工作中的推荐

    1. 推荐使用ref函数,减少记忆负担

组合式API - computed

 

组合式API - watch

侦听一个或者多个数据的变化,数据变化时执行回调函数,俩个额外参数 immediate控制立刻执行,deep开启深度侦听

1. 侦听单个数据

3. immediate

在侦听器创建时立即出发回调,响应式数据变化之后继续执行回调

4. deep

 通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep


 

组合式API - 父子通信

 

1. 父传子

Vue3笔记_第4张图片

 

2. 子传父

Vue3笔记_第5张图片

 

组合式API - 模版引用

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

1. 基本使用

实现步骤:

  1. 调用ref函数生成一个ref对象

  2. 通过ref标识绑定ref对象到标签

 Vue3笔记_第6张图片

 

2. defineExpose

默认情况下在

你可能感兴趣的:(javascript,前端,vue.js)