VUE杂记

$set

当数据是从 created 的生命周期中获取，会给数据身上绑定 getter/settet 的方法。
这是数据动态进行改变的前提，但当数据没有从这里面获取，想给属性设置 getter/setter 可以使用 $set 设置。

数组
    this.$set( Array, index, newValue )
对象
    this.$set( Object, key, newValue )

有时在数据深层次中，使用直接赋值会无法成功赋值，这时可以使用 $set 进行赋值。

利用 keep-alive 后退不刷新，前进刷新

keep-alive 包裹的组建或者路由可以使它进入缓存状态，可以利用这个机制做一个后退页面后不刷新。
在项目上有时遇到通过搜索等条件，查询到数据后，进行更改，更改完成后返回的还是刚开始搜索时的页面。
数据刷新，通过$emit来触发组件内的数据条件，即可刷新数据

//App.vue

<keep-alive :include="keepAliveComponents">
    <router-view></router-view>
</keep-alive>

//初始需要缓存的页面
data (){
    return {
        keepAliveComponents:['index']   //index为组件的名称，export default{ name: 'index' } 
    }
}

//监听路由，当路由进入index或者list时，index进行缓存，当进入其他路由时，index不进行缓存
watch: {
    '$route' (to, from){
        if(['Index', 'List'].includes(to.name)) {
            this.keepAliveComponents = ['index'];
        } else {
            this.keepAliveComponents = [];
        }
    }
}

include：字符串或正则表达式，只有名称匹配的组件会被缓存；
exclude ：字符串或正则表达式，任何名称匹配的组件都不会被缓存；
max：数字，最多可以缓存多少组件实例；

//router.js

import Index from './Index';
import List from './List';

routes: [
    {
        path: '/index',
        name: 'Index',
        components: 'Index' //或者 components:() => import('./Index')
    },
    {
        path: '/list',
        name: 'List',
        components: 'List' //或者 components:() => import('./List')
    }
]

持续更新中～～