vue相关基础知识点

key的作用
    key就是一个标识，被使用在Vue中。再详细一点，key被使用在Vue中的虚拟DOM中，并不会出现在真实DOM中。
    推荐使用数据的唯一标识作为key，比如id，身份证号，手机号等等，通常这些数据由后端提供。
    后续操作不破坏原来数据顺序的话，使用index作为key也没有任何问题。
promise实现原理
    处理异步操作
    正常异步函数，每增加一个异步请求，就会多添加一层回调函数的嵌套，过多的回调也就让我们陷入“回调地狱”，让代码变得不易阅读与维护
    mYpromise()
      .then(data => {
            return anotherAsync()
      })
      .then(data2 =>{
            return yetAnotherAsync()
      })
      .then(() => {
        // 完成
      })
     promise状态:
        pending（进行中）：等待状态，比如正在进行网络请求或者定时器没有到时间
        fulfilled （已成功）：满足状态，当主动回调了 resolve 时，就处于该状态，并且回调.then()
        rejected（已失败）：拒绝状态，当主动回调了 reject 时，就处于该状态，并且回调.catch()
    pending是对象创建后的初始状态，当调用resolve函数时变为fulfilled（成功）状态（可调用.then方法进行成功处理），当调用reject函数时变为rejected （失败）状态（可调用.catch方法进行失败处理）
flex:1全称 (flex-grow,flex-shrink,flex-basis)
    flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长
    flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小
    flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： - 如果包装器中有3个div，则每个div将占用33％。
虚拟dom优缺点
    1.虚拟dom比真实dom体积小,操作是相对来说消耗性能少,如果在页面中删除一个dom,会引起重绘,影响后边元素的布局
    2.虚拟dom进行频繁的修改,然后一次性比较并修改真实DOM中需要改的部分,最后并在真实DOM中进行回流和重绘,减少过多DOM节点的回流和重绘
    3.真实Dom频繁的回流和重绘效率非常低
    vue怎么使用虚拟dom
        所有的template都仅有ibu编译成render,render()会根据当前的数据项，生成虚拟dom，再从虚拟dom转为真实DOM

    虚拟DOM有那些属性
        {
              children: undefined, // 子节点，undefined表示没有子节点
              data: {}, // 属性样式等
              elm: undefined, // 该元素对应的真正的DOM节点，undefined表示它还没有上树
              key: undefined, // 节点唯一标识
              sel: 'div', // selector选择器 节点类型（现在它是一个div）
              text: '我是一个容器' // 文本内容
        }

    找出新旧DOM树存在差异的地方，只针对这一块区域进行重新渲染， Diff 算法应运而生，diff 取自 different (不同的)，Diff算法的作用，总结来说，就是：精细化比较，最小量更新。

vue常用封装组件  （列表样式，弹窗，提示消息，表格...）

vuex 5种属性（state、getters、mutations、actions、modules。）
    1、state：vuex的基本数据，用来存储变量    
        this.$store.state.
    2、geeter：从基本数据(state)派生的数据，相当于state的计算属性
    3、mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。
        回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。
        this.$store.commit(‘mutations方法名’,值)  同步
    4、action：和mutation的功能大致相同，不同之处在于==》1.Action提交的是mutation，而不是直接变更状态。2.Action可以包含任意异步操作。
        this.$store.dispatch(‘mutations方法名’,值)  异步操作
    5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
        模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
v-model原理
    v-model底层原理实际上是分别利用了v-bind用来绑定value的值，用v-on去绑定input标准事件，这是事件用来监听当输入域内容发生变化的时候来执行一些事情。
    具体做的事情就是通过$event这个事件对象获取到最新的输入域的值，然后把最新的值赋值给旧的值，从而进行数据的更新。这样的话就完成了双向数据绑定。
    v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
        1、v-bind绑定一个value属性；
        2、v-on指令给当前元素绑定input事件。
vue自定义指令
    Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数
        / 注册一个全局自定义指令 `v-focus`
            Vue.directive('focus', {
                  // 当被绑定的元素插入到 DOM 中时……
                  inserted: function (el) {
                        // 聚焦元素
                        el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
                  }
            })
        局部注册通过在组件options选项中设置directive属性
            directives: {
                  focus: {
                    // 指令的定义
                        inserted: function (el) {
                              el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
                        }
                  }
            }
        使用<input v-focus />
        bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
        update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
        componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
        unbind：只调用一次，指令与元素解绑时调用
    自定义指令可以接收三个参数（el,binding,vnode）
        el：指令所绑定的元素，可以用来直接操作 DOM。
        binding：一个对象，包含以下属性：
            name：指令名，不包括 v- 前缀。
            value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
            oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
            expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
            arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
            modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
    vnode：Vue 编译生成的虚拟节点。
单页面和多页面应用的优缺点
    概念：就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
    浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。单页面的跳转仅刷新局部资源。
    因此，对单页应用来说模块化的开发和设计显得相当重要。
    优点
        1、提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可移植性和可访问性。
        2、单页应用的内容的改变不需要重新加载整个页面    
        3、单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
        4、单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
        5、良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端
    缺点：
        1、首次加载耗时比较多。
        2、SEO问题，不利于百度，360等搜索引擎收录。
        3、容易造成Css命名冲突。
        4、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。

处理接口相关使用接口拦截器

定义自己的命名规范，class命名，函数命名，变量命名...