VUE ElementUI 项目总结

时间 2019-11-29

标签 vue elementui 项目总结繁體版

原文原文链接

项目简介

vue + axios + vue-router + vuex + ElementUIhtml

vue

vue数据更新，视图不更新

只有当实例被建立时 data 中存在的属性才是响应式的，Vue 不能检测对象属性的添加或删除；
可使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性vue

Vue.set(vm.userProfile, 'age', 27)
this.$set(this.transportAddData.serviceOrderList[a].serviceOrderItems[i], 'deletePoundIds', [])
复制代码

vue 数据与方法
 vue 对象更改检测注意事项java

Vue 不能检测如下变更的数组：webpack

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

vue 数组更新检测ios

持续触发事件的优化

持续触发某个事件能够用函数的节流和防抖来作性能优化web

//防抖
function(){  
    ...
    
    clearTimeout(timeoutId);

    timeoutId = setTimeout(function () {
      console.log('content', content);
      player(content.msgTypeId, comId)
    }, 500);
    
    ...
    
}

// 节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，若是在执行中，则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

复制代码

javaScript的Throttling(节流)和Debouncing(防抖）vue-router

nextTick

在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。vuex

get() {
    this.$http.get('/api/article').then(function (res) {
        this.list = res.data.data.list
        // ref  list 引用了ul元素，我想把第一个li颜色变为红色
        document.querySelectorAll('li')[0].style.color = 'red'  //这里会报错-，由于尚未 li
        
        this.$nextTick( ()=> {
            document.querySelectorAll('li')[0].style.color = 'red'
        })
    })
},
复制代码

Vue.nextTick 的原理和用途编程

音频文件自动播放报错

谷歌浏览器（Chrome 66）音频自动播放报错axios

DOMException: play() failed because the user didn’t interact with the document first.
复制代码

解决方案：AudioContext

// Chrome
request.get('/baseConfig/messageAudio/play', {
    params: {
        "comId": Cookies.get('comId'),
        "msgTypeId": id
    },
    responseType: 'arraybuffer'   // 这里须要设置xhr response的格式为arraybuffer
    })
    .then(req => {
    
    ...
    
        let context = new (window.AudioContext || window.webkitAudioContext)();
        context.decodeAudioData(req.data, decode => play(context, decode));
                  
        function play (context, decodeBuffer) {
            sourceadio = context.createBufferSource();
            sourceadio.buffer = decodeBuffer;
            sourceadio.connect(context.destination);
            // 从0s开始播放
            sourceadio.start(0);
        }
    
    ...
    
})
复制代码

Chrome 66禁止声音自动播放以后
 AudioContext
AudioContext.decodeAudioData()

vuex

使用vuex修改state的方法和区别

能够直接使用 this.$store.state.变量 = xxx;
this.store.commit(commitType, payload)

相同点：可以修改state里的变量，而且是响应式的（能触发视图更新）
不一样点：若将vue建立 store 的时候传入 strict: true, 开启严格模式，那么任何修改state的操做，只要不通过 mutation的函数，vue就会报以下错

throw error :    [vuex] Do not mutate vuex store state outside mutation handlers。
复制代码

使用commit提交到mutation修改state的优势：vuex可以记录每一次state的变化记录，保存状态快照，实现时间漫游／回滚之类的操做。

dispatch 和 commit的区别在于:
使用dispatch是异步操做， commit是同步操做，
因此通常状况下，推荐直接使用commit，即 this.$store.commit(commitType, payload)，以防异步操做会带来的延迟问题。

vuex strict
vuex Mutation
vuex actions

vuex究竟是什么

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
复制代码

==vuex中的state本质上是没有template的隐藏的vue组件。==

vuex工做原理详解

axios

兼容问题

Edge 41.16299.15.0 post请求会自动转为get

microsoft-edge/platform/issues
vue 使用axios 在EDGE浏览器上面post请求变成了get请求

取消请求

场景：每次请求在拦截器中添加token，后台判断token是否过时；当进入一个页面时触发屡次请求，且正好token已通过期。这个时候须要第一次请求完成以后知道token已通过期则弹出提示、页面跳转到登陆、中止以后的请求；不然会由于屡次请求和axios响应拦截而屡次弹框提示。

解决方案
axios自带cancelToken 取消方法，而后在路由跳转后中止以前的请求

// 请求拦截中 添加 cancelToken
axios.interceptors.request.use(config => {
    config.cancelToken = store.source.token
    return config
}, err => {
    return Promise.reject(err)
})
 
// 路由跳转中进行判断
router.beforeEach((to, from, next) => {
    const CancelToken = axios.CancelToken
    store.source.cancel && store.source.cancel()
    store.source = CancelToken.source()
    next()
})


//sort文件/
state: {
    source: {
      token: null,
      cancel: null
    }
  }
复制代码

axios api
路由变化时使用axios取消全部请求
 vue项目中 axios请求拦截器与取消pending请求功能

存在问题：若是 token过时提示弹框为二次确认弹框，再次确认以后才会进行页面跳转，那么在点击确认以前，页面中以前的请求仍是会继续进行；
解决方案：给弹窗添加全局状态，根据状态判断是否须要弹出弹框

预检请求

CORS跨域
CORS须要浏览器和服务器同时支持。目前，全部浏览器都支持该功能，==IE浏览器不能低于IE10。==
浏览器将CORS请求分红两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求

请求方法是如下三种方法之一：
HEAD
GET
POST
HTTP的头信息不超出如下几种字段： Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

简单请求不会触发 CORS 预检请求。

非简单请求

当请求知足下述任一条件时，即为非简单请求：

使用了下面任一 HTTP 方法：
PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH
人为设置了对 CORS 安全的首部字段集合以外的其余首部字段。该集合为： Accept Accept-Language Content-Language Content-Type (but note the additional requirements below) DPR Downlink Save-Data Viewport-Width Width
Content-Type 的值不属于下列之一:
application/x-www-form-urlencoded
multipart/form-data
text/plain
请求中的XMLHttpRequestUpload 对象注册了任意多个事件监听器。
请求中使用了ReadableStream对象。

HTTP访问控制（CORS）

预检请求

非简单请求，会在正式通讯以前，增长一次HTTP OPTIONS方法发起的查询请求，称为"预检"请求（preflight）。以获知服务器是否容许该实际请求。 "预检请求“的使用，能够避免跨域请求对服务器的用户数据产生未预期的影响。
==该方法不会对服务器资源产生影响==

优化方案

Access-Control-Max-Age: <delta-seconds> //单位是秒。
复制代码

表示 preflight request （预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息）能够被缓存多久

Vue Router

push、replace的区别

push会向history添加新的记录，replace只是替换掉原来的记录，不会添加新的记录；这就致使了用replace方法跳转的页面是没法回到以前的页面的；(相似window.history)

vue Router 编程式的导航

路由懒加载

为了提高页面加载速度，实现按需加载，也就是当路由访问时才加载对应组件，咱们能够结合vue的异步组件和webpack的代码分割功能来实现路由的懒加载。

{
    path: '/iov/login',
    name: '登陆',
    component: resolve => require(['@/views/login/login'], resolve),
},
{
    path:'/iov/organization',
    name:'组织管理',
    component:() => import('@/views/enterprise/organization')
}
复制代码

vue Router 路由懒加载
 vue 异步组件
 vue + vue-router 懒加载 import / resolve+require

elementUI

表单弹窗中 elementform 清除验证残留提示

给表单添加不一样的 ref （REFNAME），若是有相同的ref 会致使残留验证提示清除失败

this.dialogTranspor = true
    //弹窗打开后 dom 没有生成，全部要用 this.$nextTick
   
    this.$nextTick(function () {
     
        this.$refs.REFNAME.resetFields();

      })
复制代码

页码数没法正常显示

场景：列表页在跳到详情或其余页面后再返回列表页，没法正常显示对应页数（页码数放在state中），但请求的数据时正常的;

解决方案：页码数、总页数必需要在同一个对象中，不然当前页码数不能正常显示

data() {
    return {
        //完成查询条件
        searchComplate: {        
        "comId": Cookies.get('comId'),
        "transportOrderCode": null,
        "orderCode": null,
        "customerId": null,
        "abnormal": 2,
        "startTime": null,
        "endTime": null,
        "pageNum": 1,
        "pageSize": 20,
        total: 0,
        currentRow: '',
        dataArea: ['', ''],
        activeName: '',
        expands: []
        },
    }
}
复制代码

动态多级表单验证

<li v-for="(item,index) in transportAddData.serviceOrderList">
 
    <template v-for="(subItem,subIndex) in item.serviceOrderItems">
    
        <tr >
                    
            <td>
              <el-form-item :prop="'serviceOrderList.'+index+'.serviceOrderItems.' + subIndex + '.addressName'"
                            :rules="{required: true, message: '卸货地不能为空', trigger: 'blur'}">
                <el-input v-model="subItem.addressName" placeholder="地址"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item :prop="'serviceOrderList.'+index+'.serviceOrderItems.' + subIndex + '.planTonnage'"
                            :rules="[{required: true, message: '必填项', trigger: 'blur'},{pattern: /^((([1-9]+(\d+)?)(\.\d+)?)|(0\.\d+))$/, message: '必须为正数且不为0'}]">
                <el-input v-model="subItem.planTonnage"
                          placeholder="预卸吨数"></el-input>
              </el-form-item>
            </td>
            ...
            
        </tr>
        
    </template>

</li>
复制代码