create-vue是Vue官方新的脚手架工具
,底层切换到了 vite(下一代构建工具)
,为开发提供极速响应
已安装 16.0 或更高版本的 Node.js
node -v
npm init vue@latest
关键文件:
基于vite的配置
Vue3.x 和 vite
createApp函数创建应用实例
SFC单文件组件 script - template - style
提供id为app的挂载点
setup选项的执行时机?
beforeCreate钩子之前 自动执行
setup写代码的特点是什么?
定义数据 + 函数 然后以对象方式return
作用:接受对象类型数据的参数传入
并返回一个响应式的对象
核心步骤:
<script setup>
//导入
import { reactive } from 'vue'
//执行函数 传入参数 变量接收
const state = reactive(对象类型)
</script>
导入 reactive 函数
中执行 reactive 函数
并传入类型为对象
的初始值,并使用变量接收返回值作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象
核心步骤:
<script setup>
//导入
import { ref } from 'vue'
//执行函数 传入参数 变量接收
const state = ref(简单类型或者复杂类型数据)
</script>
reactive和ref函数的共同作用是什么 ?
用函数调用的方式生成响应式数据
reactive vs ref ?
在实际工作中推荐使用哪个?
推荐使用ref函数,更加灵活统一
计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法
核心步骤: 1. 导入
computed函数
2. 执行函数
在回调参数中return基于响应式数据做计算的值
,用变量接收
<script setup>
// const 计算属性 = computed(() => {
// return 计算返回的结果
// }
import { computed,ref } from 'vue';
// 声明数据
const list = ref([1,2,3,4,5,6,7,8])
// 基于list派生一个计算属性,从list中过滤出 >2
const computedList = computed(() =>{
return list.value.filter(item => item >2)
})
</script>
<template>
<div>原始数据:{{ list }}</div>
<div>计算后的数据:{{ computedList }}</div>
</template>
最佳实践
计算属性中不应该有“副作用”
比如异步请求/修改dom
避免直接修改计算属性的值
计算属性应该是只读的,特殊情况可以配置 get set
作用: 侦听一个或者多个数据
的变化,数据变化时执行回调函数
俩个额外参数:1. immediate(立即执行) 2. deep(深度侦听)
说明:同时侦听多个响应式数据的变化,不管哪个数据变化都需要执行回调
说明:在侦听器创建时立即触发回调,
响应式数据变化之后继续执行回调
默认机制:通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行
,需要开启deep选项
需求:在不开启deep的前提下,侦听age的变化,只有age变化时才执行回调
生命周期函数是可以执行多次的,多次执行时传入的回调会在时机成熟时依次执行
基本思想
基本思想
父传子
子传父
通过ref标识获取真实的dom对象或者组件实例对象 this .$refs .form.validate()
默认情况下在
顶层组件向任意的底层组件传递数据和方法
,实现跨层组件通信
顶层组件可以向底层组件传递方法,底层组件调用方法修改顶层组件中的数据
provide和inject的作用是什么?
跨层组件通信
如何在传递的过程中保持数据响应式?
第二个参数传递ref对象
底层组件想要通知顶层组件做修改,如何做?
传递方法,底层组件调用方法
一颗组件树中只有一个顶层或底层组件吗?
相对概念,存在多个顶层和底层的关系
背景说明:
有 之前,如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。但是用了
后,就没法这么干了 setup 属性已经没有了,自然无法添加与其平级的属性。
为了解决这一问题,引入了 defineProps
与 defineEmits
这两个宏。但这只解决了 props
与 emits
这两个属性。
如果我们要定义组件的 name 或其他自定义的属性,还是得回到最原始的用法——再添加一个普通的
所以在 Vue 3.3 中新引入了 defineOptions
宏。顾名思义,主要是用来定义 Options API
的选项。可以用 defineOptions 定义任意的选项, props, emits, expose, slots 除外(因为这些可以使用 defineXXX 来做到)
在Vue3中,自定义组件上使用v-model, 相当于传递一个modelValue属性,同时触发 update:modelValue 事件
我们需要先定义 props,再定义 emits 。其中有许多重复的代码。如果需要修改此值,还需要手动调用 emit 函数。