2019.12.19

甲、webpack 
    1.配置
        1.1.entry 入口 构建项目的起点，默认./src/index.js
        1.2.output 输出的文件和输出的目录 默认./dist
        1.3.loader 对非js文件处理成webpack能处理的模块，例如sass
        1.4.plugins 附加插件列表 对webpack的拓展
        1.5.chunk 将公共模块打包成单独的chunk
    2.概念
        webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，更好的优化静态资源。
    3.基本功能
        3.1代码优化 ts->js,scss->css
        3.2文件压缩
        3.3代码分割
        3.4模块合并
        3.5代码校验
        3.6自动发布
    4.原理
        将所有依赖打包成一个bundle.js,通过代码分割成单元片段按需加载。
    

乙、vue打包优化
1.路由懒加载 const article =()=> import('@/components/Article')
2.启用Gzip 在 config 中将 build.productionGzip 设置为 true
3.将依赖挂载到CDN,然后在webpack.base.conf.js移除对这个库的依赖

丙、gulp和webpack的异同
1.gulp是工具链、构建工具。可以配合各种插件做less编译等，代替手工实现自动化
    webpack是文件打包工具，可以把各种js,css文件打包成一个文件，主要用于模块化方案
2.可以结合起来使用，实现前端自动化

丁、v-show和v-if的异同
1.v-show是全部渲染，然后切换css控制显示隐藏
    v-if是真正的条件渲染
2.所以v-show适合需要频繁切换的组件
    v-if适合很少改变的场景

戊、computed和watch的异同
1.一个数据受多个数据影响 用computed
2.一个数据影响多个数据 用watch

己、vuex及其各部分的使用
1. 4个部分
    state 共享数据的存储
    mutation 注册改变数据状态
    getters 对共享数据进行过滤处理
    action 异步改变共享数据
2.src下建vuex文件 分别创建
    index.js
    mutation.js
    state.js
    getters.js
    action.js
3.在index.js中import四个特性，
    再export Vuex.store的这四个特性的实例化
4.state如何用？
    4.1.先在state.js 声明
    export default{
        title:'首页'
    }
    4.2.在index.html
    import store from "./vuex"
    new Vue({
        ...
        el:'#app',
        store,
        ...
    })

    new Vue({
        el:'title',
        computed(){
            return store.title
        }
    })
    最后 在index.html   <title>{{title}}</title>
5.matutions 如何用？
    5.1.场景：改变顶层的共享数据时
    5.2.注意：不适合跨页使用
    5.3.首先 在state.js
    export default{
        START_PARMA:{},  //用来存放连接参数的数据
        title:'首页'
    }
    5.4.接下来 在mutations.js中
    export default{
        getParam(state,Object){
            state.START_PARMA=Object
        }
    }
    export default{
        name:'adv',
        created(){
            const keyCode = sessionStorage.keyCode =getQueryString('keyCode')
            this.$store.commit('getParam,{
                keyCode
            })
        }
    }

6.getters如何用？
    6.1getters是对state数据的一些过滤和改造
    6.2在state.js中
    peole:[
        {name:'zis',age:21},
        {name:'ziss',age:31},
    ]
    6.3 筛选出30岁以上的 在getters.js中
    export default{
        changePeople:(state)=>{
            return state.people.filter(item=>{
                if(item.age>30{
                    return true
                })
            })
        }
    }
    6.4在组件中
    created(){
        console.log(this.changePeople)
    },
    computed:{
        changePeople(){
            return this.$store.getters.changePeople
        }
    }
7.action 如何用？
    7.1action异步改变state数据  matutions是同步操作的
    7.2 在action.js中
    export default{
        getParamSync(context,Object){
            setTimeout(()=>{
                context.commit('getParam',Object)
            },3000)
        }
    }
    7.3在组件中
    this.$store.dispatch('getParamSync',{
        keyCode
    })
8.vuex用在哪里比较好？
    只适合 一个视图内组件之间组合传递  不适用于跨页，跨页用sessionStorage,localStorage

庚、组件之间传参
1.父传子 props
2.子传父 $emit
3.兄弟组件 eventBus

辛、如何解决跨域问题
1.CROS  也就是加一个请求头
2.Jsonp 只支持get请求  需要前后端都设置

壬、es6 es7
1.声明 let、const 块级作用域、不存在变量提升、暂时性死区、不允许重复声明
        const 声明常量
2.结构赋值
3.异步解决方案：
    promise
    generator:
        yield:暂停代码
        next()继续执行代码
        例如：
        function helloWorld(){
            yield 'hello';
            yield 'world';
            yield 'end';
        }
        const generator = helloWorld();
        generator.next(); //{value:'hello',done:false}
        generator.next(); //{value:'world',done:false}
        generator.next(); //{value:'end',done:true}
        generator.next(); //{value:undefined,done:true}
4.await/async 是generator的语法糖，babel中是基于promise实现的
    例如：
    async function getUserByAsync(){
        let user =await fetchUser();
        return user;
    }
    const user = await getUserByAsync()
    console.log(user)

癸、vue-router
    1.mode
        hash
        history
    2.跳转
        this.$router.push()
        <router-link to=""></router-link>
    3.占位
        <router-view></router-view>

甲、html语义化
    1.意义：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读、便于seo优化、便于浏览器解析、当css没有加载出来时，也能有基本呈现页面内容
    2.方法：
        2.1.少用无语义的div span
        2.2.多用header、footer、article、aside、nav,section等
        2.3.使用table时设置caption thead 主体用tbody包围
        2.4.表单用fieldSet包起来 

乙、cookie,sessionStorage,localStorage的异同
    1.相同点：都保存在浏览器端 且同源
    2.区别：
        cookie:数据始终在同源http请求中携带，在浏览器和服务器间来回传递
        sessionStorage和localStorage不会自动把数据发给服务器，仅本地保存。
        时间：
        sessionStorage存储时间较短，是会话级存储。
        localStorage一直保存，需要手动清除。
        cookie 在设置的过期时间前有效
        大小：
        cookie只有4kb
        sessionStorage和localStorage容量大
    3.场景：
        localStorage:用于长期登录
        sessionStorage：用于敏感账号一次性登录
        cookie:用于与服务器交互
    
丙、router和route的区别
    1.$route对象表示当前的路由信息
        主要方法有：
        $route.path 获取当前路径
        $route.params 获取路由参数
        $route.query 查询url参数
        $route.hash 获取路由hash值 #后的值
        $route.name 获取路由名字
    2.$router对象是全局路由的实例，是router构造方法的示例
        路由实例的方法：
        1.push 跳转
            this.$router.push('home')
        2.go 跳转
            this.$router.go(-1) //后退
        3.replace 重定向
        this.$router.replace('/')  //replace一般用在404页

丁、什么是插槽 slot ？
    1.插槽允许你定义可封装和接受子DOM元素的元素，在模板中使用<slot></slot>
    2.例如：
    2.1 在Post.vue 
    <template>
    <div class="hello">
    <h3 class="title">{{title}}</h3>
    <div class="content">
        <slot></slot>
    </div>
    </div>
    </template>
    2.2 在app.vue中使用post组件
    <template>
        <div id="app">
            <Post title="Hello from Vue!">
                Vue 是用于构建用户界面的渐进框架。
             </Post>
        </div>
    </template>
    3.最后这句话会显示在slot元素上

戊、vue-router 导航守卫
    1.全局守卫
        1.1.router.beforeEach 进入路由前
        1.2.router.beforeResolve 全局解析守卫 在 beforeRouteEnter 调用后
        1.3.router.afterEach 全局后置钩子 进入路由之后
        例如：
        在main.js
        import router from './router';
        router.berforeEach((to,from,next)=>{
            next();
        });
        router.beforeResolve((to,from,next)=>{
            next();
        });
        router.afterEach((to,from)=>{
            console.log('afterEach 全局后置钩子函数')
        })
    2.路由独享守卫
        如果不想配置全局守卫  ，可单独设置守卫
        例如：
        const router =new VueRouter({
            routes:[
                {
                    path:'/foo',
                    component:'Foo',
                    beforeEnter:(to,from,next)=>{
                        //...
                    }
                }
            ]
        })
    3.路由组件内的守卫
        3.1.beforeRouteEnter 进入路由之前，路由独享守卫还不能获取组件this时
        3.2.beforeRouterUpdate 路由复用同一个组件时，当前路由改变，但是组件被复用
        3.3.beforeRouteLeave 导航离开组件所在路由时

己、 git 基础命令
    1.创建dev分支
    git co(checkout) -b dev
    2.推送当前分支到远端
    git push
    3.查看分支状态
    git st(status)
    4.查看diff文件修改
    git diff
    5.提交本次修改
    git ci(commit) .
    6.拉取远端最新代码
    git fetch --all
    7.合并分支
    git merge origin/dev
    
庚、git与svn 异同
    1.git是分布式 ，svn是集中式的
    2.git是按元数据存储的，svn是按文件

辛、Babel
    babel是一个js编译器，将es6+向后兼容，以适应旧的浏览器。

壬、loader