VUE笔记
    —-03040506070809—-
    集中式通信事件—
    在emit与on的基础上加了一个事件中转站’bus’.(类似显示生活中的集线器)
    ‘bus’ 为vue的一个实例,实例里面可以调用emit,off,on这些方法
    var enentHub = new Vue()
    eventHub.$emit(‘add’, params)
    eventHub.$on(‘add’,params)
    enentHub.$off(‘add’,params)
    —-
    vuex
    基本用法：
    在state里面定义各种属性,页面或组件中,直接使用$store.state或者$store.getters
    来使用.如果想要改变状态state,就commit一个mutation
    —-
    js代码是如何被压缩的
    使用webpack中的optimization.minimizer来对代码进行压缩优化
    1.去除多余字符,空格,换行及注释
    2.压缩变量名,函数名及属性名
    —代码压缩库 UglifyJS3
    比如面向对象、原型链、闭包、es6、html5、css3，它们是前端的基础，
    需要烂熟于心。比如连闭包都解释不明白的，真的该好好下功夫在这些基础上。。
    对于前端框架，基本的特性，生命周期、组件、传值交互、路由、redux、vuex等等，
    基本都没有使用上的疑惑。比如面试官可能问，actions 和 mutations 有什么区别之类的。
    1、前端浏览器输入URL后发生什么？
    普通前端会回答，dns解析，获取html文件，解析DOM，渲染页面这么一个流程。
    其实过程复杂的很，比如一个dns解析阶段，它分为哪几步？解析的ip一定是一样的吗？每次都会进行dns解析吗？可能还需要了解cdn托管的一些问题。
    比如html文件获取，它是如何传输的？如何建立链接的？三次握手、四次挥手是什么？http协议端口是什么？为什么直接能访问一个html文件？
    2、前端性能优化？
    大多数前端，基本会说，减少http请求、压缩合并js以及css、图片懒加载的技术、防止回流和重绘、css放头部、js放底部。
    以上的说法对吗？完全正确！可是在这个过程中，我觉得缺少一种思考。
    比如减少http请求，可以从哪些维度上减少呢？比如合并http请求？比如合并资源？比如图片懒加载？http还有其他维度的优化吗？cookie优化？http请求和资源加载的区分优化？在webview中呢？和普通的浏览器的优化技术，又有什么区别？
    3、前端如何做性能监控、异常监控？
    性能监控，异常监控，基本在小公司，是没有实践基础的，可是在差不多的大厂中，他们会关注这个问题。
    首先是性能监控，应该从这么几个维度来说：一个是http的方面，在后端log日志，流入kafka，然后在kafka消费数据，可以准确的监控到哪些接口有异常？异常率是多少？
    另一个方面，是前端的 Performance 的api，在用户的实时使用的过程中，就会产生数据，这样就能实现页面性能监控。
    前端异常监控，首先要明白什么是异常，html、css这些东西，无非就是一个展示的问题，还不至于让页面白屏的事情发生，所谓的异常监控，其实就是js的异常监控。在前端领域，window.onerror是进行js异常的监听事件。并且要知道，它在IE中，是不支持的，所以IE的监控，要使用try catch 的方式进行捕获，比如我们可能还要注意到，遇到异步的时候，这个如何做try catch的异常捕获。
    最后一个是前端sdk埋点，直接开发一个js文件，统计用户的UV/PV分析等等，比如用户的转化率之类的，这一块个人没有什么特别的实践，各位可以在网上百度看看。
    4、前端安全方面
    这是一个高级前端必问的问题，说的是一个前端对整个前端安全的系统认知。
    我们必须理解这么几个方面：sql注入、xss、csrf、cookie安全、密码安全等等。
    sql注入，要理解sql注入的场景，它的原理是什么，当前的数据库的解决方案是什么？
    xss攻击，常见的攻击场景，什么类型的网站容易被xss攻击，整个流程的原理是什么？
    csrf攻击，其实就是一个钓鱼网站，要理解为什么会收到攻击，应该采取什么策略进行防御。
    cookie安全，要理解为什么用token，优势等。
    密码安全，主要是用户登陆，用户数据提交，加密，存入数据库的一整个流程。
    其次，其实还有http和https的问题等等
    5、http、https、http1.0、1.1、2.0、3.0的区别
    http这一块，其实是一个非常复杂的体系，要深挖的东西特别多。
    http进行非对称加密，得到https，这个过程是怎么样的？什么是CA证书？整个网站进行验证的流程是什么？
    http各个版本的区别是什么？解决了哪些问题？比如头部缩减的优化，那你了解这个优化的具体策略吗？缩减了什么？又增加了什么？要深挖细节。
    http的底层协议？tcp/ip协议的三次握手，四次挥手，具体是怎么通信的？什么叫满启动？甚至延伸到整个网络协议的领域，什么是socket？udp是干什么的？dns解析？ftp？以及不常用的其他协议？
    如果再进行扩展，计算机网络的7层结构？每一层做了什么事情？计算机组成原理，如何解析我们的代码等等
    1、源码
    最好要读一读某个框架的源码，最不济，也看看别人写的源码解读的文章，现在的趋势，基本是以react、vue为主。
    以vue为例，你得懂vue框架的整个周期，比如vue的初始化，发生了什么？vue的模板解析，是如何进行的？如何形成AST？render函数的生成？什么是依赖收集？什么是patch？数据更新策略等等。
    你也要懂得在这个过程中，混入mixins、$options，vuex、router他们各自如何通过这些api，实现各自的功能？
    源码的维度，可以试着从vue的体系、react体系、loadash、zepto这些库中下手，因为我们就是从这些框架以及js库，走过来的。
    2、可视化
    地图、echats、canvas、webgl、d3.js、three.js！
    上面是个人想要研究的关于可视化的一个个主题，虽然可视化不是本人的专长，可是因为之前在地图相关的公司待过，也算是沾了可视化的一点光。在面试饿了么的过程中，就提到了一个特殊的使用场景，就是关于地图的线路绘制，大批量数据的推送，以及性能相关的问题。
    以后，普通前端的技能，比如vue、react等等，大家都会，没有什么差异化的竞争，前端市场趋于饱和，更需要的是在某些方面专精的人才。
    3、跨平台
    flutter、react-native、weex、electron
    这是目前市场上，针对跨平台的一些解决方案，每一个框架，大致方向上，都解决了一定程度上的多端开发能力。
    首先需要明白的是，多端开发并不是万能的，也有一些我们开发中的痛点，无论rn、还是weex，都是给前端提供一些特殊的组件，实现开发能力。但是业务是多样的，需要也是多变的，对于没有提供的组件，或者api，我们前端开发人员，有些功能是没办法实现的。
    对于多端框架，更重要的是理解层面的东西，比如electron，就是要理解它的本质，就是使用node塑造一个桌面应用的容器，然后内部是一个webview。
    从面试的角度，面试官重视的不是这个东西怎么用的问题，一般会问一些内部原理，比如小程序和公众号的对比？底层实现方式？比如rn的编译解析过程是什么？如何把js编译为真正的ios、android应用。比如flutter的渲染机制，和rn这些渲染方式有什么不同？和普通的web网页又有什么区别？
    跨平台技术，flutter最近比较火，从找工作的角度，其实可以学学。electron这些桌面应用，本身不难，但是学过和没有学过，其实本身就是一种差异。
    4、工程化
    工程化这一块，是个人比较感兴趣的一个方向。自己也做过一些实践，但是只能说是工程化中的冰山一角。
    抛砖引玉，提一些我们可以探讨的点。
    1、前端项目标准？
    表现为库的选择？文件划分目录的规定？pc、mobile多端实践？ssr方案集成？
    2、组件库集成？
    组件库建设的目的？npm包的发布？
    3、脚手架工具？
    webpack编译优化？webpack打包构建优化？自我脚手架的工具使用？
    4、git提交规范commit-msg？代码检查规范eslint？
    5、前端性能监控？前端异常监控？前端用户埋点sdk？
    6、rap？jenkins？
    5、混合app交互
    jsBridge、性能提升方面、x5内核
    算是一个小的模块吧，我们得明白，jsBridge是如何做到h5和原生应用的交互？
    ios和h5的交互通信？window.webkit?是否同步？
    android和h5的交互？细节和ios有什么不同？
    webview在性能提升方面，可以做哪些？什么是离线包？
    腾讯x5内核的优势是什么？我们用了x5内核，可以避免什么问题？
    6、设计模式
    最后谈谈设计模式，算是一个高频的面试题。
    我们至少要知道以下这些设计模式的功能、代码实现、使用场景问题。
    单例模式、原型模式、工厂模式、观察者模式、策略模式、代理模式等等。

    Vue 前端面试题
    1. 谈谈你对MVVM开发模式的理解?
    答：MVVM分为Model，View,ViewModel这三者, Model代表数据模型,数据和业务逻辑都在Model层中定义;View代码UI视图,负责数据的展示;ViewModel负责监听Model中数据的改变并且控制
    视图的更新,处理用户交互操作.
    Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的关系,因此当Model中的数据发生改变时会触发View的刷新,View中由于用户的
    交互操作而改变的数据也会在Model中同步.
    这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护和操作即可,而不需要自己操作Dom.
    2. v-if 和 v-show有什么区别？
    答：v-if是真正的条件渲染,会控制这个DOM节点的存在与否,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,也是有惰性的,如果在初始渲染时条件为假,
    则什么也不做—直到条件第一次变为真时,才会开始渲染条件块.
    v-show 就简单多了,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS的‘display’属性进行切换. 当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省
    性能上的开销,当只需要一次显示或隐藏时,使用v-if更加的合理.
    3.你使用过Vuex么？
    答： Vuex是一个专门为vue.js应用程序开发的状态管理模式，每一个vuex应用的核心就是store(仓库),‘store’基本上就是一个容器,它包含着你应用中大部分的状态(state).
    1)vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应地得到高效更新；
    2)改变store中的状态的唯一途径就是显示地提交(commit)mutation. 这样使得我们方便地跟踪每一个状态的变化.
    vuex主要包含一下几个模块=>
    State => 基本数据,定义了应用状态的数据结构,可以在这里设置默认的初始状态.
    Getter => 从基本数据派生的数据,允许组件中Store中获取数据,mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性
    Mutation => 是唯一更改store中状态的方法,且必须是同步函数
    Action =>像一个装饰器,包裹mutations,使之可以异步,用于提交mutation,而不是直接变更状态,可以包含任意异步操作
    Module => 模块化vuex,允许将单一的store拆分为多个store且同时保存在单一的状态树中
    4. 说说你对SPA单页面的理解,它的优缺点分别是什么?
    答： SPA (single-page application) 仅在WEB页面初始化时加载相应的HTML，javascript和css,一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或者跳转,取而代之的是利用
    路由机制实现HTML内容的变换,UI与用户的交互,避免页面的重新加载.
    优点：
    用户体验好,快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;基于上面一点,SPA相对于服务器压力小; 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理.
    缺点：
    初次加载耗时多,为实现单页web应用功能及显示效果,需要在加载页面的时候将javascipt，css统一加载,部分页面按需加载.
    前进后退路由管理：由于单页面应用在一个页面中显示所有的内容,所有不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理.
    SEO难度较大：由于所有的内容都在一个页面中动态替换显示,所以在SEO上面有着天然的弱势.
    5. Class 与Style如何动态绑定？
    答: Class可以通过对象语法和数组语法进行动态绑定： :class = “{active:’isActive’, ‘text-danger’:hasError}” :class = “[isActive?activeClass:errorClass]”
    Style也可以通过对象语法和数组语法进行动态绑定.
    6. 怎样理解vue的单向数据流？
    答： 所有的prop都使得其父子prop之间形成了一个单向下行绑定,父级prop的更新会向下流动到子组件中,但是反过来则不行. 这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的
    数据流向难以理解.
    额外的,每次父级组件发生更新时,子组件中所有的prop都将会刷新为最新的值. 这意味着你不应该在一个子组件内部改变prop,如果你做了,vue会在浏览器控制台发出警告.
    子组件想修改时,只能通过$emit派发一个自定义事件,父组件接收到后,由父组件修改.
    7. computed 和watch的区别和运用的场景？
    答： computed：计算属性,依赖其他的属性值,并且computed的值有缓存,只有它依赖的属性值发生改变,下一次获取computed的值时才会重新计算computed的值.
    watch: 更多的是‘观察’的作用,类似于某些数据的监听回调,每当监听的数据发生变化时都会执行回调进行后续操作;
    运用场景：
    当我们需要进行数值计算,并且依赖于其他数据时,应该使用computed,因为可以利用computed的缓存特性,避免每次获取值时,都要重新计算.
    当我们需要在数据变化时执行异步或开销较大的操作时,应该使用watch,使用watch选项允许我们执行异步操作(访问一个api),限制我们执行该操作的频率,并在我们得到最终结果前，设置中间状态,这些都是计算属性无法做到的.
    8. 直接给一个数组项赋值,Vue能检测到变化吗？
    答： 由于JavaScript的限制,Vue不能检测到以下数组的变动：当你利用索引直接设置一个数组项时, 当你修改数组的长度时,为解决以上问题,vue提供了以下操作方法:
    Vue.set (vm.$set) vm.prototype.splice
    9. 谈谈你对vue生命周期的理解？
    答： vue实例有一个完整的生命周期,从开始创建,初始化数据,编译模板,挂载dom,渲染,更新,渲染,卸载等一系列过程,我们称之为vue的生命周期.
    1. beforeCreate
    2. created
    3. beforeMount
    4. mounted
    5. beforeUpdate
    6. updated
    7. beforeDestory
    8. destoryed
    10. vue的父组件和子组件生命周期钩子函数执行顺序？

    VUE面试题专题

    1. active-class是哪个组件的属性？嵌套路由怎么定义?
      回答: active-classs是 vue-router模块router-link组件中的属性,用来做
      选中样式的切换.
      嵌套路由:路由的多层嵌套. 给组件添加子路由
      {
      path: ‘/me’,
      name: ‘Me’,
      component: Me,
      children:[
      {
      path: ‘collection’,
      name: ‘Collection’,
      component: Collection,

      1. },
      2. { 
      3. path: 'trac',
      4. name: 'Trace',
      5. component: Trace
      6. }
      7. ]


    2. }

    3. 怎么定义vue-router的动态路由？ 怎么获取传过来的动态参数？
      回答： 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向
      同一个组件,这时候从不同组件进入到一个’共用’的组件,并且还要传参数,渲染
      不同的数据—这就要用到动态路由跟路由传参了.
      routers:[
      {
      path:’/List/List/:id’, //动态路由信息
      component:List
      }
      ]
      属性 :id 可以进行修改, :id 可以中$route.params.id 获取
      当router-link被激活点击时,会将当前的to的值push到router对象当中(路由栈),
      所以这个值可以是string也可以是obj

      Child
      — 不同的组件过来的,可以设置不同的id值,只要在目标组件获取属性id的值就可以了,
      参数就利用query. 属性值来获取

    4. vue-router有哪几种导航钩子？
      回答：3.1 全局导航钩子 —前置守卫
      router.beforeEach((to,from,next) =>{
      })
      3.1 全局导航钩子 —后置钩子
      router.after((to,form)=>{
      })
      3.2 单独路由独享钩子
      {
      path:’/home’
      name:’home’
      component: Home
      beforeEach((to,from,next) =>{

      1. })


    5. }
      3.3 组件内钩子
      beforeRouteEnter(to, form, next){
      //do something
      //在渲染该组件的对应路由被confirm 前调用
      },
      beforeRouteUpdate(){
      //do something
      //在当前路由改变,但是依然渲染该组件时调用
      },
      beforeRouterLeave(to, from, next){
      //do something
      //导航离开该组件的对应路由时被调用
      },
      3.4 全局解析守卫
      router.beforeResolve 注册一个全局守卫,和router.beforeEach类似

    6. scss是什么？使用步骤是？有哪几大特性？
      回答： Sass是专业级CSS扩展语言.
      SASS用法指南—阮一峰—
    7. mint-ui是什么？ 怎么使用？ 至少说出三个组件的使用方法？
      回答: mint-ui 是基于vuejs的移动端组件库
      使用和组件 —Mint UI 官网 —
    8. v-model是什么？ 怎么使用？ vue中标签怎么绑定事件？
    9. axios是什么？ 怎么使用？ 描述使用它实现登录功能的流程？
    10. axios + tp5进阶中,调用axios.post(‘apuser’)是进行什么操作？ axios.put(‘api/user/8’)呢？
    11. 谈谈对Vue路由的理解？
    12. 谈谈你对Vue钩子函数的理解？
    13. 如何让css只在当前页面起作用？
    14. created和mounted分别什么时候用？
    15. vue和angular分别采用什么技术实现双向数据绑定？
      14.描述下vue从初始化页面—修改数据—刷新页面UI的过程？
    16. created和mounted的区别？
    17. vue中的watch, methods和计算属性的区别是什么？
      17.vue中怎么重置data？
      18.vue组件中写name选项有什么作用？
    18. vuex有哪几种属性？
      20.vue的优点是什么？

    21.说出至少4种vue当中的指令和它的用法/
    22.vuex的getter特性是什么？
    23.vuex的mutation特性是什么？
    24.vuex如何区分state是外部直接修改,还是通过mutation方法修改的？
    25.不用vuex会带来什么问题？
    26. v-show和v-if的区别
    27.class与style如何动态绑定？
    28.说说vue中的事件修饰符
    29.vuex的store特性是什么/
    30.
    ——
    Vue笔记
    1.测试Jest
    1.1组件测试
    1.2集成测试
    1.3API测试
    2.组件
    2.1 组件库引入
    2.2 原生组件编写
    2.3 高阶组件
    2.4 组件通信
    3.mock模拟数据
    4.api管理
    5.路由管理vue-router
    6.状态管理vuex
    7.过滤器
    8.工具 api请求封装
    9.提升代码编写效率
    9.1使用Sass
    9.2使用PUG
    10.资源管理
    10.1 字体
    10.2 图标
    10.3 图片
    10.4 样式
    11.生命周期
    12.代码风格
    12.1 eslint
    12.2 prettier
    13. SSR原理应用
    *了解 npm/yarn/git/sass/pug/vue/vuex/
    vue-router/axios/mock/ssr/jest 的使用和原理。
    ——
    用vue构建一个项目