[TOC] ## 前言 不断更新中，请一直关注哦。 ## 列表 ### v-if 与 v-for的使用 一般我们习惯将v-for与v-if一起使用，官方建议将v-if写在容器上，而v-for写在遍历元素上，避免不需要的元素进行了列表渲染。 [官方链接](https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81) ### computed等生命周期函数支持数组格式 没有特别大的用途，知道就好，可以对其设置一个数组，数组中为需要执行的函数 ``` export default { ... created: [ function one () { console.log(1) }, function two () { console.log(2) } ] ... } ``` ### 组件属性多个数据类型，好处是可以更灵活的支持 那么，在使用的时候，只要根据不同的类型进行对应的解析即可。 ``` computed: { computedWidth () { let o = {} if (typeof this.width === 'string') o.width = this.width if (typeof this.width === 'number') o.width = this.width + 'px' return o } } ``` ### 不想在循环的时候多循环标签 ``` <template v-for="item in data"> </template> ``` ### prop属性早于可以data属性 data初始化可以指定用prop的部分，但需要做一定的判断。 但还是不建议在data里直接用prop做初始化，更加建议用生命周期处理这样的问题。 ### errorCaptured 生命周期函数 当你需要把子组件的渲染错误暴露出来，自己处理的时候，可以封装下。 ``` /** * 收到三个参数： * 错误对象、发生错误的组件实例 * 以及一个包含错误来源信息的字符串。 * 此钩子可以返回 false 以阻止该错误继续向上传播。 */ errorCaptured (err, vm, info) { console.log(err) // -> ReferenceError: consle is not defined ... console.log(vm) // -> {_uid: 1, _isVue: true, $options: {…}, _renderProxy: o, _self: o,…} console.log(info) // -> `mounted hook` // 告诉我们这个错误是在 vm 组件中的 mounted 钩子中发生的 // 阻止该错误继续向上传播 return false } ``` ### 封装对象属性与检测变化值 场景：当我们进行一系列的条件检测的时候，发现其执行的函数是一致的，比如任何搜索条件变化，都将导致加载数据loadData方法，那么我们将这些都封装到options对象中。watch可以帮我们做到这些。 ``` data(){ return { options:{ pageNo:1, pageSize:10, keyword:'', date: null } } }, watch:{ options:{ deep:true, handler(val){ this.loadData() } } } ``` 测试发现了问题，当页数不为第一页的时候，其他搜索条件发生变化，此时应该吧页数重置为1，而当页数本身发生变化时，不用执行这个操作。但是watch无法检测到前后的变化情况。为了解决这个问题，我们可以通过计算属性,有计算属性时，可以检测到前后的变化值。 ``` computed:{ newOptions(){ return JSON.parse(JSON.stringfy(this.option)) } }, watch:{ newOptions:{ deep:true, handler(val,oldval){ // 发生变化的时候 检测是否是页数的变化，如果不是 那么设置页数为1 if(val.pageNo === val.pageNo) this.option.pageNo = 1 this.loadData() } } } ``` ### vue轮播图技术选型 - [ vue-awsome-swiper简书连接](https://www.jianshu.com/p/4f92c4461e3d?utm_source=oschina-app) ### 手机端滚动效果的 - [better-scroll上手链接](https://www.jianshu.com/p/ed73f3784ce9) ### $nextTick的作用 它主要用于解决需要在dom变动之后获取某些内容或者位置或者样式。这是因为我们通过改变数据改变内容时，dom的变动不是实时的同步的，而是放到一个事件队列中，通过对比更新之后才会发生真的代码改变。 如果我们在这时需要马上拿到变化后的元素的变化，我们需要把相应的代码写到$nextTick内部，因为这个函数知道上次循环队列完成的时机。 ## 更多