VUE之组合式API

目录

组合式API

前言

组合式API的简单使用

ref和reactive

toRefs

watch与watchEffect响应式更改

在setup中使用计算属性

在setup中使用生命周期函数

setup中的参数

props

父组件向子组件传值

子组件从父组件接收值

context

获取父组件内子组件的属性

触发事件

暴露公共属性

返回页面的渲染函数

在setup中使用provide-inject

父组件向子组件发送值

子组件接收父组件值

组合式API语法糖

基本语法

基本使用

组合式API

前言

含义:在使用vue的7大属性来组织逻辑时都很有效,但是当我们的组件开始变大的时候,逻辑关注点的列表也会不断增长,因此对于同一个业务逻辑可能造成东一块西一块,这样项目便不容易维护,组合式API的出现就是为了解决这种问题,它可以把相关业务逻辑组合在一起,最终项目易于维护

组合式API的入口:vue的新属性setup

setup函数执行时机:其会在组件被创建之前执行——经验证setup函数会在beforeCreated函数之前执行

注意:在setup函数中应尽量避免使用this,因为他不会找到组件实例,setup的调用发生在data、methods等被解析之前,所以他们无法在setup中获取

组合式API的简单使用


ref和reactive

ref:定义基本数据类型

reactive:定义引用数据类型

目的:实现响应式

使用前提:import {ref,reactive} from 'vue'


注意:暴露的对象尽量不要用展开运算符进行解构,因为它会使对象中的属性不是响应式的

toRefs

toRefs作用:让结构赋值后的数据重新获得响应式

使用前提:import {reactive,toRefs} from 'vue'


watch与watchEffect响应式更改

使用前提:import {ref,reactive,watch,watchEffect} from 'vue'


注意:watchEffect不需要指定监听的属性,其会自动收集依赖,只要在回调中引入响应式的属性,只要这些属性发生改变,那么就会执行该函数;而watch就只能够监听指定的属性

在setup中使用计算属性

使用前提:import {ref,computed} from 'vue'


在setup中使用生命周期函数

前言:可以通过生命周期钩子函数前面加"on" 来访问组件的生命周期钩子

VUE之组合式API_第1张图片

注意:因为setup是围绕beforeCreate和Created函数运行的,所以不需要显示的定义他们,换句话说,在这些钩子中编写的任何代码都应该直接在setup中编写

使用前提:import {onMounted} from "vue"(引入特定的生命周期钩子)


  

setup中的参数

注意:使用setup时他会接收两个参数(props,context)

props

父组件向子组件传值


子组件从父组件接收值


context

理解:context为一个普通的js对象,暴露了其他可能在setup中有用的值

获取父组件内子组件的属性



插槽:context.slot等价于slot

触发事件



暴露公共属性



返回页面的渲染函数

使用:在父组件内使用子组件second

子组件内

使用前提:import { h } from 'vue';


在setup中使用provide-inject

父组件向子组件发送值

使用前提:import { provide,ref } from "vue";

provide函数的两个参数:(发送属性的名称,发送属性的值)


子组件接收父组件值

inject函数的两个参数:(inject的属性名称,接收属性的默认值)其返回的值就为接收的值

使用前提:import { inject } from 'vue';


组合式API语法糖

基本语法

注意:这样写的代码会被编译成组件setup函数内的内容。这意味着与普通的script只在组件被首次引用的时候执行一次不同,

总结:

  • 引入组件不需要注册
  • 定义的变量可以直接在模板中使用,不需要导出
  • 定义响应式的变量还是要从vue中引入相关内容

不需要导出数据的原因:顶层的setup绑定会将数据暴露给模板 

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