Vue
文章平均质量分 56
Always--Learning
选择远远大于努力
展开
-
Vue中的v-if和v-for为什么不能一起用?
假如v-if和v-for一起使用会出现什么情况?<ul> <li v-for="(item,index) in arr " v-if="flag" :key="index" > {{item}} </li></ul>一起使用,会出现下面的错误提示:为什么不能一起使用?因为v-for的优先级比v-if的优先级高,所以如果嵌套使用的话,每次v-for都会执行一次v-if,造成重复计算的问题,会影响性能,所以vue官方不推荐这样原创 2022-04-10 16:38:10 · 2174 阅读 · 0 评论 -
这一次,彻底搞懂Vue中的keep-alive
keep-alive的使用场景及其特点用于Vue性能优化。缓存组件。频繁切换,不需要重复渲染。keep-alive有include和exclude属性,这两个属性决定了哪些组件可以进入缓存。keep-alive还有一个max属性,通过它可以设置最大缓存数,当缓存的实例超过max的时候,vue会删除最久没有使用的缓存,属于LRU缓存策略。keep-alive其内部所有嵌套的组件都具有两个生命周期钩子函数,分别是activated和deactivated,它们分别在组件激活和失活的时候触发。原创 2022-04-10 14:17:40 · 1745 阅读 · 0 评论 -
你了解Vue的动态加载组件和异步加载组件吗?
如何动态加载组件?引入可能被使用的组件import slotDemo from './components/slotDemo'import HelloWorld from './components/HelloWorld'通过动态属性is来读取组件名<component :is="comName"/>如何异步加载组件?通过import在注册组件的时候引入组件components: { FormDemo: () => import(`../xxxCo原创 2022-04-09 17:07:31 · 670 阅读 · 0 评论 -
Vue的作用域插槽slot有什么用?
一、基本使用由父组件向子组件中传递数据,子组件通过slot进行接收,不传递则显示的是默认的内容。父组件<template> <div id="app"> <slotDemo :url="website.url"> {{website.title}} </slotDemo> </div></template><script>import slotDemo from原创 2022-04-09 15:02:03 · 535 阅读 · 0 评论 -
浅析Vue中$nextTick的原理
一、$nextTick有什么用?Vue是异步渲染的框架。data改变之后,DOM不会立刻渲染。$nextTick会在DOM渲染之后被触发,以获取最新的DOM节点。连续多次的异步渲染,$nextTick只会执行最后一次渲染后的结果。二、$nextTick的原理$nextTick主要通过事件循环中的任务队列的方式异步执行传入的回调函数,首先会判断当前的执行环境是否支持Promise,MutationObserver,setImmediate,setTimeout。如果支持则创建对应的异步方法,原创 2022-04-09 10:51:05 · 3455 阅读 · 0 评论 -
你真的了解Vue的生命周期吗?
Vue生命周期的主要阶段创建前后beforeCreate:实例刚在内存中被创建出来,此时还没有初始化好data和methods属性。created:实例已经在内存中创建好,此时data和methods已经创建好,此时还没有开始编译模板。载入前后beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面上。mounted:此时已经编译好模板,并挂载到了页面指定的容器中。更新前后beforeUpdate:状态更新之前执行这个函数,此时data中的状态值是最新的,但是界面上显原创 2022-04-09 07:11:20 · 382 阅读 · 0 评论 -
Vue中的methods、watch、computed、filters到底有什么区别?
一、methodsmethods中存放的是事件的回调函数,具有以下几个特点:可以通过Vue实例访问方法,在方法中最好不要使用箭头函数,因为涉及到this指向的问题。重新渲染的时候,methods总会执行该函数。methods是函数调用,filters和computed、watch是属性调用。methods是不具有缓存性的。二、filtersfilters一般用于格式化输出的场景,比如日期格式化,filters过滤器可以进行串联调用,所以可以定义一些基础的filters,然后按需在组件原创 2022-04-07 16:34:45 · 961 阅读 · 0 评论 -
这一次,彻底搞懂Vue的组件通信
前言vue的组件通信无论是在工作中还是在面试中都是经常考到的知识,这一次让我们一起来系统的梳理下Vue的组件通信都有哪些方式吧~一、父组件向子组件进行传值核心:通过props就行传递。在父组件中引入子组件。通过在子组件的标签上进行传递。子组件中通过声明props进行接收。二、子组件向父组件传值核心:通过this.$emit('父组件中的函数名',传递参数)父组件给子组件绑定函数。子组件通过this.$emit出发父组件给子组件绑定的函数。三、子组件通过$parent来获取父原创 2022-03-30 10:32:08 · 384 阅读 · 0 评论 -
单页面应用的前端路由原理是什么?
前置知识在了解单页面应用的前端路由原理之前,我们先了解下什么事单页面应用,什么是多页面应用,他们之间的区别又是什么?什么是单页面应用?单页面应用指的是第一次进入页面的时候会请求一个html文件,切换到其他组件的时候,虽然路径会发生相应的变化,但是没有新的html文件请求,原理是JS会感知到url的变化,然后js会动态的将当前页面的内容清除掉,然后将下一个页面的内容挂载到当前的页面上,这个时候的路由不是由后端做的而是由前端来做的,来判断页面到底显示哪个组件,这个过程就是单页面的应用。单页面应用原创 2022-03-09 08:47:53 · 1405 阅读 · 0 评论 -
请这样回答双向数据绑定原理
前言双向数据绑定是Vue的重要原理,也是面试过程中几乎必问的一道题目,搞懂这个原理无论是对我们的技术提高还是对面试都是有百利而无一害的,下面就让我们一起来解决这个问题吧~双向数据绑定每一个模块都负责什么?new Vuenew Vue这个操作主要是调用了数据劫持Observe方法和模板编译的函数Compile。Observe函数Observer函数将递归遍历传入对象的所有property,并使用Object.defineProperty把这些property全部转化为getter/set原创 2022-03-08 20:24:50 · 250 阅读 · 0 评论 -
Vue和React的区别到底是什么?
一提到前端框架,相信大家都对Vue和React不陌生,这两个前端框架都是比较主流的,用户也都比较多,但是我们在使用这些框架的时候,是否对这两个框架之间的区别有所了解呢?接下来,让我们来一起的系统梳理这两个框架的区别是什么吧~预备知识介绍在了解Vue和React的区别之前,我们首先来了解一下MVC和MVVM架构,这个知识点有助于我们对后续知识的了解。MVC架构首先MVC指的是Model-View-Controller,分别代表着模型层、视图层、控制器。Model(模型层),主要管理的是.原创 2022-03-06 15:43:07 · 20906 阅读 · 0 评论 -
这一次,彻底搞懂双向数据绑定04
一、实现数据从data到view的单向数据绑定当data发生变化的时候首先触发数据劫持的setter函数 set(newVal) { value = newVal Observe(value) // 通知每个订阅者更新自己的文本 dep.notify() }setter函数先改变新的值,然后通知每一个订阅者。Dep类的notify函数通知每一个订阅者watcher notify() { this.subs.forEach(watcher原创 2022-02-19 08:20:33 · 199 阅读 · 0 评论 -
这一次,彻底搞懂双向数据绑定03
一、将this.$data上的属性代理到vm实例上所谓的将this.$data挂载到vm实例上,实际上就是说不需要通过vm.$data.属性来获取值,而是直接通过vm.属性获取值。方法:通过Object.defineProperty将this.$data身上的属性代理到this身上。class Vue { constructor(options) { this.$data = options.data; // 调用数据劫持的方法 Observe(this.$dat原创 2022-02-18 09:40:22 · 560 阅读 · 0 评论 -
这一次,彻底搞懂双向数据绑定02
实现Vue中的Getter在HTML文件中引入自己创建的vue.js.在vue.js中定义Vue类和构造函数.vue.js中定义一个数据劫持的方法使用Object.keys(obj).forEach获取对象所有的键。下面是html结构<body> <div id="app"> <h2>姓名:{{name}}</h2> <h2>年龄:{{age}}</h2> </div> &l原创 2022-02-16 15:05:41 · 359 阅读 · 0 评论 -
这一次,彻底搞懂双向数据绑定01
双向数据绑定所需前置知识1. 数组的reduce方法数组的reduce方法的使用场景一般是本次操作的初始值需要依赖上次操作的返回值,例如数值的累加,链式获取对象属性的值。reduce函数接收两个参数:函数(之前的累积值,当前遍历到的元素的值)初始值函数体中要返回之前的累积值和当前遍历的值的和const arr = [1,2,3,4];let res = arr.reduce((pre,cur) => { return pre + cur;},0)consol原创 2022-02-14 21:26:44 · 402 阅读 · 0 评论 -
Socket.io中的命名空间
什么是Socket.io中的命名空间?所谓的命名空间,在一个域中发消息,只有当前的域的socket能够收到消息,其他域的消息则不能。服务端:通过io.of创建命名空间。服务端进行广播的时候,也需要使用命名空间。客户端向服务端发起连接的时候也需要指定命名空间。egg.js中如何集成socket.io?参考文档:https://eggjs.org/zh-cn/tutorials/socketio.html安装egg-socket.ionpm i egg-socket.原创 2022-01-27 10:19:14 · 2745 阅读 · 0 评论 -
大白话带你理解Socket.io是如何同步数据的
需求分析有时候,我们想要在不同的客户端中对数据进行同步,以扫码点餐为例,一个餐桌上的二维码被多个用户扫描之后,我们希望所有客户端打开的页面中的数据是同步的,这个需求socket.io可以帮助我们实现。有哪些实现方法?方法1:不断轮询所谓的不断轮询,指的是在很短的时间内,不同的客户端都去向服务器请求数据,这样能够在很短的时间内刷新数据,但是这种方法会带来很严重的性能浪费,在网络环境不好的情况下,还会带来很大的延迟,因此,这种方法并不推荐。方法2:长连接浏览器和服务器首先进行握手,建立一个原创 2022-01-26 09:16:31 · 722 阅读 · 0 评论 -
nextTick的实际使用场景分析
需求分析有时候,我们需要页面的所有数据都渲染完成后在获取数据,通过传统的方法无法获取到渲染后的数据,举个例子,页面中通过v-for渲染的li有12个,但是,我们却在异步获取数据的函数中无法通过document.querySelector拿到所有的数据,此时就需要使用nextTick.案例分析例如下面这个页面,我们想要实现的是先渲染页面,然后获取li的数量。代码分析请注意,下面的代码要写在获取口味的异步函数完成之后。(这一点很重要,直接放在mounted函数之中是没有作用的。) t原创 2022-01-25 15:31:44 · 1822 阅读 · 0 评论 -
Vue+TS中全局绑定axios、storage、接口地址的方法
全局绑定axios(在TypeScript中)通过cnpm安装到项目中。cnpm i axios --save在main.ts中引入下面的接口和组件import Axios,{AxiosInstance} from 'axios'在main.ts中进行如下声明declare module '@vue/runtime-core' { interface ComponentCustomProperties { $axios: AxiosInstance }}原创 2022-01-23 17:26:13 · 2122 阅读 · 2 评论 -
Error on importing VueAnalytics to main.ts in Vue CLI (Vue3)
问题描述最近,在安装完vue-router之后,在写ts的时候,出现下面的错误,起初我以为是版本不兼容,在重装了多次版本后还是没有解决,最后通过直觉告诉我是删除node_modules然后使用cnpm进行安装,后来通过这个方法解决了。Error on importing VueAnalytics to main.ts in Vue CLI (Vue3)解决办法删除node_modules文件夹。使用cnpm进行安装。cnpm i...原创 2022-01-22 17:48:25 · 355 阅读 · 0 评论 -
Vue3中集成并使用TypeScript
一、安装创建vue项目vue create vue-test-demo进入项目cd vue-ts-demo新增typescriptvue add typescript跳过class语法二、如何让组件能够使用TS语法?script标签的lang属性设置为ts。<script lang="ts">从vue中导入defineComponentimport { defineComponent } from 'vue';组件对外暴露时需要通过d原创 2022-01-19 13:13:01 · 1626 阅读 · 1 评论 -
Vue与antd结合使用
什么是antd?antd是蚂蚁集团旗下开发的一款优秀的前端UI框架,目前这个框架支持Vue和React。这个框架主要用于开发企业级的后台产品,如果想开发移动端应用的话可以选择Ionic。选择合适的官方文档在antd vue官网上选择2.x的antd,因为这个版本对应的是vue3的。使用步骤在已有的antd项目中安装antd。npm i --save ant-design-vue@next在入口文件中引入antd以及antd.css,并挂载到vue身上。import Ant原创 2022-01-04 08:04:58 · 25237 阅读 · 0 评论 -
Vue3中使用mixin实现组件功能的复用
一、如何使用mixins?mixins主要是进行逻辑的复用,下面我们详细介绍下mixins的主要使用步骤。在script标签中定义好要用的mixins。const baseMixin = { data() { return { apiUrl: "http://xxxxxx" } }, methods: { success() { console.log("成功"); } }}引入mixins。export de原创 2021-12-25 09:49:58 · 2027 阅读 · 0 评论 -
Vue3中的Teleport有什么用?
一、Teleport有什么用?Vue3中的组件模板属于该组件,有时候我们想把模板的内容移动到当前组件之外的DOM中,这个时候就可以使用Teleport。二、如何使用?只需将组件包裹在teleport组件中,并指示移动到哪个DOM元素中即可。<template><teleport to="body"> <div class="modal-bg" v-if="visible"> <div class="modal-content原创 2021-12-25 09:49:20 · 754 阅读 · 0 评论 -
使用JS实现数组与树结构之间的互换
为什么要构造树结构?这个问题不仅仅是一道面试题,也是一种常见的场景,假如后端给我们传来的是一个数组,数组中给的数据,需要前端根据这个数据来构造一个导航栏,此时我们就需要构建一个树型结构,因此学会如何将数组构建成一颗树是很有必要的。后端传过来的数据长什么样?let data = [ { "id": "1", "name": "1", "fatherId": "0", }, { "id": "2", "name": "1-1", "fathe原创 2021-12-20 11:49:47 · 336 阅读 · 0 评论 -
从零开始掌握Vuex
什么是Vuex?Vuex是一个专门为Vue.js应用程序开发的状态管理模式,vuex可以实现vue不同组件之间的状态共享,可以实现组件里面数据的持久化。Vuex的几个核心概念StateGettersMutationsActionsModulesVuex的基本使用安装依赖npm install vuex@next --save在src目录下新建一个vuex文件夹,文件夹里新建store.jsimport { createStore } from 'vuex'con原创 2021-12-19 14:52:49 · 596 阅读 · 0 评论 -
一文带你学习:Vue生命周期、this.$nextTick、将Axios绑定到全局、输入防抖
生命周期图示触发顺序beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmountunmounted动态组件keep-alive当我们卸载组件后进行重新挂载的时候,如果想要保持组件的状态,避免反复重渲染带来的性能问题,这个时候可以使用keep-alive。使用方法我们只需通过keep-alive这个组件进行包裹目标组件即可。<keep-alive> <life-cycl原创 2021-12-19 08:57:51 · 864 阅读 · 2 评论 -
一篇文章总结Vue3中的路由与路由配置
路由的基本配置安装插件npm install vue-router@next --save创建一个routers.ts文件在routers.ts中引入组件并配置路径。import { createRouter,createWebHashHistory } from 'vue-router';// 引入组件import Home from './components/Home.vue';import News from './components/News.vue';imp原创 2021-12-13 16:27:22 · 1635 阅读 · 0 评论 -
Vue3中Composition API的核心用法
什么是Composition API?Composition API也叫组合式API,是Vue3.x中的新特性。通过创建Vue组件,我们可以将接口的可重复部分提取到可重用的代码段中,没有Composition API之前Vue相关业务的代码需要配置到option的特定区域,如果在大型项目中这种方式会导致后期的维护性比较复杂,同时代码可复用性不高,Vue3的Composition API就是解决这个问题的。在setup中使用ref和reactive定义响应式数据使用ref和reactive定义数据原创 2021-12-10 09:02:40 · 881 阅读 · 0 评论 -
(千字长文)Vue核心基础解析
theme: githubhighlight: night-owl什么是Vue?Vue是一个渐进式的框架,渐进式指的是可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验,比如一个项目是使用Jquery构建的,此时就可以通过Vue对部分网页进行重构,而不必重构全部的网页。通过Vue.js文件使用Vue<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .原创 2021-10-22 07:53:07 · 299 阅读 · 0 评论