muzidigbig的博客

一、什么是 vue 生命周期Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后；还有keep-alive 缓存特殊的两个阶段（activated(组件激活时)、deactivated(组件停用时)）；每次进入都会执行钩子中的函数。SSR有着更好的SEO、并且首屏加载速度更快等优点。

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 下面介绍三种 Vue.js 的安装方法： 1.独立版本 我们可以在Vue.js的官网上直接下载vueassets和static的区别pnpmnvm(管理Node版本)、nrm(管理镜像源) 详解Vue生命周期父子组件的执行顺序解决安装依赖包问题

Chrome(Google) 浏览器安装Vue2、Vue3 Devtools插件方法

NodeVersionManager（NVM）在处理多项目中不同Node.js版本需求的解决方案。pnpm 至少支持的node版本为： 18.12nrm 是一个 npm 源管理器，允许你快速地在 npm源间切换。

1、相同点都是语法糖，都可以实现父子组件中的数据的双向通信。2、区别点使用格式：传值方式：注意：v-model 只能有一个；.sync 可以有多个。此外，.sync是Vue 2中的指令，而在Vue 3中，v-model取代了.sync的位置，并且可以在一个组件中使用多次。修饰符.sync与v-model区别

一些组件需要通过接口请求数据来进行显示,请求数据会造成一定的等待时间，如果反复切换组件,那就需要反复进行数据请求,并且这部分数据返回时相同的；那么可以在组件第一次加载时,将组件对象缓存起来 当切换路由显示时,组件对象被缓存起来,不被销毁,以提升再次查看时的用户体验。如:Tab页制作的各种状态的订单列表切换当然,这取决于你的数据是否需要较高的实时性。从A页面跳转到B页面，缓存A组件，从A组件跳转到C组件，取消缓存，如何实现？this.$destroy()

/ 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.})new Vue({router,store,

Vue2自定义指令（directive）Vue3自定义指令（directive）

Observable翻译过来我们可以理解成Vue.js2.6新增，让一个对象变成响应式数据。Vue内部会用它来处理data函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器在Vue 2.x中，被传入的对象会直接被变更，它和被返回的对象是同一个对象在Vue 3.x中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。

在开发过程中,有时候会遇到这么一种情况：1.切换页面页面没有更新2.通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件,下面这篇文章主要给大家介绍了关于vue组件强制刷新的方案,需要的朋友可以参考下1.强制刷新页面，出现短暂的空白闪烁。2.h5页面在安卓机方法不兼容。vue组件会在什么时候下被销毁?1.页面关闭2.路由跳转3.v-if为false4.改变key值key 的作用与行为

上面没用到localStorage是因为如果用户跳转到页面A后，直接关闭浏览器，再打开浏览器输入网址，就能从本地存储找到该数据，但是。存储在localStorage里的数据如果不是主动去清除的话，就算浏览器关闭了，下次打开浏览器他还是会存在。上面的做法虽然满足了刷新网页数据不丢失，但是没满足第二个条件，数据出现在url地址里了。，这样虽然可以让数据不出现在url地址里，但是刷新网页会导致数据丢失。传参时，由于数据是拼接在url地址后面的，所以刷新网页不会导致数据丢失。传参，数据不会出现在url地址里。

咱们在实际开发中会遇到一个问题：我们在一个很长的列表页往下拉，然后点击列表中的某一个数据进入到详情页查看。此时我们决定返回列表也继续查看列表。很多情况下，由于列表页的组件已经被销毁，所以我们返回到列表页后页面会置顶，不得不又重新下拉查看列表，这样就做了很多没有必要的操作，也是不符合用户的预期。用户希望当我查看玩详情页以后返回，返回列表页的位置是刚刚浏览的位置这种情况有什么好的解决办法呢？scrollBehavior scrollIntoView

nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法。nextTick 是 Vue 提供的一个异步方法，用于在下次 DOM 更新循环结束之后执行回调函数。

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调Vue2响应式的缺陷Vue3.x响应式数据原理Proxy 与 Object.defineProperty 优劣对比Vue2 修改数据页面不重新渲染数组/对象的响应式 ，Vue2 里面是怎么处理的？

为什么说刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象，(vuex的数据并不是弄丢了，而是初始化了，回到初始值，回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。

$forceUpdate官网的定义是——迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。官网地址学习👉vm.$forceUpdate()1、主要用来解决强制刷新视图和数据。2、结合vue生命周期，调用$forceUpdate后会触发beforeUpdate和updated这两个钩子函数，不会触发其他钩子函数。使用场景：1、数据层次太多， 数据修改了，但页面没有重新渲染；2、如果在vue的data中没有进行声明，给没声明的属性赋值（即非响应式的

说在前面我们在开发前端项目的时候经常会用到诸如 npm install来初始化依赖，这个过程中究竟发生了哪些事情，每次都需要从网络端重新下载依赖吗？安装依赖时，总会有一些莫名其妙的报错，这个时候我们只要删除package-lock.json，然后删除node_modules重新下载依赖，这样就能顺利安装依赖了，到底是为什么呢？让我们带着疑问一起往下走。经常使用npm的小伙伴应该知道，项目中用到的依赖，大部分都不是全局安装的，两个不同的项目，即使依赖的包完全一致，初始化都需要重新执行一遍 np

真实DOM和其解析流程？ 浏览器解析HTML的过程为什么需要虚拟DOM，它有什么好处?vue的templete模版虚拟节点是何时生成的data中的数据一修改就会更新到视图上吗Vue中key的作用diff算法的步骤vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程vue2与vue3中diff算法的区别

一、概述大家都知道如何在Vue创建一个实列const vm = new Vue(options)在这里把Vue的实例命名为vm，这是尤雨溪的习惯，我们沿用vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新...vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vueoptions是 new Vue 的参数，我们一般称之为选项或者构造选项，用于当前 Vue 实例的初始化选项。二、那么options里面有什么呢？options的五类属性：数据：data

一、序在 Vue 的文档中介绍数据绑定和响应时，特意标注了对于经过 Object.freeze() 方法的对象无法进行更新响应。因此，特意去查了 Object.freeze() 方法的具体含义。二、含义Object.freeze() 方法用于冻结对象，禁止对于该对象的属性进行修改（由于数组本质也是对象，因此该方法可以对数组使用）。在 Mozilla MDN 中是如下介绍的：可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修

Vue---如何更好的封装组件？几个小技巧助你成为组件封装达人，让我们封装的组件更加优雅易用封装 vue 组件的过程封装第三方组件组件二次封装监听二次封装的组件的生命周期函数

项目本地运行时候，首页子页面刷新均无问题。部署到服务器之后，刷新页面报错、出现404。当vue项目的vue-router的mode为history路由模式时，若未进行相应的配置，可能会发生这种情况。前端路由，即由前端来维护一个路由规则。实现有两种，一种时利用url的hash，也就是常说的锚点(#)，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询；另一种是HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，但页面并没有跳转，不过使用这种模式需

clipboard.js 用于实现点击复制，根据官方文档，我如下写了一个例子，结构：

Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件，这里对vue插件汇总，提供vue组件大全，方便查找使用，便于工作和学习。一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 ...

概念：组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。之前在写组件时总有些疑惑，为什么export default导出的对象中有个name属性，今天看过递归组件之后，才发现这个name属性的一个比较重要的作用。（当然。name属性的还有其他的用处）。组件递归: 1、设置组件name名称 2、在模板中直接使用 <名称 /> xx-Yy的名称要写成<xxyy /> 3、使用时传入参数的方式和组件在其他组件中使用相.

问题一：轮播图内容为动态数据生成时轮播图无法自动轮播在用Swiper遇到的问题，因此加深了对Swiper的掌握，分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助。 首先，new Swiper的初始化最后放在DOM后边，即加载完<div class="swiper-container"></div>后立即初始化，如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化：如放在window.onload = function() {...}中或$(do...

一.viewport<!-- 设置移动端视窗 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,u ser-scalable=no">二、解决点击响应延时 0.3s 问题大多数移动端触摸屏设备上点击的时候都会有0.3秒的延迟问题，我们做移动端web app开发的时候应该都遇到过这个问题，通过以下

vue.config.js配置项vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建创建vue.config.jsvue.config.js(相当于之前的webpack.config.js) 是一个可选的配置文件，如果项目的 (和package.json同级的) 根目录中存在这个文件，那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照 JSON 的...

vue-cli3 移除了 config 文件夹,多出一个 vue.config.js(===webpack.config.json) 的文件!根据官方所描述:vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。官方链接:https://cli.vuejs.org/zh/config/这里只写一下怎么使用手机访问vue的本地项目,多的我就不赘述了!第一步:win+

数据：结构：<divv-for="iteminorderList":key="item.icon"class="item"><img:src="item.img"alt=""@error="@/assets/img/profile/message.svg"/><divclass="info">{{item.info}}</div></div>审查元素发现没显示默认...

为了移动端适配，我们可以使用postcss-px-to-viewport插件来进行px-vw的单位转换。GitHub第一步：安装插件npm i postcss-px-to-viewport --save-dev第二步：在一级目录中新建**postcss.config.js**,然后在文件中添加以下代码module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { vie

通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。那什么叫做需要用到的时候比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了懒加载的优点可以减少首页首次加载的数量，减少服务器的压力 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。为什么使用懒加载getBoundingClientRect()位置IntersectionObserver

一、 介绍vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。index.vue与mixin.js中的数据，计算属性，方法等将进行合并； 如果两者有相同的数据，index.vue文件将覆盖前者； 生命周期钩子入mounted之类的内容两者将都会执行，同名的生命周期钩子，mixin.js中的内容将先执行； index.vue和mixin.js中的数据可以任意方式组合使用，但是为了提高封装性，请尽量避免在mixin.js中使用index.vue的数据或方法，可以在mixin

之前用@load的时候总是不生效。其实原因是这样的：image src有值的时候，才开始加载 onload事件是在src的资源加载完毕的时候，才会触发这样的话，在img标签的src属性填充上值之后，就可以等待onload事件的触发了。 <img :src="showImage" @load="imgLoad" /> methods: { imgLoad() { console.log("资源加载完毕执行"); }, },...

顾名思义这是一个路径问题！！！！！当项目build后打开dist/index.html你会发现页面什么都没有（空白页），查看页面console惊奇的发现一片红更改点一：此时你需要查看你的配置文件webpack.config.js(vue.config.js) 是否配置了publicPath:'./',module.exports = { publicPath:'./', // 执行 npm run build 统一配置路径 }再次打包index.html .

@hook用来监听组件生命周期的回调函数@hook是什么？用来监听组件生命周期的回调函数这和生命周期函数mounted，created，updated有什么区别？区别1：@hook 会在对应的生命周期函数执行后执行。区别2：@hook 可以在父组件监听子组件的生命周期运行情况。监听第三方组件的生命周期

最近用Vue做项目需要加个轮播效果，安装swiper后，结果分页器死活出不来，但轮播效果和前进后退箭头以及滚动栏都是正常显示的，默认安装的是最新版本swiper@6.4.5，这可把我难住了。<template> <div class="slider"> <div class="swiper-container" v-if="banners.length"> <div class="swiper-wrapper">

通过使用保留的<component>元素，动态地绑定到它的is特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据v-bind:is="组件名" 中的组件名去自动匹配组件 也是是一个组件对象，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。father.vue<template> <div> <h2>动态组件</h2> <button type="button" @click...

一、理解1.1此方式用于父组件向子组件传递`标签数据`1.2插槽最后显示不显示是看父组件有没有在孩子里写模板1.3对内容分发<插槽>的理解可以是占位符，标签替换，插槽父组件中子标签放入带有插槽的内容，然后这些内容就会被分发到子组件中特殊的slot元素，根据name属性在子组件中重新组合，替换。1.4作用域插槽|带数据的插槽：在作用域上绑定属性来将子组件的信息/数据传...

方式一：bus中央总线利用总线方式可以平级组件进行通信无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线。第一步：我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下import Vue from 'vue'export default new Vue();...