create-vue
create-vue是Vue官方新的脚手架工具,底层切换到了vite,为开发提供极速相应
使用create-vue
1.安装16.0或者更高版本的Node.js
2.npm init vue@latest指令会安装并执行create-vue
项目目录和关键文件
组合式API
Vue 3引入了组合式API(Composition API),这是一套全新的API,旨在解决大型组件逻辑复杂难以维护的问题,同时提供更灵活和可重用的代码组织方式。组合式API使得组件逻辑可以按照功能进行拆分,使得代码更加清晰、易于理解和维护。
setup
写法:如下图所示:
执行时机:在组件进行渲染之后会优先执行setup函数,如下周期图所示:
setup选项中写代码的特点:
如果在setup函数里声明的变量和方法,需要return出去才能够使用,如下图所示:
<script setup>语法糖
经过语法糖封装后简化了setup的使用,如下所示:
注意:在setup中的this不再指向组件实例了,而是指向undifined
reactive()
作用:接受对象类型数据的参数传入并且返回一个响应式对象
使用方法:
1.从vue包中导入reactive函数
2.在<script setup>中执行reactive函数并且传入类型为对象的参数,并使用变量接受响应式对象返回值
响应式对象可以影响视图的更新,如下案例所示:
但是reactive只能接受对象类型参数,不支持简单类型参数,针对于此推出了ref()
ref()
作用:接受简单类型或者对象类型的数据并且返回一个响应式对象
语法:const XXX = ref(initValue)
- 创建一个包含响应式数据的引用对象
- JS中操作数据: xxx.value
- 模版中读取数据:不需要.value,直接:<div>{{xxx}}</div>
使用方法:
1.从vue包中导入ref函数
2.在<script setup>中执行ref函数并且传入初值,并使用变量接受响应式对象返回值
如下是一个ref使用案例:
reactive VS ref?
1.reactive不能处理简单类型的数据
2.ref参数类型支持更好但是必须通过.value访问修改
3.ref函数的内部实现依赖于reactive函数
computed计算属性函数
使用方式:
1.导入computed函数
2.执行函数在回调参数中return基于响应式数据做计算的值,用变量接收
如下是一个案例:
注意:计算属性应该是只读的
watch函数
作用:侦听一个或者多个数据的变化,数据变化的时候立刻执行回调函数
两个额外参数:1.immediate(立即执行) 2.deep(深度侦听)
使用方法:
- 侦听单个数据
- 1.导入watch函数
- 2.执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
- 注意:watch第一个参数是不需要使用ref.value的,会自动处理
- 同时监听多个响应式数据的变化,不管哪个数据变化都需要执行回调
-
- immedite
- 说明:在侦听器创建的时候立即执行回调,响应式数据变化后继续执行回调
- deep
- 默认使用watch监听的ref对象是浅层监听的,直接修改嵌套的对象是不会触发回调执行的,需要开启deep(depp一旦开启会执行递归调用,所以一般不建议开启,建议使用精确监听)
- 精确监听对象的某个属性
- 那么怎么在不开启deep的情况下侦听对象的某个属性,可以把第一个参数也替换成回调函数,返回需要侦听的属性就行
周期函数
基本使用:
1.导入
2.执行函数,传入参数
注意:如果是多次调用,那么会在时机成熟的时候依次执行
组合式API下的组件数据向下传递
基本思想
1.父组件中给子组件绑定属性
2.子组件通过props选项接受
在Vue3中局部组件不需要注册就可以直接使用了
组合式API下的组件数据向上传递
基本思想
1.父组件中给子组件标签通过@绑定事件
2.子组件中通过$emit方法触发事件
模板引用
在vue2中通过ref标识获取真实的dom对象或者组件实例对象
vue3中使用方法
1.调用ref函数生成一个ref对象
2.通过ref表示绑定ref对象到标签,然后dom对象就会保存到ref对象.value中
defineExpose
默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,可以通过defineExpose编译宏指定哪些属性和方法允许访问
provide和inject
作用场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信
使用方法:
1.在顶层组件使用provice函数提供数据
2.在底层组件使用inject函数获取数据
如下是一个小案例:
还可以传递方法: