Vue小知识

1.$nextTick

在修改了data里的value后然后立即去获取该dom的值，是获取修改之前的旧值，如果使用$nexTick回调函数，则会在data值渲染到dom后才获取值。
例子：
<div ref="div1">{
   
   {msg}}</div>
data () {
        return {
        msg: 'Hello Div'
    }
}
在某一个函数里
getDivValue () {
    this.msg = 'Hello SAP'
    let str = this.$refs.div1.innerHTML
    console.log(str) //输出的是Hello Div
    this.$nexTick( () => {
        let str = this.$refs.div1.innerHTML
        console.log(str) //输出的是Hello SAP
    })
}

2.keep-alive

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页
面渲染完毕后不会被渲染成一个DOM元素
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"></component>
</keep-alive>
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <router-view></router-view>
</keep-alive>
include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓
存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。

3.provide和inject

provide和inject是成对出现的
作用：用于父组件向子组件传递数据

在父组件中使用provide，子组件使用inject

父组件：
provide () {
     return {
     // 刷新
     refresh () {
       this.$store.commit('common/updateContentIsNeedRefresh', true)
       this.$nextTick(() => {
       this.$store.commit('common/updateContentIsNeedRefresh', false)
     })
   }
 }
}

子组件：
inject: ['refresh']

4.router.push和router.replace

this.$router.push()
跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
比如：this.$router.go(-1)

this.$router.replace()
同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。
上一个记录是不存在的。

5.vuex namespaced

vuex.js
export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

vuex中的store分模块管理，需要在store的index.js中引入各个模块，为了解决不同模块命名冲突的问题，将不
同模块的namespaced:true，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名

比如同时有两个文件,common.js和user.js
在store的index.js里将其引入
在外部调用vuex的时候需要加上前缀
比如：this.$store.state.common.xxx或者this.$store.state.user.xxx