商丘网站建设的公司哪家好,销售平台建设方案,自己能做企业网站吗,2018年的网站制作一、组合式API基础
1、简介
组合式 API (Composition API) 是Vue3和Vue2的v2.7之后版本中的全新特性#xff0c;是一系列API的的集合#xff08;响应式API、生命周期钩子、依赖注入等等#xff09;#xff0c;其风格是基于函数的组合#xff0c;以一种更直观、更灵活…一、组合式API基础
1、简介
组合式 API (Composition API) 是Vue3和Vue2的v2.7之后版本中的全新特性是一系列API的的集合响应式API、生命周期钩子、依赖注入等等其风格是基于函数的组合以一种更直观、更灵活的方式来书写Vue单文件组件。但是组合式 API并不属于函数式编程因为函数式编程主要强调的是数据不可变而以 Vue 中数据可变的、细粒度的响应性系统为基础的。
接下来我们讲述的相关知识点都是基于Vue3的组合式API来进行的。
2、优势
更好的复用性
组合式API最大的优势在于可以通过组合函数的方式将组件进行任意颗粒度的拆分和组合这样就大大提高了代码的可维护性和复用性。
更灵活的代码组织性
同时组合式API可以将处理某一逻辑的所有相关代码放置在相邻区域内解决了选项式API中将处理统一逻辑的代码分散在不同的选项中在查看时需要上下来回进行滚动切换的弊端方便后期将相关逻辑抽出封装为单独组件。官方示例图片如下相同颜色的代码块表示处理某一逻辑的相关代码 更好的TS支持
组合式API主要利用基本的变量和函数这些东西本身就是类型友好的因此组合式API对于TypeScript的支持性更好。
更小的打包体积
使用组合式APIscript setup的单文件组件中的组件模板template在打包时会被编译成一个内联函数与JS代码位于同一作用域内可以直接访问定义的变量和函数无需像选项式API一样依赖this这个上下文对象来访问属性。由于变量名可以被压缩但是对象的属性名不能被压缩所以组合式API对于代码压缩更友好打包后的体积也就更小。
3、使用方法
方法一使用setup() 钩子函数不常用
这种方法并不常用通常只用于以下两种情况① 在非单文件组件中使用组合式API时例如在html文件中引入Vue。② 在基于选项式API的单文件组件中集成使用组合式API时例如在Vue2中使用。
通过使用setup()函数来定义响应式数据然后将该函数返回的对象暴露给模板和组件实例然后就可以在选项式API中通过this来获取相关属性如果在模板中使用变量则无需使用this。但是在setup()函数中是无法访问组件实例的也就是this对象。
script
// 引入响应式API
import { ref } from vueexport default {// 使用setup()钩子函数setup() {// 声明响应式变量const count ref(0)// 返回值会暴露给模板和其他的选项式 API return {count}},mounted() {// 通过this来访问声明的响应式变量console.log(this.count) // 0}
}
/scripttemplate!-- 在模板中使用声明的变量 --button clickcount{{ count }}/button
/template setup()函数具有两个参数第一个参数为props用于获取组件实例中接受的props参数会根据props参数的变化响应式的变化第二个参数为context表示一个Setup上下文对象该对象暴露了一些常用的API对象
export default {// 组件接收父组件传递过来的props数据props: {title: String},// setup的第一个参数为props 第二个参数为contextsetup(props, context) {// 以props.xxx的形式方式访问数据 不要使用数据解构 这样会失去响应性console.log(props.title)// 透传 Attributes非响应式的对象等价于 $attrsconsole.log(context.attrs)// 插槽非响应式的对象等价于 $slotsconsole.log(context.slots)// 触发事件函数等价于 $emitconsole.log(context.emit)// 暴露公共属性函数console.log(context.expose)}
} 更多详细用法请查阅组合式 APIsetup()。
方法二使用script setup常用
该方法是我们在Vue3中的主流用法通过在单文件组件的script标签中增加setup标识该标签内部使用组合式API大大简化了setup()函数的繁琐语法。而且在script setup中的顶层非局部中导入的模块、声明的变量和函数可以在当前单文件组件中直接使用。
!-- 在script标签中增加setup --
script setup
// 引入要使用的API
import { ref, onMounted } from vue
// 声明变量
let count ref(0);
// 声明函数
const addCount () {// 在函数中修改变量 需要调用.valuecount.value;
}
// 在生命周期中使用声明的变量
onMounted(() {// 获取变量值需要调用.valueconsole.log(mounted---,count.value)
})
/scripttemplate!-- 在模板中使用声明的变量 无需使用.value --button clickaddCount{{ count }}/button
/template二、变量声明
1、ref推荐
在组合式API中推荐使用ref()函数来声明响应式变量该函数可以声明任何类型的值包括String、Number等简单类型也包括深层嵌套的对象、数组以及JS内置的Map、Set等内置数据结构。简单类型的变量可以ref()可以直接声明复杂类型的变量则会在内部直接调用 reactive()函数来实现。
想要使用 ref()函数需要先从vue对象中将该函数引入到当前组件中
// 引入ref()函数API
import { ref } from vue ref()函数接收一个参数这个参数为声明的响应式变量的初始值然后函数会返回一个带有.value属性的ref对象。我们需要使用let/const/var声明一个变量来接收ref()函数返回的响应式对象至此一个响应式变量就创建成功了。
// 通过ref()函数声明响应式变量
const count ref(0) 通过ref()函数声明的变量如果是在script setup的顶层非局部中声明的那可以在整个单文件组件中访问。在组件的script setup标签中修改或访问时需要通过变量名.value的形式访问但是在组件的template模板中使用变量包括{{ }}模板语法、事件监听器的表达式等等情况可以直接使用变量名此时响应式变量会自动解包获取其value属性。
script setup// 省略前面的引入和声明// 直接访问count 返回一个含有value属性的对象console.log(count) // { value: 0 }// 访问count.valueconsole.log(count.value) // 0// 修改变量值count.value// 再次访问变量console.log(count.value) // 1
/scripttemplate!-- 在模板中使用声明的变量 无需使用.value --button clickcount{{ count }}/button
/template 在组件的template模板中只有顶级的ref变量才会被自动解包如果是非顶级的ref变量则不会解包例如在一个对象中将属性值声明为ref变量
script setup// 省略前面的引入和声明// 顶级的ref变量 let obj3 ref({ count: 0 });// 非顶级的ref变量 let obj4 { count: ref(0) };
/script!-- 自动解包 显示0 --
p{{ obj3.count }}/p
!-- 此时 ref 是文本插值的最终计算值 会自动解包 因此显示0 --
p{{ obj4.count }}/p
!-- 自动解包 显示1 --
p{{ obj3.count 1 }}/p
!-- 此时 ref 不是文本插值的最终计算值 不自动解包 显示[object Object]1 --
p{{ obj4.count 1 }}/p2、reactive
reactive()函数是组合式API声明响应式变量的另外一种方式只能用来声明复杂类型的数据变量Object、Array、Map、Set等不能声明简单类型的数据变量。想要使用 reactive()函数需要先从vue对象中将该函数引入到当前组件中
// 引入reactive()函数API
import { reactive } from vue reactive()函数接收一个参数表示声明的响应式变量的初始对象值然后函数会返回一个原始数据对象的 Proxy对象该对象是响应式的。最终再使用let/const/var声明一个变量来接收reactive()函数返回的响应式对象至此一个响应式变量就创建成功了
// 通过reactive()函数声明响应式变量
const countObj reactive({ count: 0 }) 通过reactive()函数声明的变量如果是在script setup的顶层非局部中声明的那可以在整个单文件组件中访问。在组件的script setup标签中和在template模板中使用变量时直接使用变量名即可
script setup// 省略前面的引入和声明// 直接调用变量名 会返回一个代理对象console.log(countObj); // Proxy(Object) {count: 0}// 调用代理对象的属性console.log(countObj.count); // 0// 代理对象的属性值可以直接修改countObj.count;console.log(countObj.count); // 1
/scripttemplate!-- 在模板中使用声明的变量 无需使用.value --button clickstate.count{{ state.count }}/button
/template reactive() 返回的是原始对象的Proxy代理对象它和原始对象是不全等的只有Proxy对象是响应式的更改原始对象不会触发更新。而且为保证访问代理的一致性对同一个原始对象调用 reactive() 会总是返回同一个的Proxy对象而对一个已存在的Proxy对象调用 reactive() 会返回其本身。
// 创建一个原始对象
let obj { count: 0 };
// 使用reactive()创建一个响应式对象
let countObj reactive(obj);
// 代理对象和原始对象并不相等
console.log(obj countObj); // false
// 在同一个原始对象上重复调用reactive()会返回相同的代理
console.log(countObj reactive(obj)); // true
// 在代理对象上再次调用reactive()会返回其本身
console.log(countObj reactive(countObj)); // true 如果reactive()函数包裹的变量初始值为一个多层嵌套对象的数据reactive()会深层的转换代理对象无论嵌套多少层都会将每一层对象转换为代理对象最终返回的Proxy对象内部全部都是响应式的。
// 声明一个嵌套对象
let obj2 { test: { count: 0 } };
// 使用reactive()创建一个响应式对象
let countObj2 reactive(obj2); 对于一个通过reactive()创建的响应式对象如果我们使用对象解构将其简单类型的属性解构为一个变量时或者将简单类型的属性传递给函数作为参数时变量和参数都会失去响应性的效果 // 当解构时count 已经与 countObj.count 断开响应式连接let { count } countObj// 修改解构出的count的变量值 不会影响countObj的 countcountconsole.log(count) // 1console.log(countObj.count) // 0// 该函数接收到的是一个普通的数字 无法响应式的追踪到countObj.count的变化testFunction(countObj.count) {// ...}// 如果想要保持响应式的特性 则需要将整个响应式对象传入其中testFunction2(countObj) {// ...} 如果通过reactive()创建的响应式数组或原生集合类型(如 Map) 中使用ref()声明的变量作为元素其不会被自动解包需要通过.value的形式访问
// 响应式数组中使用ref()声明的变量作为元素
const books reactive([ref(Vue 3 Guide)])
// 这里需要 .value
console.log(books[0].value)
// 响应式集合中使用ref()声明的变量作为元素
const map reactive(new Map([[count, ref(0)]]))
// 这里需要 .value
console.log(map.get(count).value)3、shallowRef
shallowRef()函数是ref()函数的浅层作用形式函数接收一个参数这个参数为声明的响应式变量的初始值但是函数不会返回一个Proxy代理对象返回的是原始数据本身。此时只有对变量.value的访问是响应式的。如果想要转换为响应式的原始数据是复杂类型的数据变量则更改其内部的属性值并不会有响应式只有变更整个value的值才会触发响应式。
如果原始数据是具有多层嵌套的复杂数据类型也只有对.value的访问是响应式的。因此shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成避免对大型数据的响应性开销。
// 引入 shallowRef() API
import { ref, shallowRef } from vue// 声明一个js对象
const obj { num: 1 };
// 利用ref声明一个响应式变量
const state ref(obj)
// 利用shallowRef声明一个浅层响应式变量
const state2 shallowRef(obj)
// 输出两个变量
console.log(state.value); // 一个Proxy代理对象Proxy(Object) {num: 1}
console.log(state2.value); // 一个普通对象{num: 1}
// 判断响应式变量和原对象是否相等
console.log(state.value obj); // false
// 判断浅层响应式变量和原对象是否相等
console.log(state2.value obj); // true
// 判断浅层响应式变量和响应式变量是否相等
console.log(state2.value state.value); // false// 直接修改内部属性值不会触发响应式
state.value.count 2;// 直接修改value属性才会触发响应式
state.value { count: 3 }; shallowRef()函数返回的是原始数据本身如果我们在组件被挂载之前修改浅层响应式变量的内部属性值依旧会被响应式监听到。例如在script setup中声明浅层变量后直接修改其内部属性值或者在onBeforeMount()生命周期钩子函数中修改其内内部属性值。
script setup// 引入相关APIimport { onBeforeMount, onMounted, shallowRef } from vue// 声明一个js对象const obj { num: 1 };// 利用shallowRef声明一个浅层响应式变量const state2 shallowRef(obj);// 在组件挂载之前 修改变量的内部属性值 页面显示会更新onBeforeMount(() {state2.value.num 1111;});// 在组件挂载之后 修改变量的内部属性值 页面显示不会更新onMounted(() {console.log(state2.value); // {num: 1111}state2.value.num 2222;console.log(state2.value); // {num: 2222}})
/script!-- 最终渲染显示为1111 --
p{{ state2.num }}/p4、shallowReactive
shallowReactive()函数时reactive()函数的浅层作用形式通过该函数的声明的响应式对象变量只有根对象中的属性才是响应式的如果变量包含嵌套的对象结构则嵌套对象的属性值不会被转换成响应式只有整个替换属性值时才会触发响应式。
// 引入 shallowReactive API
import { shallowReactive } from vue// 声明一个原始对象
const obj { num: 1, next: { count: 1 } };
// 声明一个浅层响应式对象
const state shallowReactive(obj);
// 输出该对象
console.log(state); // Proxy(Object) {num: 1, next: {…}}// 直接修改根属性 可以触发响应式
state.num 2222;
// 直接修改嵌套属性 不会触发响应式
state.next.count 2222;
// 重新赋值嵌套属性 可以触发响应式
state.next { count: 3333 }; 如果我们在组件被挂载之前修改其嵌套对象的属性值依旧会被响应式监听到。例如在script setup中声明浅层对象变量后直接修改其嵌套对象的属性值或者在onBeforeMount()生命周期钩子函数中修改其嵌套对象的属性值。
script setup// 引入相关APIimport { onBeforeMount, onMounted, shallowRef } from vue// 声明一个原始对象const obj { num: 1, next: { count: 1 } };// 声明一个浅层响应式对象const state shallowReactive(obj);// 在组件挂载之前 修改变量的内部属性值 页面显示会更新onBeforeMount(() {state.next.count 2222;});// 在组件挂载之后 修改变量的内部属性值 页面显示不会更新onMounted(() {console.log(state.next.count); // {num: 2222}state.next.count 3333;console.log(state.next.count); // {num: 3333}})
/script!-- 最终渲染显示为2222 --
p{{ state.next.count}}/p
