vue常见知识点总结二

1、对vuex的理解

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
使用vuex进行统一的状态管理，可以解决不同组件共享数据的问题以及不同视图需要变更同一状态的问题。

vuex的使用
1、安装引入 npm install vuex --save
2、注册到vue中

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

3、实例化vuex的store

const store = new Vuex.Store({
    state: {
        count: 0,
        title:'vuex中的title'
    },
    mutations: {
        increment(state,count) {
            state.count=count
        }
    }
})

4、挂载在vue实例上

new Vue({
    store
})

5、在组件中就可以通过this.$store对vuex进行操作。
vuex的核心模块

1、state：状态的初始化，通过this.$store.state获取变量2、getters：初加工，通过this.$store.getters获取变量
3、mutations： 修改state中的值，通过this.$store.commit调用

4、actions：可以包含异步操作，修改state数据，不可以直接修改，需要触发mutations修改，actions通过this.$store.dispatch调用。
5、modules：模块化。状态会集中在一起，导致难以维护，可以通过module对store进行拆分，每个模块都有自己的state、mutations等。

2、对混入(mixin)的理解

mixin混入是一种vue组件分发服用功能的一种方式。将组件公共部分可以封装成一个mixin对象，在需要的组件可以引入该对象。
混入对象可以包含组件的任意选项，例如生命周期、数据、方法等

注意事项：
1、数据：混入对象的data数据、methods方法、compoments的优先级低于组件本身的，组件本身的会覆盖混入的。（组件生效）
2、钩子函数：混入对象的created、mounted生命周期的优先级高于组件本身的，但是会合并程一个数组，混入的钩子函数先调用，组件本身的后调用。（都生效）
3、对象：例如methods,components等。会被合并为一个对象，对象键名冲突时，组件覆盖混入的。（组件生效）

3、对插槽(slot)的理解

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码。
插槽分为默认插槽和具名插槽

默认插槽 <slot>

//子组件
<template id="mycontent">
    <div>
      <!-- 默认插槽 -->
      <slot></slot> 
      <p>文本内容</p>
      <p>文本段落</p>
    </div>
  </template>
//父组件
<mycontent>
   <!-- 默认插槽 -->
   <template>
     <h1>我是默认插槽</h1>
   </template>
 </mycontent>

具名插槽 <slot name=“header”></slot>
父组件中需要利用v-slot指定是哪个插槽

<div id='app'>
    <mycontent>
      <!-- 注意事项：不是=号 -->
      <template v-slot:header>
        <h1>我是头部标题</h1>
      </template>
      <template v-slot:footer>
        <h1>我是尾部</h1>
      </template>
    </mycontent>
  </div>
//子组件
  <template id="mycontent">
    <div>
      <div><slot name="header"></slot></div>
      <p>文本内容</p>
      <p>文本段落</p>
      <div><slot name="footer"></slot></div>
    </div>
  </template>

4、跨域及解决方法

跨域：基于浏览器的同源策略，当浏览器和服务器的协议、主机、端口号有任何一个不一致时会产生跨域。
解决：
1、配置代理，proxy代理不受同源策略的限制。
2、后台不做限制，放开所有请求。优点：方便 缺点：不安全
3、JSONP：原理是利用了script标签不受同源策略限制，需要后端配合

5、对封装请求的心得

封装请求会有以下好处：

1. 提高代码的复用性
2. 提高代码安全性
3. 便于修改增加可维护性
4. 简化外部调用，便于开发
5. 符合高内聚低耦合特性