devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE3 Composition API详解

作者：花生_TL007 | 2024-03-05 12:04:00

赞

踩

vue3 composition api

LifeCycle Hooks

在新版的生命周期函数，可以按需导入到组件中，且只能在setup()函数中使用.

 
  1. import { onMounted, onUnmounted } from 'vue';
  2. export default {
  3.     setup () {
  4.         onMounted(()=>{
  5.            //
  6.         });
  7.  
  8.         onUnmounted(()=> {
  9.             //
  10.         });
  11.     }
  12. };

生命周期2.x与Composition之间的映射关系

  • beforeCreate -> use setup()
  • created -> use setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

setup

理解

setup()函数是vue3中专门新增的方法，可以理解为Composition Api的入口.

执行时机

在beforecreate之后，create之前执行.

接收props数据

  1. export default {
  2.   props: {
  3.     msg: {
  4.       type: String,
  5.       default: () => {}
  6.     }
  7.   },
  8.   setup(props) {
  9.   	console.log(props);
  10.   }
  11. }

context:

setup()的第二个参数是一个上下文对象，这个上下文对象大致包含了这些属性,注意：在setup()函数中无法访问this

  1. const MyComponent = {
  2.   setup(props, context) {
  3.     context.attrs
  4.     context.slots
  5.     context.parent
  6.     context.root
  7.     context.emit
  8.     context.refs
  9.   }
  10. }

reactive

reactive是用来创建一个响应式对象，等价于2.x的Vue.observable，具体可以参考下面demo。

  1. <template>
  2.     <div>
  3.         <p @click="incment()">
  4.             click Me!
  5.         </p>
  6.         <p>
  7.             一:{{ state.count }} 二: {{ state.addCount }}
  8.         </p>
  9.     </div>
  10. </template>
  11.  
  12. <script>
  13. import { reactive } from 'vue';
  14. export default {
  15.     setup () {
  16.         const state = reactive({//创建响应式数据
  17.             count: 0,
  18.             addCount: 0
  19.         });
  20.  
  21.         function incment () {
  22.             state.count++;
  23.             state.addCount = state.count * 2;
  24.         }
  25. 				
  26.         return {
  27.             state,
  28.             incment
  29.         };
  30.     }
  31. };
  32. </script>

ref

基本语法

ref()函数用来给定的值创建一个响应式的数据对象,ref()的返回值是一个对象,这个对象上只包含一个.value属性.下面是基本数据类型创建步骤.

  1. import { ref, defineComponent } from 'vue';
  2. export default defineComponent ({
  3.     setup () {
  4.         const valueNumber = ref(0);
  5.         const valueString = ref('hello world!');
  6.         const valueBoolean = ref(true);
  7.         const valueNull = ref(null);
  8.         const valueUndefined = ref(undefined);
  9.  
  10.         return {
  11.             valueNumber,
  12.             valueString,
  13.             valueBoolean,
  14.             valueNull,
  15.             valueUndefined
  16.         };
  17.     }
  18. });

在template中访问ref创建的响应式数据

  1. import { ref } from 'vue';
  2. export default {
  3.     setup () {
  4.         const value = ref(1);
  5.  
  6.         return {
  7.            value,
  8.            msg: 'hello world!'
  9.         };
  10.     }
  11. };
  1. <template>
  2.     <p>
  3.         {{ value }} {{ msg }}
  4.     </p>
  5. </template>

将ref响应式数据挂载到reactive中

当把ref()创建出来值直接挂载到reactive()中时,会自动把响应式数据对象的展开为原始的值,不需要通过.value就可以直接访问到.

  1. import { ref, reactive } from 'vue';
  2. export default {
  3.     setup () {
  4.         const count = ref(1);
  5.         const state = reactive({
  6.             count
  7.         });
  8. 				
  9.         console.log(state.count);//1 可以直接访问到，不需要通过.value就可以直接访问到
  10.         state.count++;
  11.         console.log(count.value);//2 我们发现，最初count值也发生了改变
  12.  
  13.         return {
  14.            count
  15.         };
  16.     }
  17. };

新的ref会覆盖旧的ref，实例如下：

  1. import { ref, reactive } from 'vue';
  2. export default {
  3.     setup () {
  4.         const count = ref(1);
  5.         const state = reactive({
  6.             count
  7.         });
  8.         const newCount = ref(9);
  9.  
  10.         state.count = newCount;
  11.         state.count++;
  12.  
  13.         console.log(state.count, newCount, count);// 10  10  1
  14.  
  15.         return {
  16.            count
  17.         };
  18.     }
  19. };

我们发现，这次的count值却没有发生改变，还是原始值1，是因为新创建的newCount替换并覆盖了之前的count值，取代了它的位置.

isRef

用来判断某个值是否为ref创建出来的对象，场景：当需要展开某个值可能是ref()创建出来的对象时.

  1. import { ref, isRef } from 'vue';
  2. export default {
  3.     setup () {
  4.         const count = ref(1);
  5.         const unwrappend = isRef(count) ? count.value : count;
  6.  
  7.         return {
  8.            count,
  9.            unwrappend
  10.         };
  11.     }
  12. };

toRefs

torefs()函数可以将reactive()创建出来的响应式对象转换为普通的对象，只不过这个对象上的每个属性节点都是ref()类型的响应式数据

  1. <template>
  2.     <p>
  3.   			<!-- 可以不通过state.value去获取每个属性 -->
  4.         {{ count }} {{ value }}
  5.     </p>
  6. </template>
  7.  
  8. <script>
  9. import { ref, reactive, toRefs } from 'vue';
  10. export default {
  11.     setup () {
  12.         const state = reactive({
  13.             count: 0,
  14.             value: 'hello',
  15.         })
  16.  
  17.         return {
  18.            ...toRefs(state)
  19.         };
  20.     }
  21. };
  22. </script>

toRef

概念：为源响应式对象上的某个属性创建一个ref对象，二者内部操作的是同一个数据值,更新时二者是同步的。相当于浅拷贝一个属性.

区别ref: 拷贝的是一份新的数据单独操作，更新时相互不影响，相当于深拷贝。

场景：当要将某个prop的ref传递给某个复合函数时，toRef很有用.

  1. import { reactive, ref, toRef } from 'vue'
  2.  
  3. export default {
  4.     setup () {
  5.         const m1 = reactive({
  6.             a: 1,
  7.             b: 2
  8.         })
  9.  
  10.         const m2 = toRef(m1, 'a');
  11.         const m3 = ref(m1.a);
  12.  
  13.         const update = () => {
  14.           	// m1.a++;//m1改变时，m2也会改变
  15.             // m2.value++; //m2改变时m1同时改变
  16.             m3.value++; //m3改变的同时，m1不会改变
  17.         }
  18.  
  19.         return {
  20.             m1,
  21.             m2,
  22.             m3,
  23.             update
  24.         }
  25.     }
  26. }

computed

computed()用来创建计算属性,返回值是一个ref的实例。

创建只读的计算属性

  1. import { ref, computed } from 'vue';
  2. export default {
  3.     setup () {
  4.         const count = ref(0);
  5.         const double = computed(()=> count.value + 1);//1
  6.  
  7.         double++;//Error: "double" is read-only
  8.  
  9.         return {
  10.            count,
  11.            double
  12.         };
  13.     }
  14. };

创建可读可写的计算属性

在使用computed函数期间，传入一个包含get和set函数的对象，可以额得到一个可读可写的计算属性

  1. // 创建一个 ref 响应式数据
  2. const count = ref(1)
  3.  
  4. // 创建一个 computed 计算属性
  5. const plusOne = computed({
  6.   // 取值函数
  7.   get: () => count.value + 1,
  8.   // 赋值函数
  9.   set: val => {
  10.     count.value = val - 1
  11.   }
  12. })
  13.  
  14. // 为计算属性赋值的操作，会触发 set 函数
  15. plusOne.value = 9
  16. // 触发 set 函数后，count 的值会被更新
  17. console.log(count.value) // 输出 8

watch

watch()函数用来监视某些数据项的变化，从而触发某些特定的操作，看下面这个案例，会实时监听count值的变化. 查看官方文档API

  1. import { ref, watch } from 'vue';
  2. export default {
  3.     setup () {
  4.         const count = ref(1);
  5.  
  6.         watch(()=>{
  7.             console.log(count.value, 'value');
  8.         })
  9.  
  10.         setInterval(()=>{
  11.             count.value++;
  12.         },1000);
  13.         return {
  14.            count,
  15.         };
  16.     }
  17. };

监听指定的数据源

监听reactive的数据变化

  1. import { watch, reactive } from 'vue';
  2. export default {
  3.     setup () {
  4.         const state = reactive({
  5.             count: 0
  6.         })
  7.  
  8.         watch(()=>state.count,(count, prevCount)=>{
  9.             console.log(count, prevCount);//变化后的值 变化前的值
  10.         })
  11.  
  12.         setInterval(()=>{
  13.             state.count++;
  14.         },1000);
  15.  
  16.         return {
  17.            state
  18.         };
  19.     }
  20. };

监听ref类型的数据变化

  1. import { ref, watch } from 'vue';
  2. export default {
  3.     setup () {
  4.        const count = ref(0);
  5.  
  6.         watch(count,(count, prevCount)=>{
  7.             console.log(count, prevCount);//变化后的值 变化前的值
  8.         })
  9.  
  10.         setInterval(()=>{
  11.             count.value++;
  12.         },1000);
  13.  
  14.         return {
  15.            count
  16.         };
  17.     }
  18. };

监听多个指定数据变化

监听reactive类型数据变化

  1. import { watch, reactive } from 'vue';
  2. export default {
  3.     setup () {
  4.         const state = reactive({
  5.             count: 0,
  6.             msg: 'hello'
  7.         })
  8.  
  9.         watch([()=> state.count, ()=> state.msg],([count, msg], [prevCount, prevMsg])=>{
  10.             console.log(count, msg);
  11.             console.log('---------------------');
  12.             console.log(prevCount, prevMsg);
  13.         })
  14.  
  15.         setTimeout(()=>{
  16.             state.count++;
  17.             state.msg = 'hello world';
  18.         },1000);
  19.  
  20.         return {
  21.            state
  22.         };
  23.     }
  24. };

监听ref类型数据变化

  1. import { ref, watch } from 'vue';
  2. export default {
  3.     setup () {
  4.        const count = ref(0);
  5.        const msg = ref('hello');
  6.  
  7.         watch([count, msg],([count, name], [prevCount, prevname])=>{
  8.             console.log(count, name);
  9.             console.log('---------------------');
  10.             console.log(prevCount, prevname);
  11.         })
  12.  
  13.         setTimeout(()=>{
  14.             count.value++;
  15.             msg.value = 'hello world';
  16.         },1000);
  17.  
  18.         return {
  19.            count,
  20.            msg
  21.         };
  22.     }
  23. };

清除监视

在setup()函数内创建的watch监视，会在当前组件被销毁的时候自动停止。如果想要明确的停止某个监视，可以调用watch()函数的返回值即可

  1. // 创建监视，并得到 停止函数
  2. const stop = watch(() => {
  3.   /* ... */
  4. })
  5.  
  6. // 调用停止函数，清除对应的监视
  7. stop()

清除无效的异步任务

有时候watch()监视的值发生了变化，我们期望清除无效的异步任务，此时watch回调函数中提供了cleanup registrator function来执行清除工作

  • 场景
  • watch被重复执行了
  • watch被强制stop()
  1. <template>
  2.     <p>
  3.         <input type="text" v-model="keyword">
  4.     </p>
  5. </template>
  6.  
  7. <script>
  8. import { watch, ref } from 'vue';
  9. export default {
  10.     setup () {
  11.         const keyword = ref('');
  12.  
  13.         const asyncPrint = val => {
  14.             return setTimeout(()=>{
  15.                 console.log(val);
  16.             },1000);
  17.         }
  18.  
  19.         watch(keyword, (keyword, prevKeyword, onCleanup) => {
  20.             const timeId = asyncPrint(keyword);
  21.  
  22.             onCleanup(()=> clearTimeout(timeId));
  23.         }, {lazy: true})
  24.  
  25.         return {
  26.            keyword
  27.         };
  28.     }
  29. };
  30. </script>

watchEffect

vue3中新增的api，用于属性监听.

与watch有什么不同？

  • watchEffect不需要指定监听属性，可以自动收集依赖，只要我们回调中引用了响应式的属性，那么这些属性变更的时候，这个回调都会执行，而watch只能监听指定的属性而做出变更（v3中可以同时监听多个）
  • watch可以获取到新值和旧值，而watchEffect获取不到
  • watchEffect会在组件初始化的时候就会执行一次与computed同理，而收集到的依赖变化后，这个回调才会执行，而watch不需要，除非设置了指定参数。

基础用法

  1. import { watchEffect, ref } from 'vue'
  2. setup () {
  3.     const userID = ref(0)
  4.     watchEffect(() => console.log(userID))
  5.     setTimeout(() => {
  6.       userID.value = 1
  7.     }, 1000)
  8.  
  9.     /*
  10.       * LOG
  11.       * 0 
  12.       * 1
  13.     */
  14.  
  15.     return {
  16.       userID
  17.     }
  18.  }

停止监听

如果watchEffect是在setup或者生命周期里面注册的话，在取消挂在的时候会自动停止。

  1. //停止监听
  2.  
  3. const stop = watchEffect(() => {
  4.   /* ... */
  5. })
  6.  
  7. // later
  8. stop()

使 side effect 无效

什么是 side effect ,不可预知的接口请求就是一个 side effect，假设我们现在用一个用户ID去查询用户的详情信息，然后我们监听了这个用户ID， 当用户ID 改变的时候我们就会去发起一次请求，这很简单，用watch 就可以做到。 但是如果在请求数据的过程中，我们的用户ID发生了多次变化，那么我们就会发起多次请求，而最后一次返回的数据将会覆盖掉我们之前返回的所有用户详情。这不仅会导致资源浪费，还无法保证 watch 回调执行的顺序。而使用watchEffect我们就可以做到.

onInvalidate(fn)传入的回调会在watchEffect重新运行或者watchEffect停止的时候执行。

  1. watchEffect(() => {
  2.       // 异步api调用，返回一个操作对象
  3.       const apiCall = someAsyncMethod(props.userID)
  4.  
  5.       onInvalidate(() => {
  6.         // 取消异步api的调用。
  7.         apiCall.cancel()
  8.       })
  9. })

shallowReactive

概念：只处理对象最外层属性的响应式(也就是浅响应式)，所以最外层属性发生改变，更新视图，其他层属性改变，视图不会更新.

场景：如果一个对象的数据结构比较深,但变化只是最外层属性.

  1. import { shallowReactive } from 'vue'
  2.  
  3. export default {
  4.     setup() {
  5.         const obj = {
  6.             a: 1,
  7.             first: {
  8.                 b: 2,
  9.                 second: {
  10.                     c: 3
  11.                 }
  12.             }
  13.         }
  14.  
  15.         const state = shallowReactive(obj)
  16.  
  17.         function change1() {
  18.             state.a = 7
  19.         }
  20.  
  21.         function change2() {
  22.             state.first.b = 8
  23.             state.first.second.c = 9
  24.             console.log(state);
  25.         }
  26.  
  27.         return { state }
  28.     }
  29. }

shallowRef

概念：只处理了value的响应式,不进行对象的reactive处理.

场景：如果有一个对象数据，后面会产生新的对象替换.

  1. import { shallowRef } from 'vue'
  2.  
  3. export default {
  4.     setup () {
  5.         const m1 = shallowRef({a: 1, b: {c: 2}})
  6.  
  7.         const update = () => {
  8.             m1.value.a += 1
  9.         }
  10.  
  11.         return {
  12.             m1,
  13.             update
  14.         }
  15.     }
  16. }

customRef

创建一个自定义的ref,并对其依赖跟踪和更新触发进行显式控制.

场景：使用customRef实现输入框防抖

  1. <template>
  2.     <div>
  3.         <input v-model="keyword" placeholder="搜索关键字"/>
  4.         <p>{{keyword}}</p>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. import { customRef } from 'vue'
  10.  
  11. export default {
  12.     setup () {
  13.         const keyword = useDebouncedRef('', 500)
  14.         console.log(keyword)
  15.  
  16.         return {
  17.             keyword
  18.         }
  19.     }
  20.  
  21. }
  22. function useDebouncedRef(value, delay = 200) {
  23.     let timeout;
  24.     return customRef((track, trigger) => {
  25.         return {
  26.             get() {
  27.                 // 告诉Vue追踪数据
  28.                 track()
  29.                 return value
  30.             },
  31.             set(newValue) {
  32.                 clearTimeout(timeout)
  33.                 timeout = setTimeout(() => {
  34.                     value = newValue
  35.                     // 告诉Vue去触发界面更新
  36.                     trigger()
  37.                 }, delay)
  38.             }
  39.         }
  40.     })
  41. }
  42. </script>

自定义Hook函数

自定义hook的作用类型于vue2中的mixin技术。

优势：清楚知道代码来源,方便复用

案例：收集用户点击的页面坐标

hook/useMousePosition.js

  1. import { ref, onMounted, onUnmounted } from "vue";
  2.  
  3. export default function useMousePosition() {
  4.     // 初始化坐标数据
  5.     const x = ref(-1);
  6.     const y = ref(-1);
  7.  
  8.     // 用于收集点击事件坐标的函数
  9.     const updatePosition = e => {
  10.         x.value = e.pageX;
  11.         y.value = e.pageY;
  12.     };
  13.  
  14.     // 挂载后绑定点击监听
  15.     onMounted(() => {
  16.         document.addEventListener("click", updatePosition);
  17.     });
  18.  
  19.     // 卸载前解绑点击监听
  20.     onUnmounted(() => {
  21.         document.removeEventListener("click", updatePosition);
  22.     });
  23.  
  24.     return { x, y };
  25. }

模版中使用hook函数

  1. <template>
  2.     <div>
  3.         <p>{{ x }}</p>
  4.         <p>{{ y }}</p>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. import useMousePosition from '@/hook/useMousePosition'
  10. export default {
  11.     setup () {
  12.         const {x, y} = useMousePosition();
  13.         return {
  14.             x,
  15.             y
  16.         }
  17.     }
  18. }
  19. </script>

readonly与shallowReadonly

  • readonly:
  • 深度只读数据
  • 获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。
  • 只读代理是深层的：访问的任何嵌套 property 也是只读的。
  • shallowReadonly
  • 浅只读数据
  • 创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换
  • 应用场景:
  • 在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除

  1. <template>
  2.     <div @click="update()">
  3.         <p>{{ a }}</p>
  4.         <p>{{ b }}</p>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. import { reactive, readonly, shallowReadonly } from 'vue'
  10. export default {
  11.     setup () {
  12.         const state = reactive({
  13.             a: 1,
  14.             b: {
  15.                 c: 2
  16.             }
  17.         })
  18.  
  19.         const m = readonly(state);
  20.         const m2 = shallowReadonly(state);
  21.  
  22.         const update = () => {
  23.             m.a++ //无法修改 只读
  24.           	m2.a++ //无法修改
  25.             m2.b.c++ //可以修改 视图层数据改变
  26.         }
  27.  
  28.         return {
  29.             ...toRefs(state),
  30.             update
  31.         }
  32.     }
  33.  
  34. }
  35. </script>

Template refs

通过ref()还可以引用页面上的元素或者组件.

元素引用

使用ref()函数创建DOM引用,需在onMounted中获取.

  1. <template>
  2.     <div>
  3.         <p ref="dom">hello</p>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. import { ref, onMounted } from 'vue';
  9. export default {
  10.     setup () {
  11.         const dom = ref(null);
  12.  
  13.         onMounted(()=> {
  14.             console.log(dom.value)//当前dom元素
  15.         });
  16.  
  17.         return {
  18.             dom
  19.         }
  20.     }
  21. };
  22. </script>

组件引用

  1. <template>
  2.     <div>
  3.         <Test ref="comRef"/>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. import { ref, onMounted } from 'vue';
  9. import Test from "./test2";
  10. export default {
  11.     components: { Test },
  12.     setup () {
  13.         const comRef = ref(null);
  14.  
  15.         onMounted(()=> {
  16.             comRef.value.coun;//获取子组件值
  17.             comRef.value.Handle();//调用子组件函数
  18.         })
  19.  
  20.         return {
  21.             comRef
  22.         }
  23.     }
  24. };
  25. </script>

  • test2
  1. <template>
  2.     <p>
  3.         {{ count }}
  4.     </p>
  5. </template>
  6.  
  7. <script>
  8. import { ref } from 'vue';
  9. export default {
  10.     setup () {
  11.         const count = ref('count');
  12.  
  13.         const Handle = (()=> {
  14.             console.log('hello');
  15.         })
  16.  
  17.         return {
  18.             count,
  19.             Handle
  20.         }
  21.     }
  22. };
  23. </script>

createComponent

这个函数不是必须的，除非你想完美结合TypeScript提供的类型推断来进行项目开发

场景：这个函数仅仅提供了类型推断，能为setup()函数中的props提供完整的类型推断.

  1. import { createComponent } from 'vue'
  2.  
  3. export default createComponent({
  4.   props: {
  5.     foo: String
  6.   },
  7.   setup(props) {
  8.     props.foo // <- type: string
  9.   }
  10. })

getCurrentInstance

描述：可以获取当前组件的实例,然后通过ctx属性获取当前上下文，这样我们就可以在steup中使用router和vuex了.

  1. <script>
  2. import { getCurrentInstance } from 'vue'
  3. export default {
  4.   setup () {
  5.     const { ctx } = getCurrentInstance()
  6.     console.log(ctx.$router.currentRoute.value)  //当前路径
  7.     //与以前this获取原型上东西一样
  8.     //ctx.$parent  父组件
  9.     // ctx.$nextTick  组件更新完毕  
  10.    // ctx.$store  VueX
  11.   }
  12. }
  13. </script>

Teleport

描述：传送门组件提供一种简洁的方式可以指定它里面内容的父元素，允许我们控制`Teleport`的嵌套的内容在DOM中哪个父节点下呈现HTML,而不必求助于全局状态或者拆分为两个组件.

  • to String 必传属性
  • to="#last"
  • to=".last"
  • to="[data-teleport]"
  • disabled Boolean 可选属性
  • 用于禁用teleport的功能，意味着插槽的内容将不会移动到任何位置,而在父组件指定的位置渲染.
  1. <template>
  2.   <div>
  3.     <button @click="modelOpen = true">点击打开弹窗	</button>
  4.     <teleport to="body">
  5.       <div v-if="modelOpen" class="model">
  6.         <div class="model-body">
  7.           这是一个模态框
  8.           <button @click="modelOpen = false">关闭弹窗</button>
  9.         </div>
  10.       </div>
  11.     </teleport>
  12.   </div>
  13. </template>
  14.  
  15.  
  16. <script>
  17.   import { defineComponent, ref } from "vue";
  18.  
  19.   export default defineComponent({
  20.     name: 'ModelButton',
  21.     setup() {
  22.       const modelOpen = ref(false);
  23.       return {
  24.         modelOpen
  25.       }
  26.     }
  27.   })
  28. </script>
  29.  
  30. <style scoped>
  31.   .model {
  32.     position: absolute;
  33.     left: 0;
  34.     top: 0;
  35.     right: 0;
  36.     bottom: 0;
  37.     background: rgba(0, 0, 0, .3);
  38.     display: flex;
  39.     align-items: center;
  40.     justify-content: center;
  41.   }
  42.  
  43.   .model-body {
  44.     width: 300px;
  45.     height: 250px;
  46.     background: #fff;
  47.   }
  48. </style>

使用`Teleport`组件，通过props `to`属性指定该组件的渲染位置在body下，但该组件的状态`modelOpen`则是由vue内部组件控制.

Fragments

描述：Fragments作为vue3的新特性之一，允许一个组件可以有多个根节点。

  1. <template>
  2.   <header>...</header>
  3. 	<main v-bind="$attrs">...</main>
  4. 	<footer>...</footer>
  5. </template>
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号