vue,git,webpack,es6等

~~学海无涯,回头是岸~~

# webpack

## npm run build / server 之后发生了什么?

脚手架使用webpack来执行配置文件,默认是webpack.config.js或者vue.config.js.然后执行入口文件的js,进行解析处理.

如果是build则生成物理文件存在磁盘上.

如果是server的话则将编译的结果存入内存条中

## webpack是干什么的?定义?解释?

webpack是一个打包工具,前端半自动化开发工具.它是基于nodejs运行的,它的功能有,压缩代码,解析es6,解析sass语法,压缩图片,代码热更新等.

一打包工具,半自动化开发,基于nodejs运行

功能:1.压缩代码,图片 2.解析es6,sass 3.代码热更新

## webpack构成部分?

入口,出口,插件,装载机(loader),本地服务(devServer)

## webpack执行过程?

webpack默认执行webpack.config.js文件,读取入口文件开始解析各种资源

## 列举几个常用loader?

sass-loader,解析sass文件,转成css

file-loader,处理文字,处理图片

url-loader,基于filer-loader处理文件

css-loader,解析css文件,处理css代码

style-loader,把css代码插入到页面当中

img-loader,专门处理图片

babel-loader 解析es6转成es5

## loader的执行顺序?

自下向上,自右向左

## plugins有哪些

html-webpack-plugin解析html的

## loader和插件plugins的区别

正常情况下,先用loader把资源处理完之后在执行插件

loader是专门用于处理各种资源的编译过程

plugins是对webpack没有的功能的补充

## [webpack默认只能解析js文件]

## webpack安装

npm i webpack webpack-cli

webpack-der-server

创建一个webpack.config.js文件进行配置

## webpack执行的命令

### 零配置打包:npx webpack

只能打包js文件,打包后的文件一定叫main.js

### 执行配置(打包):webpack server

### webpack+git

git 代码管理工具.

git常用命令:

- git status 查看当前仓库的状态

- git add -a 把当前仓库的所有更改存入本地暂存区

- git pull 上传代码到远程

- git commit -m '日志'

- git push 上传代码到远程

## jq的核心

### 什么是jq

封装操作dom的类库.其底层还是操作dom

- jq对象和原生对象的呼唤?

 转原生`${'el'}.get(0)`或者`$('el')[0]`;原生转jq`$(obj)`

- jq的扩展方法:`$.fn()`,`$.extends()`基于jq开发插件

## js

dom和bom

ajax和jsonp

对象,原型,原型链等

闭包:不污染全局,容易造成内存溢出.

递归:树形菜单,函数自我调用:1.结束的判断2.数据的格式一致3.数据嵌套层数不定.

异步,同步 -- 宏任务和微任务

## es6

### 性能优化

### webpack

## 异步,同步 -- 宏任务和微任务

先同步,再微任务,最宏任务

### 异步代码

宏:定时器,

微:promise,

微:动画对象

dom和bom

##

### dom用documentr

- body document.body

- html documnet.documentElement

### bom用window

- window.history

- window.location.hash

- window.fetch下一代ajax,基于promise封装的

### es6

#### 变量

let,const 不能提升,不能重复声明

let 变量的值可以重复赋值

const 常量不能重复赋值

var 变量提升,重复赋值,重复声明

#### 解决异步的方法

回调地狱--典型的异步回调

用户登录,第一个接口请求到用户的id,第二个接口用id请求用户的金钱,第三个接口用id和金钱用

### 性能优化

压缩代码,删除沉余的注释

雪碧图/精灵图 == 将若干个小图合并成一个大图,是背景定位复用该图

script标签必须放在body的结束标签前面

### class 类

## vue

以数据驱动视图的渐进式mvvm框架

- 渐进式:循序渐进的使用vue,可选择性强,可以只是要vue其中的一个小功能,不必完全使用vue.不强制的意思

- mvvm:v-model模型数据,v-view  视图:数据是双向绑定的,所以数据改变导致试图改变

### 生命周期

4个阶段8个函数,其中最大问题是自动发起ajax请求问题,如果是在浏览器中运行,则应该在mounted发起,如果是服务器端渲染,应该在created发起

### 内置组件

#### slot 插槽

是自定义组件的高级形式,多用于模板复用,动态渲染传入的内容或组件

使用场景:插件的封装,网站结构布局等

-匿名插槽

插槽组件中传入的散内容被slot标签接收

-具名插槽

使用template标签,用v-slot指令绑定名字,插槽组件中slot组件使用name属性给插槽取名字

-插槽传参

slot组件传递参数,上有组件的template接收

-v-slot的缩写:`#`

#### keep-alive 缓存原理

语法:`<keep-alive> <MyDom/> </keep-alive>`

##### 属性

凡是被它包裹的组件,都会被缓存

- includes 只缓存被包含的组件

- exincludes 不缓存被包含的组件

##### 生命周期

- activated 缓存的组件被激活了

- deactivated 缓存的组件被停用了

#### component 动态加载组件

它必须使用is属性动态加载组件名字,解放了大量书写v-if和v-show

#### transition 动画组件

使用name属性控制动画类名的前缀,从而产生不同的动画效果

一般用于嵌套在路由视图组件或=动态组件

#### template 模板

第一种作为vue模板标签使用,第二个座位插槽使用

### nextTick

不常用,但很重要

保证所有全部更新完毕才会触发,用于获取dom更新后获取dom节点数据

### 指令

#### html

专门用于渲染字符串dom片段,底层做了防注入攻击,会将js内容转义

#### text

只能渲染文本内容

#### for

字符串,数组,对象,数组

遍历数组和对象的区别是对象有三个参数,分别是值,键,下标

#### model

数据双向绑定指令,专门用在表单元素上

#### bind

- 可以绑定原生的属性

- 绑定自定义属性

- 绑定给自定义组件上是传参方式

- 动态绑定属性

- 动态绑定属性

`v-bind:[name]='data'`

- 动态绑定属性值

`v-bind:checked='state'`

- 绑定class

  `v-bind:class='{active:true/false}'`

- 绑定style

  `v-bind:style='{color:red}'`

#### on

缩写:`@`,两种用法,绑定原生事件,自定义事件

#### once

让元素内的值永远保持第一次渲染,还是优化性能的一个手段,如:给固定写死的静态dom加上之后,这里的dom不会再更新了,不再参与diff重算

#### pre

不会使用vue去解析里面的内容,当字符串去渲染了

#### clock

防止闪烁,当一个值在页面中使用的时候,如果该值是ajax的返回值,那么值初始化的时候为空,则会导致页面闪烁

css的display:none;

#### if

控制元素的渲染与销毁.如果频繁切换应该优先适用v-show

#### show

css的display:none;

#### slot

插槽指令,缩写`#`

#### text  

### 监听和计算属性

#### 相同点

都可以监听数据的变化

#### 不同点

计算属性是监听一个返回一个新值,如果这个值不使用的话,则兼听不会触发

watch专门监听一个值的改变

计算属性没有数据类型的限制 watch如果监听对象或数组,必须开启深度监听deep为true

计算属性是立即返回,所以不能执行异步;watch可移植性异步

计算属性只要写了受观测的数据,就会立即对数据监听;watch只能监听一个数据

计算属性如果默认只能是只读的,想要修改必须则必须是对象写法,在set函数中修改被监听的数据

### vue底层原理和vue描述

Object.defineProperty

vue优点:虚拟dom,模块化开发,数据驱动,双向相应,浏览器统一兼容.

缺点:由于是js生成的虚拟dom,不利于seo爬虫爬取.首屏加载相对于静态页面慢.

### 修饰符

#### 事件修饰符

- once 事件只执行一次

- native 绑定原生事件 当给子组件绑定的时候

- stop 阻止冒泡

- prevent 阻止默认事件

#### 属性

- v-bind.sync 伪双向绑定

- v-bind.prop 把属性转成不可兼得属性

#### 指令

- v-model.lazy 当用户失去焦点后触发

- v-model.Number 尝试转成数字

- v-model.trim 去掉收尾空字符串

#### 键盘修饰符

- 13 和 enter监听回车

#### 鼠标修饰符

- right 右击

- left 左击

### data为什么是函数

因为组件的data会提升,而根实例上的data是对象,会导致合并.把data变成函数,已调用的方式来使用,避免了覆盖和冲突

### 什么是虚拟dom

使用js算法动态生成的dom叫虚拟dom

### diff算法和key的关系

同层对比,只要发现不一致的节点就用新的dom替换旧的dom.正是因为diff算出来的虚拟dom没有跟踪标识,当一个循环出来的虚拟dom列表中任意一个元素被修改,diff算法没办法找到他,只能重新渲染一份闲的dom.加入key之后,每个dom有了自己唯一的表示,这样修改的时候可以精确地找到并修改,从而节省了性能.所以,key的值必须唯一,而且不可以用随机数,用时间,不建议用下标

### vue是mvvm模式,解释

### 订阅发布模式

订阅者:派发事物接受的对象,比如dom元素

发布者:事务委托对象,比如proxy

### 骨架屏优化

当页面基于数据渲染,数据尚未获取到时,使用骨架屏站位

### 动态绑定指令

v-bind:[name] nam是变量,赋予任意值

### 组件通信

#### 父传子

父:v-bind传递,子props接收

#### 子传父

父:v-on函数,子:$emit('函数',数据)

#### 父子双向

- v-model 自动注入value值和input函数

- .sync 伪数据双向绑定

#### 兄弟

- 让父组件充当中间人

- `$parent`获取到父组件实例

- `$children`获取到所有的子组件

#### 跨级

- `$root`获取根实例对象

- `$on和@event` 使用同一个父级,子集用on发送,父级用event监听

- 黑魔法vue1.0`bus`中央事件池.new一个vue让它作为中间人,基于on和event来处理

- 最终 vuex

### vue项目优化

- 按需加载-组建的懒加载,只有当用户访问该组件时才加载

- 打包的时候关闭远吗映射,可以提高打包速度

- 模块化代码复用

- 使用动态加载组件component

- 频繁切换的元素优先使用v-show

- 使用循环渲染的时候避免使用v-if

- 给大量子元素绑定事件的时候优先使用事件委托

- 使用精灵图优化加载小图标

- 使用骨架屏优化首屏加载慢的问题

### 自定义(指令,过滤器,插件开发)

#### 自定义指令directive

扩展vue没有的指令功能,举例:当页面打开后让input获取焦点

- 语法:

```js

diretives:{

  focus:{

    inserted(el,binding,olnode){

      //el是绑定的元素对象

      // binding是options,里面有value

      // oldnode旧的虚拟dom

    }

  }

}

```

#### 自定义过滤器filters

在不修改元数据情况下,对数据进行处理,返回新的数据.

- 语法:

```js

//声明

filters:{

  add(value){

    return value+666

  }

}

//使用

{{ n | add }}

```

#### 对象.install

vue的插件是一个综合的工能封装

- 语句:

```js

//声明 plugin.js

export default{
  install(val,option){
    //**** vue.filters
  }
}

//使用

Vue.use(plugin,{lg:true})

```

### v-model的原理

vue的底层原理,Object.defineProperty

### mixins混入

减少当前组建的代码体积的,把一些无关紧要的代码提取到外面,可以给其他组件进行复用.

混入是js代码复用

但是,他不要和全局使用,否则会冲突

- 如果混入里的值或函数和组件的重复了,一定用组件的

- 如果混入里生命周期和组件的重复了,先混入后组件,会合并掉

### spa 单页面应用

只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中

### el和 $mount

el比mount挂载的快,mount要等实例化后在挂载

### Vue.set方法

Object.defineProperty方法的缺陷导致动态添加或删除的属性不能被监听相应,所以采用这个方法

### 路由的底层原理

history和location.hash

### 路由的传参方式

- query 用?类似于get请求方式

- params 动态路由的动态字段

- hash 非hash模式下使用#传参,会被hash接收

- meta 原数据,原信息,路由配置的时候写死的

- router-view 属性传参,凡是被它渲染出来的路由组件都会接收props属性

### 路由拦截器

#### 全局守卫

- beforeEach 进入前的守卫,[做全局的路由权健]

- afterEach 进入后的守卫,没有next,上报日志.

#### 路由独享

- beforeEnter 确认进入前

#### 组件守卫

- beforeRouteUpdate更新 获取动态组件的字段

- beforeRouteLeave离开 用来确认用户离开行为,用于表单单页面

### 路由模式

history,hash是地址栏有`#`的.

### $router和$route的区别

router是new的vueRouter的实例对象,拥有路由的全部功能

route仅表示当前路由的信息

router包含route

### 跳转方式

- push 向历史记录中添加一条记录

- go 在历史记录中前进后退,值是数字

- back 后退

- forward 前进

- replace 用当前地址替换历史记录中最后一条

### 路由配置方式

- 动态路由 使用`/:name`

- 嵌套路由 使用children

- 别名路由 alias可以设置多个,用数组包裹

- 冲定向 redirect

- 命名 name属性

### 路由组成部分

导航,视图,配置

### 路由组件懒加载

一个函数返回import函数加载组件

`()=>import('./component')`

### 监听滚动事件

scrollBehavior方法可以设置滚动条初始位置,当路由跳转的时候他会执行

### 声明式导航和编程式导航

声明式:`<rouoter-link>`

编程式:`this.$router.path`

### vuex工作流程

1.store里的state在组件中使用

2.组件使用dispatch调用action派发业务

3.action使用commit调用mutation

4.mutation调用state进行修改

5.当state修改后,store通知组件更新

### vuex组成部分

- state

- getters

- mutations

- actions

- modules

- plugins

- strict

### 严格模式和非严格的区别

mutations只能运行同步代码,且只能在这里修改state

#### 非严格模式

state可以再任何地方修改,mutations也可以执行异步

### 辅助函数

- mapState

- mapGetters

- mapMutations

- mapActions

- createNamespacedHelpers

### mutation和action的区别

mutation是唯一修改state的,且只能运行同步代码

action专门用于处理异步操作,只能通过调用mutation修改state

### state和getter的关系

state相当于组件里的data,getters相当组件里computed

getters是基于state计算出来的

### vuex的模块化

modules用于大型项目开发,主要负责独立模块的独享状态管理

默认state和getter是归属于当前模块作用域的.但是mutation和action函数会自动提升到store对象下

所以需要开启命名空间,每个模块使用namespaced属性开启.

### axios封装

1.必须使用axios.create(),创建一个单独的实例

2.BaseUrl 设置公共的服务器地址

3.timeOut设置访问超时时间,默认5000ms

4.前置请求拦截器  

5.后置强求拦截器

### ul库的使用

pc:element-ui 最常用的组件,api,指令

`el-from,el-table,v-loading`这个指令是ele的,一般用于表格

移动:vant