前端知识点自我总结 四

自定义指令

1、vue.directive的作用

vue.directive是我们除了内置的指令（如v-model和v-show）之外的自定义指令。自定义指令是对普通DOM元素进行的底层操作，它是一种有效的的补充和扩展，不仅可以用于定义任何的dom操作，并且是可以复用的，

2、vue.directive的使用场景

例如在图片加载完成前，用随机的背景色占位，图片加载完成后直接渲染出来，用自定义指令可以方便的实现该问题。还有高亮类的操作，可以将其封装为自定义指令。
 

computed和watch之间的区别

1.computed能完成的功能，watch都可以完成

2、watch能完成的功能，computed不一定可以完成 例如：watch可以进行异步的操作

重要的原则

1.所有vue管理的函数，最好写成普通函数，这样this的指向才能是vm 或组件实例对象

2、所有不被vue所管理的函数（定时器的回调、ajax的回调函数，promise）最好写成箭头函数

ps:watch监听器中 immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法

/deep/

vue组件中，我们会在style里设置scoped，这个时候在组件里面在写样式是对子组件是没有效果的，如果想让设置的样式对所以子组件都生效，这个时候得使用 /deep/ 深度选择器。

Flex布局下的子元素宽度不生效的问题

如果有一个300px的父盒子 三个110px的子盒子 当我们给父盒子设置了flex弹性布局的时候，子盒子的宽度就会被压缩成父盒子的三分之一 我们可以通过设置 flex-shrink样式 值为0 来让我们的子盒子不参与到瓜分父盒子宽度中去

get方法用parmas传参

post方法用data传参

includes() 方法检查是否数组包含某些元素，返回 true 或 false ,是ES6的方法，也可以对字符串使用

prop中父组件向子组件传入的值 如果是一个基本数据类型的话，不可以直接进行修改，如果是一个复杂数据类型的话，则可以进行修改，但是不能通过等号= 来进行赋值

正则表达式是啥？

正则表达式又叫作“规则表达式”（Regular Expression 即 RegExp），是计算机科学的一个概念。

正则表达式有什么用？

它常被用来搜索、替换那些符合某个模式的文本。

正则表达式是：用来匹配特殊字符或有特殊搭配原则的字符的最佳选择。

什么是正则表达式的贪婪与非贪婪匹配

　　如：String str="abcaxc";

　　　　Patter p="ab*c";

　　贪婪匹配：正则表达式一般趋向于最大长度匹配，也就是所谓的贪婪匹配。如上面使用模式p匹配字符串str，结果就是匹配到：abcaxc(ab*c)。

　　非贪婪匹配：就是匹配到结果就好，就少的匹配字符。如上面使用模式p匹配字符串str，结果就是匹配到：abc(ab*c)。

模板中的$event 就是事件参数

占位符

== 普通的英文半角空格

  ==   ==   == no-break space （普通的英文半角空格但不换行）

　 == 中文全角空格 （一个中文宽度）

  ==   == en空格 （半个中文宽度）

  ==   == em空格 （一个中文宽度）

  == 四分之一em空格 （四分之一中文宽度）

相比平时的空格（ ）， 拥有不间断（non-breaking）特性。即连续的 会在同一行内显示。即使有100个连续的 ，浏览器也不会把它们拆成两行。

当我们的子组件既需要用到父组件的值，又需要更改父组件传递的值，就可以使用 v-model 传递值

Vue中的依赖注入

provide 选项允许我们指定我们想要提供给后代组件的数据/方法

provide: function () {
  return {
    getMap: this.getMap
  }
}

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的 property：

inject: ['getMap']

这里的接受除了写成数组的形式，也可以写成像props对象那样的设置它的数据类型

token过期的问题

vue跨域

原因：浏览器访问遵循同源策略，同源：协议/域名:端口 要相同，当访问非同源地址就会出现跨域问题。

在vue中处理跨域的方法一般就是vue代理服务器proxy跨域。
在vue.config.js中进行配置

devServer: {
    // 端口号
    // port: 8890,
    // 配置是否自动启动浏览器
    open: false,
    // 是否启用https
    https: false,
    proxy: {
      // 代理
      "/api": {
        target: process.env.VUE_APP_SERVE_URl,     //要代理访问的路径
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  },

浏览器的运行机制：

1. 构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；

2. 构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如<b></b>），构建渲染树（Rendering Tree/Frame Tree）；render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现

3. 布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；

4. 绘制渲染树（paint/repaint）：遍历渲染树，使用UI 层来绘制每个节点。

宏任务与微任务

1. MacroTask（宏观Task） setTimeout, setInterval, , requestAnimationFrame, I/O

2. MicroTask（微观任务） process.nextTick, Promise, Object.observe, MutationObserver

3. 先同步 再取出第一个宏任务执行 所有的相关微任务总会在下一个宏任务之前全部执行完毕 如果遇见 就 先微后宏