005
最后更新于：2022-04-02 05:35:45
[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
}
}
```
### 不想在循环的时候多循环标签
```
```
### 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内部，因为这个函数知道上次循环队列完成的时机。
## 更多
';