vue相关知识

[better2021]

vue的eslint报错误 vue/html-closing-bracket-spacing 这个错误是保存格式化和eslint的规则有冲突,自关闭标签

添加以下规则到eslintrc.js中即可解决

'vue/html-closing-bracket-spacing': [
'error',
{
startTag: 'always' | 'never',
endTag: 'always' | 'never',
selfClosingTag: 'always' | 'never'
}
],

配置参考：https://eslint.vuejs.org/rules/html-closing-bracket-spacing.html

[better2021]

vue中的$set

当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

如下代码，给 student对象新增 age 属性

data () {
return {
student: {
name: '',
sex: ''
}
}
}

众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新

mounted () {
this.student.age = 24
}

原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。

错误写法：this.$set(key,value)（ps: 可能是vue1.0的写法）

mounted () {
this.$set(this.student.age, 24)
}

正确写法：this.$set(this.data,”key”,value’)

mounted () {
this.$set(this.student,"age", 24)
}

参考：

• https://www.jianshu.com/p/358c1974d9a5
• https://blog.csdn.net/panyang01/article/details/76665448

[better2021]

在动态组件上使用 keep-alive

我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件

<component v-bind:is="currentTabComponent"></component>

但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

参考 ：https://cn.vuejs.org/v2/guide/components-dynamic-async.html

[better2021]

EventBus

1.就是声明一个全局Vue实例变量 EventBus , 把所有的通信数据，事件监听都存储到这个变量上; 2.类似于 Vuex。但这种方式只适用于极小的项目 3.原理就是利用on和emit 并实例化一个全局 vue 实现数据共享

// 在 main.js
Vue.prototype.$eventBus=new Vue()

// 传值组件
this.$eventBus.$emit('eventTarget','这是eventTarget传过来的值')

// 接收组件
this.$eventBus.$on("eventTarget",v=>{
  console.log('eventTarget',v);//这是eventTarget传过来的值
})

[better2021]

路由传参

// 路由定义
{
  path: '/describe',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  path: '/describe',
    query: {
      id: id
  `}
)
// 页面获取
this.$route.query.id

[better2021]

动态组件

场景:做一个 tab 切换时就会涉及到组件动态加载

<transition>
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
</transition>

[better2021]

Vue.config.keyCodes

场景:自定义按键修饰符别名

// 将键码为 113 定义为 f2
Vue.config.keyCodes.f2 = 113;
<input type="text" @keyup.f2="add"/>

[better2021]

v-cloak

场景:在网速慢的情况下,在使用vue绑定数据的时候，渲染页面时会出现变量闪烁 用法:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

[v-cloak] {
    display: none;
}

[better2021]

v-once

场景:有些 template 中的静态 dom 没有改变,这时就只需要渲染一次,可以降低性能开销

<span v-once> 这时只需要加载一次的标签</span>

[better2021]

全局路由钩子

router.beforeEach((to, from, next) => {
  console.log('全局前置守卫：beforeEach -- next需要调用') //一般登录拦截用这个,也叫导航钩子守卫
  if (path === '/login') {
    next()
    return
  }
  if (token) {
    next();
  } 
})