Vue3
文章平均质量分 62
YDKD
越努力,越幸运
展开
-
超详细的一次输入URL到页面显示的总结
浏览器解读资源前言其实这个话题也是前端面试中另外的一个面试点,即从浏览器输入URL到页面加载完成的过程分析。在开始下面的正式总结之前,先列出几点我对这此新的认知点。服务器会存储许多的静态资源,再拿到服务器的IP地址之后,会返回index.html文件,其实了解前端工程化打包的都知道,一个项目在经过webpack打包之后,生成的dist文件夹下的资源入口就是index.html,在浏览器拿到这个html文件之后,会进行解析。遇到被link的css文件之后会到服务器下载对应的css文件;遇到script原创 2021-11-15 15:21:05 · 723 阅读 · 0 评论 -
Vue3的setup语法糖中使用mapState
Vue3的setup函数中如何使用mapState返回多个对象?在Vue的组件中,要想使用Vuex中的多个State,我们经过会借助mapState辅助函数进行获取值,但是在Vue3中,通过computed的来获取多个值的方法官方并未提供,话不多说,直接上代码。useMapState.jsimport { computed } from "vue";import { mapState, useStore } from "vuex"export const useMapState = (get原创 2021-12-22 17:45:40 · 3027 阅读 · 0 评论 -
Vue3动画及源码剖析
Vue3动画及源码剖析1、Vue如何实现动画在Vue中主要是通过Vue提供的内置组件<transition></transition>组件来显示动画。2、使用1.包裹单个元素或者组件<template> <div> <button @click="isShow = !isShow">toggle</button> <transition name="ydkd"> <原创 2021-11-12 21:55:51 · 1050 阅读 · 0 评论 -
vue3中的$refs的使用
Vue3中$refs的使用一、简介有时候想访问$refs绑定的组件的属性或者方法,我们会使用$refs。但是Vue3不同于Vue2,在 Vue3的setup中我们是无法访问到this的,所以我们需要借助一个方法,那就是getCurrentInstance,该方法返回了当前的实力对象。但是要注意一下几点。不要把该函数当作是optionsApi中来获取 this 使用。该方法只在 setup、生命周期函数中有效,在方法中是无效的二、使用<!-- 父组件 --><templat原创 2021-11-07 16:08:38 · 37768 阅读 · 10 评论