首页 > 其他分享 >Vue 2.x脱坑记-查漏补缺

Vue 2.x脱坑记-查漏补缺

时间:2023-11-15 14:56:13浏览次数:30  
标签:脱坑 查漏 Vue React 缓存 组件 路由 加载

Q: 组件的通讯有哪几种啊!

基本最常用的是这三种;

  1. 父传子: props
  2. 子传父: emit
  3. 兄弟通讯:
  • event bus: 就是找一个中间组件来作为信息传递中介
  • vuex: 信息树

传送门:

Q: 为什么我的 npm 或者 yarn 安装依赖会生成 lock文件,有什么用!

lock 文件的作用是统一版本号,这对团队协作有很大的作用;

若是没有 lock 锁定,根据package.json里面的^,~这些,

不同人,不同时间安装出来的版本号不一定一致;

有些包甚至有一些breaking change(破坏性的更新),造成开发很难顺利进行!

 

Q: 组件可以缓存么?

可以,用keep-alive;

不过是有代价的,占有内存会多了,所以无脑的缓存所有组件!别说性能好了,切换几次, 有些硬件 hold不住的,浏览器直接崩溃或者卡死,

所以keep-alive一般缓存都是一些列表页,不会有太多的操作,更多的只是结果集的更换,

给路由的组件meta增加一个标志位,结合v-if就可以按需加上缓存了!

Q:Vue ,React, Angular学习哪个好?哪个工作比较好找!

Vue属于渐进式开发,传统开发过渡 MVVM 模式的小伙伴,Vue 比较好上手,学习成本比较低 基础比较好的,有折腾精神的,可以选择NG5或者React 16;

NG5需要学习typescriptrxjs,还用到比较多的新东西,比如装饰器,后端的注入概念.ng有自己的一整套 MVVM 流程;

VueReact核心只是view,可以搭配自己喜欢的

React的写法偏向函数式写法,还有 jsx,官方自己有 flow,当然也能搭配ts,我也没怎么接触,所以也有一定的学习成本;

至于哪个比较好找工作!告诉你,若是只会一个框架,那不是一个合格的前端;

人家要的是动手能力,解决能力!!技术和待遇是成正比的!!

颜值和背景,学历,口才可以加分,但是这些条件你必须要有的基础下才能考虑这些!

Q: 我有个复杂组件需要有新增和编辑的功能同时存在,但是字段要保持不变性怎么破

字段保持不变性怎么理解呢? 就是说比如新增和编辑同时共享一份 data;

有一种就是路由变了,组件渲染同一个(不引起组件的重新渲染和销毁!),但是功能却不同(新增和编译),

比如从编辑切到新增,data必须为空白没有赋值的,等待我们去赋值;

这时候有个东西就特别适合了,那就是immutable-js;

这个东西可以模拟数据的唯一性!或者叫做不变性!

Q:"首屏加载比较慢!!怎么破!打包文件文件比较大"

依次排除和确认:

  • 减少第三方库的使用,比如jquey这些都可以不要了,很少操作 dom,而且原生基本满足开发
  • 若是引入moment这些,webpack 排除国际化语言包
  • webpack 常规压缩js,css, 愿意折腾的还可以引入 dll 这些
  • 路由组件采用懒加载
  • 加入路由过渡和加载等待效果,虽然不能解决根本,但起码让人等的舒心一点不是么!

整体下来,打包之后一般不会太大;

但是倘若想要更快?那就只能采用服务端渲染(SSR)了,可以避免浏览器去解析模板和指令这些; 直接返回一个 html ,.还能 SEO,


Vue你们如何做spa的模块懒加载呢

// 推荐这种写法
// 一来可以聚合webpackChunkName名字一样的为一个模块,也是当前版本推荐的加载姿势
const Home = () =>
  import(/* webpackChunkName: "HomePage" */ "@/views/home/index.vue");

  

Q: Vue SPA 没法做优化(SEO)!有解决方案么

可以的,ssr(服务端渲染就能满足你的需求),因为请求回来就是一个处理完毕的 html

现在 vue 的服务端开发框架有这么个比较流行,如下

传送门:Nuxt.js

也有官方的方案,ssr 完全指南


作者:CRPER
链接:https://juejin.im/post/59fa9257f265da43062a1b0e

标签:脱坑,查漏,Vue,React,缓存,组件,路由,加载
From: https://www.cnblogs.com/liliuyu/p/11749681.html

相关文章

  • vue~封装一个文本框标签组件
    用到的技术父组件向子组件的传值类型检查和默认值:您可以为props指定类型检查和默认值。这可以确保传递给子组件的数据符合期望的类型,以及在没有传递数据时具有合理的默认值。例如:props:{message:{type:String,default:'DefaultMessage'},count:{typ......
  • vue~封装一个文本框添加与删除的组件
    标签组件的效果如下组件作用这是一个div,包含了两个文本框,后面是添加和删除按钮添加按钮复制出新的div,除了文本框没有内容,其它都上面一样删除按钮将当前行div删除组件实现<template><div><templatev-for="(item,index)intags"><el-row:gutter="4"style="margin:......
  • Vue双向数据绑定原理-上
    Vue响应式的原理(数据改变界面就会改变)是什么?时时监听数据变化,一旦数据发生变化就更新界面,这就是Vue响应式的原理。Vue是如何实现时时监听数据变化的通过原生JS的defineProperty方法,通过get和set方法来监听数据的变化。defineProperty方法的特点可以直接在一个对象上定义一......
  • Vue实验记录
    webpack安装首先下载node.jshttps://nodejs.org/en下载完成后进行安装,直接下一步就可以安装完成后,在cmd中查看是否安装成功然后安装webpack安装脚手架创建项目选择第二个创建完成后的效果进入项目并运行在学习通中下载源码,把源码按照项目格式放到创建好的项目......
  • vuejs3.0 从入门到精通——项目搭建
    项目搭建一、环境准备软件名称软件版本nodev20.9.0npm10.1.0Windows10专业版22H2vue/cli5.0.8vitev4.5.0二、vite创建项目>npminitvite@latestsaas--templatevue√Selectaframework:»Vue√Selectavariant:»TypeScriptSca......
  • Vue-cli 用自定义的组件有遇到过哪些问题?
    在components目录新建你的组件文件(indexPage.vue),script一定要exportdefault{}在需要用的页面(组件)中导入:importindexPagefrom'@/components/indexPage.vue'注入到vue的子组件的components属性上面,components:在template视图view中使用,例如命名为inde......
  • Vue3+Element plus 实现表格可编辑
    <template><div><el-buttontype="primary"@click="handleAdd">新增</el-button></div><div><el-table:data="tableData"style="width:100%&quo......
  • vue3 与 vue2 的区别
    布尔型Attribute​布尔型attribute依据true/false值来决定attribute是否应该存在于该元素上。disabled就是最常见的例子之一。v-bind在这种场景下的行为略有不同:<button:disabled="isButtonDisabled">Button</button>当isButtonDisabled为真值或一个空字符串(......
  • Vue_MQTT项目搭建记录
    新建vue3项目#新建vite+vue3的项目npminitvue@latestyarn安装依赖包yarnaddmqtt初探-连接阿里云物联网平台代码:<template><div><h1>LED-IOT</h1><button@click="connectToBroker">Connect</button><button@......
  • vue3源码学习api-vue-sfc文件编译
    vue最有代表性质的就是.VUE的文件,每一个vue文件都是一个组件,那么vue组件的编译过程是什么样的呢Vue单文件组件(SFC)和指令ast语法树一个Vue单文件组件(SFC),通常使用*.vue作为文件扩展名,它是一种使用了类似HTML语法的自定义文件格式,用于定义Vue组件。一个Vue单......