随笔分类 - Vue3/Vue2框架生态链
摘要：一、composition Api compositon Api的本质体现在代码里面，也就是一个setup函数，在这个setup函数中，返回的数据，会用到该组件的模板中。return的这个对象，一定程度上，代表了之前vue2中的data属性。 这时候，对于大多数初学者来说，可能存在的疑惑就是，那么我
阅读全文
摘要：Componsition API 是 vue3 的一个很大的更新，也是很大的一个优点。为什么要更新呢？肯定是 vue2 的 Options API 有问题，本文就两者的区别做个介绍。 一、vue2 的 Options API 1、Options API - 又叫选项API 在 VUE2 中我们是如何
阅读全文
摘要：一、使用与不使用 script setup 的对比 1、不使用 script setup 的繁杂性 我们之前的组件可能是这样的： <template> <div> <Card>{{msg}}</Card> </div> </template> <script lang="ts"> import {
阅读全文
摘要：一、Vue3.x 应用配置 config：包含Vue应用程序全局配置的对象，在挂载应用之前配置相应的属性。 const app = Vue.createApp({}); app.config = {...}; 1、devtools（类型：Boolean，默认：true） 概述：配置是否允许开启vue
阅读全文
摘要：Teleport 是什么？它解决的是什么问题？ 一、使用场景 - 为什么我们需要 Teleport Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。 1、使用场景： 业务开发的过程中，我们经常会封装一些常用的组件，例如 Modal 组件。相信大家在使
阅读全文
摘要：一、setup setup是组合Composition API中的入口函数，也是第一个要使用的函数。 1、setup只在初始化时执行一次，所有的Composition API函数都在此使用。 2、setup是在beforeCreate生命周期之前执行的(只执行一次) beforeCreate() {
阅读全文
摘要：vue-class-component 是 vue 的官方库，作用是用类的方式编写组件。这种编写方式可以让 .vue 文件的 js 域结构更扁平，并使 vue 组件可以使用继承、混入等高级特性。 vue2.x 对 TS 的支持并不友好，所以 vue2.x 跟 TS 的整合，通常需要基于 vue-cl
阅读全文
摘要：一、移动端自适应需求 1、痛点： 首先、不论转换是否方便，我就是不想在开发代码的时候换算这些单位，更不想去操心什么转换系数（根节点单位） 我会考虑某些属性或者类选择器不需要转换为REM、VW等，如果统一转换，这会不符合我的项目需求。 css代码要足够简洁，我只希望看到一种单位，那就是px。我不想在我
阅读全文
摘要：vue3+typescript中引入外部文件有几种方法。 第一种方法 1、indext.html 中用script引入 <script src="https://oss-emcsprod-public.modb.pro/static/cropper.js"></script> 2、在.vue页面使用
阅读全文
摘要：所有熟悉 Vue 技术栈的小伙伴，都知道在列表渲染的场景下，不能使用 index 或 random 作为 key。 也有很多小伙伴在面试的时候会被面试官比较详细的追问，假如使用index 作为 key 会有什么问题？假如使用 random 作为 key 会有什么问题？假如使用一个唯一不变的 id 作
阅读全文
摘要：先看下具体效果：相当于就是一个网页版的 Xshell 工具，操作起来跟 Xshell 操作一样。前端主要使用 Vue + Xterm + Websocket/Stomp，后端主要使用 SpringBoot + Websocket/Stomp + JSch，下面可以看下具体实现代码，demo 代码主要
阅读全文
摘要：一、基础配置解析及生产环境关闭sourceMap module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 assetsDir: './assets', indexPath: 'index.html', fil
阅读全文
摘要：提到react fiber，大部分人都知道这是一个react新特性，看过一些网上的文章，大概能说出“纤程”、“一种新的数据结构”、“更新时调度机制”等关键词。但如果被问： 1、有 react fiber，为什么不需要 vue fiber 呢？ 2、之前递归遍历虚拟dom树被打断就得从头开始，为什么有
阅读全文
摘要：最近看到一篇文章写diff算法实现（深度剖析：如何实现一个 Virtual DOM 算法 #13），研究了一下写的确实不错，转载如下： 本文会教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法，并且尝试尽量把 Virtual DOM 的算法思路阐述清楚。希望在阅读本文后，
阅读全文
摘要：一、Object.defineProperty() 作用：在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。 1、基本使用 语法：Object.defineProperty(obj, prop, descriptor) 参数：要添加属性的对象、要定义或修改的属性的名称或 [Sy
阅读全文
摘要：用组件库大概是这样的一个思路： 1、先导入组件库 import polyUI from 'polyUI' 2、再通过全局方法Vue.use(polyUI)加载插件 3、然后就可以通过标签去使用polyUI中的组件了<poly-button></poly-button> 根据上面的思路，这个index
阅读全文
摘要：一、什么是异步渲染？ 这个问题应该先要做一个前提补充，我们知道当数据在同步变化的时候，页面订阅的响应操作为什么不会与数据变化完全对应，而是在所有的数据变化操作做完之后，页面才会得到响应，完成页面渲染。 从一个例子体验一下异步渲染机制。 import Vue from 'Vue' new Vue({
阅读全文
摘要：一般啥面试之类的都会问到循环加key值的作用，虽然一般都知道key的作用就是提高虚拟dom diff算法的效率，但是你知道它是怎样提升的吗？下面从diff策略及代码角度总结一下虚拟dom diff算法的全过程。 一、Diff算法简析 DIFF算法基于三个策略： （1）Web UI中DOM节点跨层级的
阅读全文
摘要：今天写项目时，遇到报错信息如下： ./components/MavonEditor/index.vue?vue&type=script&lang=js& (./node_modules/_babel-loader@8.0.6@babel-loader/lib??ref--2-0!./node_mod
阅读全文
摘要：平时碰到一个问题，我们通常都需要从以下几点分析： 1､先说这个点的明确定义，或者是特性； 2､再说具体的应用场景； 3､说说自己的看法、观点； 4､可以稍微举一反三，说说同类特性，或者类似的框架，更好的方案。 简短的概括下常考题： 一、基础点 1、对 SPA 单⻚⾯的理解，优缺点是什么？ 2、new
阅读全文
