知识点总结

angular和vue的对比

1、1.体积和性能
相较于vue，angular显得比较臃肿
2.开发效率
组件化开发 angular凭借 Typescript 本身比 JavaScript 更加工程化的优势，在都是团队开发的情况下，angular会更具优势。
3.灵活性
Vue 相比于 Angular 更加灵活，可以按照不同的需要去组织项目的应用代码。
4.可维护性
一是代码的可读性，二是可重构性。
—————————————————————————————

angular核心

依赖注入
语义化标签
模块化开发
自动化双向数据绑定
mvvm
——————————————————————————————
ngOnChanges - 当数据绑定输入属性的值发生变化时调用
ngOnInit - 在第一次 ngOnChanges 后调用
ngDoCheck - 自定义的方法，用于检测和处理值的改变
ngAfterContentInit - 在组件内容初始化之后调用
ngAfterContentChecked - 组件每次检查内容时调用
ngAfterViewInit - 组件相应的视图初始化之后调用
ngAfterViewChecked - 组件每次检查视图时调用
ngOnDestroy - 指令销毁前调用
—————————————————————————————
6.AOT（Ahead-Of-Time）运行前编译

应用需要在浏览器运行前被compile。

Angular会先生成JS代码，compile，都是在build time编译的，而非runtime。

优点：更快下载速度、更少HTTP请求、更快渲染速度、更稳定（构建时检测错误）
—————————————————————————————
9.延迟加载（lazy loading）

全部加载会产生巨大的性能开销，延迟加载可以只加载用户正在交互的模块，其余模块按需加载,这部分可以结合路由懒加载
—————————————————————————————
相较于vue，
angular的优点:
1.开发效率更高
2.可维护性可强
3.对java和c使用者更友好
缺点：
1、体积大
2、灵活性差，不能随心所欲的选择使用方式
3、学习曲线陡峭
4、国内使用热度不及vue
————————————————————————————
Rxjs
解决异步的方式
1、回调函数
2、promise
3、rxjs 可以多次next,可以撤销subscibe
————————————————————————————
ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？
这时候如果用ng-repeat来循环的话,就会报错…官网给出的解决办法是 ng-repeat = ‘n in [4,5,4,6] track by $index’
这样就不会报错了.能完美输出重复的数组元素了
—————————————————————————————
angular投影

<div>
    <ng-content select="h1"></ng-content>
</div>
 <div>
     <ng-content select="app-content-part-b"></ng-content>
 </div>
 <div>
    <ng-content select=".span"></ng-content>
 </div>

——————————————————————————————
在Angular中有三种类型的指令
标签：组件（Components）：组件其实是一个带模板的指令。它是这三种指令中最常用的，我们在构建应用程序时会写大量组件。
属性指令：用作元素/组件的外观、样式、行为。
NgClass：向HTML元素中添加或删除多个css class类
NgStyle: 添加或删除HTML样式
NgModel：adds two-way data bindng to an HTML form element
结构化指令：用于通过删除和添加DOM元素来更改DOM布局。这些指令在更改视图结构方面要好得多。
Nglf：conditionlly creates or disposes of subviews from the template
NgFor: repeat a node for each item in a list
NgSwitch: a set of directives that switch among alternative views
——————————————————————————————
绑定语法（binding syntax）
数据绑定：{{ }} braces, 从data source到view target的one way绑定
属性绑定: [ ] square brackets, 从data source到view target的one way绑定
事件绑定: ( ) parentheses, 从view target到data source的one way绑定
双向绑定：[( )] two-way
—————————————————————————————

什么是MVVM？

MVVM是一种设计思想。Model 层代表数据模型,View 代表UI 组件，它负责将数据模型转化成UI 展现出来
ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，
Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
—————————————————————————————
{ path: '**', component:DashboardComponent} 放到该层级的第一个组件
————————————————————————————

vuex有哪几种属性

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
   ——————————————————————————————

Vue中的组件通信方式

 一、props / $emit （最常用的组建通信方式）
 二、 $children / $parent 
 三、provide/ inject 
 四、ref / refs 
 五、eventBus 
 六、Vuex 
 七、$attrs与 $listeners 
 八、localStorage / sessionStorage

————————————————————————————

前端优化

1、减少http请求次数
2、避免重定向
3、减少dom树操作
4、iconfont
5、不要在body里面写样式
6、优化图片，可以将多个图片拼接起来
————————————————————————————

双向数据绑定原理

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
  set: function (value) {
    name = value;
    console.log('你取了一个书名叫做' + value);
  },
  get: function () {
    return '《' + name + '》'
  }
})
Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
console.log(Book.name);  // 《vue权威指南》

——————————————————————————————

watch 和computed

1、computed是计算属性，计算属性是一个函数，会根据变量计算出某个值，当变量发生变化时，它也会跟着变化
2、watch是监听，主要有deep,immediate，还看以看到oldvalue和newvalue
3、watch擅长处理一个数据影响多个数据，computed上场处理组件内某个值受到多个数据来源的影响，computed会缓存
——————————————————————————————

assets和static比较

共同点，都是存放静态资源，比如图片，iconfont等
放到assets里面，在打包的时候会对assets里面的资源进行压缩和编译，但是放在static里面就不会，会直接将static里面的数据存放到
投产包里面，所以放到static里面的文件最好是已经做过打包处理的文件
—————————————————————————————

各浏览器内核

IE—》Trident
Firefox—》Gecko
Chrome----》webkit
Opera —>Presto
360浏览器、猎豹浏览器内核：IE+Chrome双内核；

——————————————————————————————

v-for 要比v-if优先级

v-for 要比v-if优先级高，如果使用的时候需要先遍历出来，推荐使用computed
———————————————————————————————

ES6七种数据类型：

Number、String、Boolean、undefined、object、Null、 Symbol

其中object为引用类型(Data、function、Array等)。
symbol类型的值具有唯一性，是一个独一无二的值，每一个 Symbol 的值都不相等。相同参数 Symbol() 返回的值不相等
symbol类型的值具有唯一性，由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。
var n = Symbol(“uname”);
var obj = {
[n]:“tom” //字面量添加symbol属性，必须要用[]
};

console.log(obj);//{Symbol(uname): "tom"}

—————————————————————————————————

HTTP 状态码及含义

200 OK ，表明请求已经成功

302 Found,临时重定向。浏览器会重定向到这个URL，但是搜索引擎不会 对该资源的链接进行更新。
400 Bad Request，表示由于语法无效，服务器无法理解该请求。客户端不应该在未经修改的情况下重复此请求。
403 Forbidden，指的是服务器端有能力处理该请求，但是拒绝授权访问。该访问是永久禁止的，并且与应用逻辑密切相关
404 Not Found，说明服务器端无法找到所请求的资源。
500 表示所请求的服务器遇到意外的情况并阻止其执行请求。
502 服务器挂掉了的意思。
503 表示服务器尚未处于可以接受请求的状态。

—————————————————————————————————

vue常用修饰符

.prevent 阻止事件默认行为 =event.preventDefault()

.stop 阻止事件冒泡 = event.stopPropagation()

.self 事件仅作用于元素本身，子组件不会触发

.capture 事件侦听，事件捕获
—————————————————————————————————

params和query的区别

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
　　
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
—————————————————————————————————

vue项目开发中遇到的几个问题

1、使用elment或者mintUI库时，需要全局引入ui库的css文件；然后在修改自己样式时，需要将自己的css文件引入到main.js中才会生效，全局引用

3、axios使用，是需要一个qs的node模块，然后请求的数据格式是表单格式的，需要设置header的Content-Type格式

4、watch监听object时，需要进行深度监听，因为vue默认只监听data中的属性一级

5、写props时可以写成对象{ }，里面配置数据类型

6、axios请求是异步的，需要注意在其then之后操作，否则拿不到数据，此时可以保存axios返回的Promise对象，然后在Promise的then方法中做异步操作

7、使用事件总线传值时，$emit和$on方法是存在先后顺序的，
必须是$on事件监听的绑定要在$emit事件发送之前建立，否则就是能监听到事件，但是传递的值也会丢失，谨记

8、vue-cli打包后，图片资源的路径报错，出现双层static/css/static/mig路径，是打包的时候路径配置的不对。可以通过添加配置项publicPath:"…/…/"
—————————————————————————————————
vue中使用keepAlive组件缓存，如何清缓存（有些时候页面不需要缓存）
在路由的meta里面加上keepAlive:true/false 用于控制router-view

跨域解决办法

1、JSONP跨域
  jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
2、跨域资源共享（CORS）
  CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
  3、nginx代理跨域
  nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

9、WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。 原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

那你能讲一讲 MVVM 吗？
MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件，
ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。

简单说一下 Vue2.x 响应式数据原理
Vue 在初始化数据时，会使用 Object.defineProperty 重新定义 data 中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的 watcher)
如果属性发生变化会通知相关依赖进行更新操作

那你知道 Vue3.x 响应式数据原理吗？
Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。

Proxy 只会代理对象的第一层，那么 Vue3 又是怎样处理这个问题的呢？
判断当前 Reflect.get 的返回值是否为 Object，如果是则再通过 reactive 方法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次 get/set，那么如何防止触发多次呢？
我们可以判断 key 是否为当前被代理对象 target 自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行 trigger。

vue生命周期

beforeCreate 是 new Vue()之后触发的第一个钩子，在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。
created 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发 updated 函数。
可以做一些初始数据的获取，在当前阶段无法与 Dom 进行交互，如果非要想，可以通过 vm.$nextTick 来访问 Dom。
beforeMount 发生在挂载之前，在这之前 template 模板已导入渲染函数编译。而当前阶段虚拟 Dom 已经创建完成，即将开始渲染。
在此时也可以对数据进行更改，不会触发 updated。
mounted 在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom 节点，使用$refs 属性对 Dom 进行操作。
beforeUpdate 发生在更新之前，也就是响应式数据发生更新，虚拟 dom 重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
updated 发生在更新完成之后，当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。
beforeDestroy 发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。
destroyed 发生在实例销毁之后，这个时候只剩下了 dom 空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

你的接口请求一般放在哪个生命周期中？
接口请求一般放在 mounted 中，但需要注意的是服务端渲染时不支持 mounted，需要放到 created 中。

再说一下 Computed 和 Watch
Computed 本质是一个具备缓存的 watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。

当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。

Watch 没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开 deep：true 选项，

这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用 unWatch 手动注销哦。

说一下 v-if 和 v-show 的区别
当条件不成立时，v-if 不会渲染 DOM 元素，v-show 操作的是样式(display)，切换当前 DOM 的显示和隐藏。

组件中的 data 为什么是一个函数？
一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果 data 是对象的话，对象属于引用类型，会影响到所有的实例。

所以为了保证组件不同的实例之间 data 不冲突，data 必须是一个函数。

Vue 事件绑定原理说一下
原生事件绑定是通过 addEventListener 绑定给真实元素的，组件事件绑定是通过 Vue 自定义的$on 实现的。

在Vue2.0当中，当数据发生变化，它就会新生成一个DOM树，并和之前的DOM树进行比较，找到不同的节点然后更新。
但这比较的过程是全量的比较，也就是每个节点都会彼此比较。但其中很显然的是，有些节点中的内容是不会发生改变的，
那我们对其进行比较就肯定消耗了时间。所以在Vue3.0当中，就对这部分内容进行了优化：在创建虚拟DOM树的时候，
会根据DOM中的内容会不会发生变化，添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。

数据更新视图的重点是如何知道数据变了，只要知道数据变了，那么接下去的事都好处理。如何知道数据变了，其实上文我们已经给出答案了，
就是通过Object.defineProperty( )对属性设置一个set函数，当数据改变了就会来触发这个函数，所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了。