正文 

当前位置： 首页 > 知识 > java教程

前端笔记整理（vue）(代码片段)

Leatitia Leatitia     2022-12-03     495

关键词：

Vue学习总结


Vue，一套

MVVM

MVVM即Model-View-ViewModel，将其中的 View 的状态和行为抽象化，让我们可以将UI和业务逻辑分开。MVVM的优点是低耦合、可重用性、独立开发。

原理了解

响应原理

Vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty劫持data属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

1、组件data为什么返回函数
组件的data写成一个函数，数据以函数返回值形式定义，复用组件时，就可以返回互不影响的一份data，避免数据污染。

2、vue给对象新增属性页面没有响应
由于Vue会在初始化实例时对属性执行getter/setter转化，所以属性必须在data对象上存在才能让Vue将它转换为响应式的。Vue提供了$set方法用来触发视图更新。

3、请说一下响应式数据的理解？

根据数据类型来做不同处理，数组和对象类型当值变化时如何劫持。

  1. 对象内部通过defineReactive方法，使用Object.defineProperty() 监听数据属性的 get 来进行数据依赖收集，再通过 set 来完成数据更新的派发；
  2. 数组则通过重写数组方法来实现的。扩展它的 7 个变更⽅法，通过监听这些方法可以做到依赖收集和派发更新；( push/pop/shift/unshift/splice/reverse/sort )

v-model双向绑定原理

v-model本质上是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件。

  • text 和 textarea 元素使用 value 属性和 input 事件
  • checkbox 和 radio 使用 checked 属性和 change 事件
  • select 字段将 value 作为 prop 并将 change 作为事件;

这个语法糖必须是固定的，也就是说属性必须为value，方法名必须为：input。

1、key的作用
高效更新虚拟DOM，触发过渡。

2、computed和watch的区别

  • 当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed；

  • watch用于观察和监听页面上的vue实例，如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择

生命周期

create、mount、update、destroy前后

nextTick在哪里使用？原理是？

vue多次更新数据，最终会进行批处理更新。内部调用的就是nextTick实现了延迟更新，用户自定义的nextTick中的回调会被延迟到更新完成后调用，从而可以获取更新后的DOM。原理就是异步方法。

vue.use是干什么的？原理是什么？

vue.user()是用来使用插件的，可以在插件中扩展全局指令、组件、原型方法等。

  • 检查插件是否注册，若已注册，则跳出；
  • 处理入参，将第一个参数之后的参数归集，并且在首部塞入 this 上下文；
    执行注册方法，调用install方法，处理入参。若没有install方法切插件本身就是function，则直接进行注册；
    插件本身是一个函数，直接让函数执行。 代码：plugin.apply(null, args)

Vue 路由

Vue路由官方文档

vue路由模式

vue-router共有3中路由模式：hash（hash在URL中，单不被包括在HTTp请求中）、history、abstract；

  • hash 模式：地址栏URL中的#符号，它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，不需要后台进行配置，因此改变hash不会重新加载页面。
  • history 模式：利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法（需要特定浏览器支持）。history模式改变了路由地址，需后台配置地址。

路由导航方式

  • <router-link to="/foo"/>
  • this.$router.push()

Vue-router有几种钩子函数？

路由钩子类型：全局守卫、路由守卫、组件守卫；
流程：
1.导航被触发；
2.在失活的组件里调用beforeRouteLeave守卫；
3.调用全局beforeEach守卫；
4.在复用组件里调用beforeRouteUpdate守卫；
5.调用路由配置里的beforeEnter守卫；
6.解析异步路由组件；
7.在被激活的组件里调用beforeRouteEnter守卫；
8.调用全局eforeResolve守卫；
9.导航被确认；
10.调用全局的afterEach钩子；
11.DOM更新；
12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

组件通信

  • props、$emit()
  • eventBus

axios拦截器配置

// 添加请求拦截器
axios.interceptors.request.use(function (config) 
    // 在发送请求之前做些什么
    return config;
, function (error) 
    // 对请求错误做些什么
    return Promise.reject(error);
);


// 添加响应拦截器
axios.interceptors.response.use(function (response) 
    // 对响应数据做点什么
    return response;
  , function (error) 
    // 对响应错误做点什么
    return Promise.reject(error);
  );

webpack

plugin和loader的不同

  • 用法不同
    • Loader在 modules.rules 中配置，作为模块的解析规则而存在。类型为数组，每一项都是一个 Object，里面描述了对于什么类型的文件（test），使用什么加载（loader）和使用的参数（options）；
    • Plugin在 plugins 中单独配置。类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入；
  • 作用不同
    • Loader直译为加载器。webpack 将一切文件视为模块，但是 webpack 原生是只能解析js文件，如果想要将其它文件也打包，就会用到 loader。所以 loader 的作用是让 webpack 拥有加载接解析非JavaScript文件的能力。

webpack构建流程是？

webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

  1. 初始化参数；
  2. 开始编译；
  3. 确定入口：根据配置中的 entry 找出所有的入口文件；
  4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
  5. 完成模块编译；
  6. 输出资源；
  7. 输出完成。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

如何利用webpack来优化前端性能？

用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

  • 压缩代码。UglifyJsPlugin等压缩js文件，cssnano压缩css；
  • 利用 CDN 加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径；
  • 删除死代码；
  • 提取公共代码等；

如何提高webpack的构建速度？

  • 多入口情况下，使用 commonChunkPlugin来提取公共代码；
  • 通过externals配置来提取常用库；
  • 使用happyPack实现多线程加速编译等。

怎么配置单页应用？怎么配置多页应用？

  • 单页面应用，即webpack的标准模式，直接在entry中指定单页应用的入口即可；
  • 多页应用，可使用webpack的 AutoWebPlugin来完成简单自动化的构建。多页应用需注意：
    • 每个页面都有公共的代码，可提取抽离，避免重复加载；
    • 入口的配置需要灵活，避免每次添加新页面还需修改构建配置；

import和require的区别

  • require是AMD规范引入方式；import是es6的一个语法标准，需考虑兼容性；
  • require是是运行时调用；import是编译时调用，所以必须放在文件开头；
  • require是赋值过程，import是解构过程；

说说你对模块化的理解

模块化开发：封装细节，提供使用接口，每个模块都是实现某一特定的功能。模块化开发的基础就是函数，独立性是模块的重要特点。

Vue中模板编译原理？

默认.vue文件中的 template处理是通过vue-loader 来进行处理的并不是通过运行时的编译。模板引擎的实现原理就是new Function + with来进行实现的。vue-loader中处理template属性主要靠的是vue-template-compiler。

Vue的性能优化

  • 编码阶段：在更多的情况下，使用v-if替代v-show；key保证唯一；使用路由懒加载、异步组件；第三方模块按需导入；长列表滚动到可视区域动态加载；图片懒加载；如果需要使用v-for给每项元素绑定事件时使用事件代理；等
  • 用户体验：骨架屏、缓存优化
  • SEO优化：预加载渲染
  • 打包优化：压缩代码；使用cdn加载第三方模块；sourceMap优化；splitChunks抽离公共文件；多线程打包happypack；等

有没有去研究webpack的一些原理和机制,怎么实现的

  1. 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果.
  2. 注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应.
  3. 从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去.
  4. 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换.
  5. 递归完后得到每个文件的最终结果,根据entry配置生成代码块chunk.
  6. 输出所有chunk到文件系统.

前端笔记整理（css）(代码片段)

前端基础知识CSS3新特性定位常见类型`position:absolute`和`float`属性CSS盒模型`margin`塌陷浮动.clearfixBFC常见布局水平垂直居中flex布局flex属性flexitems属性两边宽度固定、中间栏自适应三栏布局怎么能让图文不可复制px... 查看详情

前端笔记整理（html）(代码片段)

前端基础知识DOCTYPEDOCTYPE声明hack支持HTML5新标签严格模式与混杂模式区别xml和HTML的区别标签属性对语义化的理解？`iframe`的优缺点？DOCTYPEDOCTYPE声明<!DOCTYPE>声明有助于浏览器中正确显示网页。网页上不同的文件... 查看详情

前端笔记整理（编程）(代码片段)

基础编程在js中怎么捕获异常？写出来看看？应该在哪些场景下采用呢？说说你对hosts文件的理解，它都有哪些作用？a标签的href和onclick属性同时存在时，哪个先触发？数组去重遍历循环.indexOf()利用Set... 查看详情

前端面试题整理—vue篇(代码片段)

 1、对vue的理解，他有什么特点，vue为什么不能兼容IE8及以下浏览器　　vue是一套用于构建用户界面的渐进式框架，核心是一个响应的数据绑定系统　　vue是一款MVVM框架，基于双向绑定数据，当数据发生变化时候，vue自身会... 查看详情

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

系列文章目录一名深漂程序员：我所整理和收集的前端面试题（一）一名深漂程序员：我所整理和收集的前端面试题（二）一、如何做性能优化1.webpack工程环境层面的优化1.新的工具，更好的代码压缩... 查看详情

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

系列文章目录一名深漂程序员：我所整理和收集的前端面试题（一）一名深漂程序员：我所整理和收集的前端面试题（二）一、如何做性能优化1.webpack工程环境层面的优化1.新的工具，更好的代码压缩... 查看详情

万字长文vue全家桶从入门到实战，超详细笔记整理(一)（建议收藏）(代码片段)

笔记根据B站编程不良人视频整理，视频链接：【编程不良人】VUE全家桶入门到实战，学VUE看这个就够了，已完结！基于企业最流行Vue实战技术，需要md格式笔记的可以私信我。目录1、Vue引言2、Vue入门2.1、... 查看详情

前端笔记十在vue中使用样式(代码片段)

代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">& 查看详情

前端笔记十在vue中使用样式(代码片段)

代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">& 查看详情

前端开发vue教程笔记(代码片段)

...心定下来，一直走下去，加油。这几年Vue.js成为前端框架中最火的一个。越来越多的网站前端开始采用Vue.js开发。是开源世界华人的骄傲，其作者是我国尤雨溪，为 查看详情

万字长文vue全家桶从入门到实战，超详细笔记整理(三)（建议收藏）(代码片段)

目录16、VueCLI脚手架16.1、什么是CLI16.2什么是VueCLI<====>(maven项目构建工具)16.3VueCLI优势16.4VueCLI安装1、环境准备2、安装脚手架3、第一个vue脚手架项目4、如何开发Vue脚手架17、在脚手架中使用axios17.1、安装axios18、Vue... 查看详情

前端笔记五初识vue(代码片段)

一、简介vue是一套用于构建用户界面的渐进式框架：构建用户界面：顾名思义，就是可以用来写界面的框架渐进式：既可以改造一个页面的一个小部分，也可以从零开始做个复杂的网站vue框架的核心思想是数... 查看详情

前端笔记八vue指令的事件修饰符(代码片段)

vue指令的事件修饰符.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获机制.once事件只触发一次.self只在元素本身被触发时触发回调事件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8... 查看详情

前端笔记八vue指令的事件修饰符(代码片段)

vue指令的事件修饰符.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获机制.once事件只触发一次.self只在元素本身被触发时触发回调事件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8... 查看详情

前端笔记整理（css）(代码片段)

前端基础知识CSS3新特性定位常见类型`position:absolute`和`float`属性CSS盒模型`margin`塌陷浮动.clearfixBFC常见布局水平垂直居中flex布局flex属性flexitems属性两边宽度固定、中间栏自适应三栏布局怎么能让图文不可复制px... 查看详情

万字长文vue全家桶从入门到实战，超详细笔记整理(二)（建议收藏）(代码片段)

目录13、es6的新特性14、Vue中组件(component)14.1、Vue标准开发模式14.2、组件作用14.3、组件使用14.3.1、全局组件注册14.3.2、局部组件注册14.4、Prop的使用14.4.1、通过在组件上声明静态数据传递给组件内部14.4.2、通过在组件上声明动态... 查看详情

前端笔记九vue的双向数据绑定及实例(代码片段)

vue中的v-bind指令可以实现从model到view的单向绑定，而v-model可以双向绑定数据一个简单的计算器实例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv 查看详情

前端笔记九vue的双向数据绑定及实例(代码片段)

vue中的v-bind指令可以实现从model到view的单向绑定，而v-model可以双向绑定数据一个简单的计算器实例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv 查看详情