心酸血泪前端路，不断成长任我行，零碎知识点笔记（vue踩坑日记）

vue中渲染数据

• 如果从接口中获取到的数据层级较深，或者需要嵌套渲染，不推荐使用 v-for="item in data[0].xxx" 的形式
• 可以通过 computed 将次级的数据解析出来，再拿去进行渲染（而且自带缓存，不必频繁获取数据）

数组方法

去重

• this.arr = [ ... new Set(this.arr) ]

合并

let arr = [1, 2, 3]
arr.push([4, 5])  // [1, 2, 3, [4, 5]]
let newArr = arr.concat([4, 5]) // [1, 2, 3, 4, 5] 返回新数组

String方法

padStart

• 用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度 ('1').padStart(2, '0') => '01'

watch监听器

• 要是想要监听对象数据类型下的某一个属性，可以：

watch: {
  'formData.id'() {
    ......
  }
}

vue数据响应式

@路径处理符

在js文件中，@/views/user @符代表的是src目录
如果要在css或html中使用@符，需要在@前面加上~

element-ui

input

• el-input 中有个@change 事件，是可以当失去焦点和键盘回车时触发，但是如果输入框里的值并没有发生改变，则blur 事件并不会被触发
• 如果组件没有封装的原生事件，例如@keyup 则需要使用.native 修饰符去触发到原生事件

tips: 这个 .native 是绑定的组件渲染的根元素上，如果组件封装时，外面嵌套了其他元素，则需要判断根元素是否包含这个原生事件

样式穿透

• 在vue组件中，当style加上了scoped属性时，会给对应的样式类名添加一个唯一的data-xxx属性以做唯一区分，但想控制对应组件的样式时，就控制不到了
• 这时候可以在样式类前加上 /deep/ 这时的data-xxx属性就会添加到样式类名前面，不会造成影响

/deep/ .el-button {
  color: red;
}

vuex使用双向数据绑定

• 因为vuex规定必须使用mutation来修改state里的数据，所以如果想要使用v-model绑定state里的数据，肯定不能直接v-model="$store.state.xxx"
• vue的官方文档里，computed计算属性包含了setter和getter，就可以借此特性对state进行双向绑定

computed: {
  fullName: {
    // getter
    get() {
      return this.$store.state.fullname
    },
    // setter
    set(newValue) {
      this.$store.commit('setName', newValue)
    }
  }
}

vant

flex-shrink

• flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩
• 我这里是不想将汉堡按钮压在标签栏上，van-tabs默认的是flex布局，并且子标签就将宽度平分占满了，所以这里想添加一个空div将最后的位置留出来
  

.placeholder {
  width: 66px;
  height: 82px;
  flex-shrink: 0;
}

记住列表滚动位置

• van-tabs下的列表组件滚动位置会相互影响，原因是它们并不是独立滚动，都是body在滚动
• 这有一段检测页面滚动元素的代码

function findScroller(element) {
  element.onscroll = function() { console.log(element) }
  Array.from(element.chilren).forEach(findScroller)
}
findScroller(document.body)

• 然后给列表组件添加 overflow-y: auto; 样式，让其独立滚动

Popup 弹出层

• vant 的弹出层时懒渲染的，既只有在第一次展示的时候会渲染里面的内容，而之后都是控制的显示与隐藏
• 如果想要每次打开弹出层拿到更新的数据，可以用 v-if 控制要更新的DOM节点

视口单位vw，vh

• 根据你浏览器的窗口大小指定，不受父元素的影响
• 1vw = 可视窗口的百分之一，以750为例，1vw = 7.5px

动态正则

// 参数1：匹配字符串  参数2：匹配模式
highLight(text) {
  const str = `<span style="color: #3296fa">${this.searchText}</span>`
  const reg = new RegExp(this.searchText, 'gi')
  return text.replace(reg, str)
}

自定义组件的v-model

• 有时我们既想传递给自定义组件数据又得修改，就得先传递一个prop，还得手动监听一个事件

<!-- 关注组件 -->
<follow-user-btn
  class="follow-btn"
  v-model="article.is_followed"
  :article-id="article.aut_id"
/>

• 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，可以通过 model 属性来修改这些默认配置

// 组件
model: {
  prop: 'isFollowed',
  event: 'update-is-followed'
}

// 更新数据时，只需要触发event事件传递参数即可
this.$emit('update-is-followed', !this.isFollowed)

• 如果是多个参数想要同样的效果，可以使用 .sync 修饰符，如果传入一个对象，会把对象中的每一个属性都作为一个独立的 prop ，并且为其绑定独立的 v-on 监听器，不能用于字面量的对象上，例，{ title: 'title' }
• v-bind.sync="obj" 如果要传对象，就直接调用 .sync 不需要在 v-bind 后面接名称

<follow-user-btn
  :article-id="article.aut_id"
  @update:title="doc.title = $event"
/>
<!-- 相当于以上代码的缩写 -->
<follow-user-btn :article-id.sync="article.aut_id" />

tips: 带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:article-id.sync="article.aut_id + 'a'" 是无效的)。

依赖注入

• 如果在一个页面中需要给许多子组件传递相同的数据，例如 id ，vue 给我们提供了一个好用的，可以直接给所有后代组件传递数据的方法
• 在根页面中定义 provide 属性来传递数据，在后代组件中用 inject 属性接收

祖先组件不需要知道哪些后代组件使用它提供的 property
后代组件不需要知道被注入的 property 来自哪里
tips: 不要滥用，不利于解耦，重构起来比较困难，并且不支持响应式

// 根页面
provide () {
  return {
    articleId: this.articleId
  }
}

// 后代组件
inject: {
  articleId : {
  	type: [Number, String, Object],
  	default: null
  }
}