前端必须要知道的100个知识点 （一）

马克图布HJ
125 阅读9分钟

理论知识

1.MVVM定义

  • 由 model（模型） view（视图） controller（控制器） view model（VM 区别于传统MVC）
  • VM 是数据层与视图层的桥梁，数据与视图分离，他负责数据的双向绑定，使得用户开发更加方便

2.vue2响应式原理

  • 1）监听对象数组变化
  • 2）设置拦截，读取的时候进行依赖收集，派发更新

3.v-model 原理

  • 可以看成为value+input方法的语法糖

    1）绑定数据value

    2）触发输入事件input

  • 可以绑定的都是表单元素。select radio等

4. v-if与 v-show的区别

  • 1）v-show只是简单的控制元素的display属性，元素仍然被渲染并保存在DOM中；而v-if为条件渲染
  • 2）切换频繁用v-show，很少切换用v-if
  • 3）v-if有配套的 v-else-if 和 v-else 而v-show没有

5. computed watch method 的区别

  • computed 本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图，适用于性能消耗较大的计算场景
  • watch 没有缓存性 更多的是观察的作用，可以监听某些数据对执行回调。需要深度监听时可以打开deep：true的选项
  • method 每次调用都会重新执行一次，不会自动触发

6.Router 与Route的区别

  • router 是一个路由实例对象，包含了路由跳转和钩子函数(是VueRouter的一个全局对象)

  • $router.push({path:’/path’}); 本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

  • $router.replace({path:’/path’}); 替换路由，没有历史记录

  • route 是一个路由信息对象，包括query，params，path，name（是一个跳转的路由对象，局部对象，）

7.vue-loader的定义与用途

  • 其为vue文件的一个加载器，他会解析文件并提取出每个语言块，将其组装为CommonJS模块，再通过module.exports导出一个vue.js组件对象

8.Vuex

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

  • （1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

  • （2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

  • 共有五个属性：

  • state 存放数据，读取方式为 this.$store.state.name

  • mutations 是操作state数据的，但他是同步的

  • actions 异步操作

  • getters 相当于计算属性，例如 this.$store.getters.name

  • modules 模块化vuex

9.Vue生命周期

  • Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

10.闭包

  • 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）

  • 闭包让你可以在一个内层函数中访问到其外层函数的作用域

function init() {
    var name = "Mozilla"; // name 是一个被 init 创建的局部变量
    function displayName() { // displayName() 是内部函数，一个闭包
        alert(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

11.防抖与节流

  • 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}
  • 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
function throttled1(fn, delay = 500) {
    let oldtime = Date.now()
    return function (...args) {
        let newtime = Date.now()
        if (newtime - oldtime >= delay) {
            fn.apply(null, args)
            oldtime = Date.now()
        }
    }
}

相同点：

  • 都可以通过使用 setTimeout 实现
  • 目的都是，降低回调执行频率。节省计算资源

不同点：

  • 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
  • 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

12.盒子模型

  • 一个盒子由四个部分组成：content、padding、border、margin

image.png

content，即实际内容，显示文本和图像

boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成

padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响

margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

13.flex布局

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

image.png

14.webpack

Webpack 最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源 webpack 是一个用于现代JavaScript应用程序的静态模块打包工具

15.websocket

  • websocket是一种网络传输协议，客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输

  • 优点

  • 较少的控制开销：数据包头部协议较小，不同于http每次请求需要携带完整的头部
  • 更强的实时性：相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少
  • 保持创连接状态：创建通信后，可省略状态信息，不同于HTTP每次请求需要携带身份验证
  • 更好的二进制支持：定义了二进制帧，更好处理二进制内容
  • 支持扩展：用户可以扩展websocket协议、实现部分自定义的子协议
  • 更好的压缩效果：Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率

16.http与https

http

HTTP (HyperText Transfer Protocol)，即超文本运输协议，是实现网络通信的一种规范。

  • 传输的数据并不是计算机底层中的二进制包，而是完整的、有意义的数据，如HTML 文件, 图片文件, 查询结果等超文本，能够被上层应用识别

  • 在实际应用中，HTTP常被用于在Web浏览器和网站服务器之间传递信息，以明文方式发送内容，不提供任何方式的数据加密

优点

  • 支持客户/服务器模式
  • 简单快速：客户向服务器请求服务时，只需传送请求方法和路径。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快
  • 灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记
  • 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间
  • 无状态：HTTP协议无法根据之前的状态进行本次的请求处理

https

  • 为了保证这些隐私数据能加密传输，让HTTP运行安全的SSL/TLS协议上，即 HTTPS = HTTP + SSL/TLS，通过 SSL证书来验证服务器的身份，并为浏览器和服务器之间的通信进行加密

区别

  • HTTPS是HTTP协议的安全版本，HTTP协议的数据传输是明文的，是不安全的，HTTPS使用了SSL/TLS协议进行了加密处理，相对更安全
  • HTTP 和 HTTPS 使用连接方式不同，默认端口也不一样，HTTP是80，HTTPS是443
  • HTTPS 由于需要设计加密以及多次握手，性能方面不如 HTTP
  • HTTPS需要SSL，SSL 证书需要钱，功能越强大的证书费用越高

17.Vue组件之间通信方式

Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。
（1）props / $emit适用 父子组件通信

  • 这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref与 $parent / $children适用 父子组件通信

  • ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
  • $parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on）适用于 父子、隔代、兄弟组件通信

  • 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs/$listeners适用于 隔代组件通信

  • $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs"传入内部组件。通常配合 inheritAttrs 选项一起使用。
  • $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners"传入内部组件

（5）provide / inject适用于 隔代组件通信

  • 祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex适用于 父子、隔代、兄弟组件通信

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  • 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

18.Vue 框架怎么实现对象和数组的监听

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。
即：

  • 输入框内容变化时，Data 中的数据同步变化。即 View => Data 的变化。
  • Data 中的数据变化时，文本节点的内容同步变化。即 Data => View 的变化。

其中，View 变化更新 Data ，可以通过事件监听的方式来实现，所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。

avatar
文章
阅读
粉丝