# outline

**Repository Path**: gzh52107/outline

## Basic Information

- **Project Name**: outline
- **Description**: h52107课件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2021-10-18
- **Last Updated**: 2024-11-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 第三阶段

## day2-1

### 面试题
* v-show与v-if的区别
    > 实际开发中使用v-show还是v-if
    * v-show: 有频繁的切换需求使用v-show
    * v-if: 如一开始就确定一个元素的显示或隐藏，后期没有频繁的操作，则使用v-if



### 知识点
* 前端三大热门框架
    * Angular
    * React
    * Vue

* 工具库
    * jquery            $
    * lodash            _
    * underscore        _

* 版本
    * 按环境分
        * 开发版本      development
            * 提示
            * 未压缩
        * 生产版本      production
            * 压缩

* Vue的使用
    * 特点
        * 渐进式框架
        * 声明式设计
    * 架构分层
        * MVC
            * Model: 模型
                > 数据
            * View: 视图
                > html页面
            * Controller: 控制器
                > 控制如何把数据渲染到视图层
        * MVP
            * Model
            * View
            * Presenter 优化后的Controller
        * MVVM
            * M: Model
            * V: View
            * VM: ViewModel

    * 数据驱动
        * 关注点变化
            * 以前：节点操
            * 现在：只关注数据的变化（要修改页面内容，不需要直接操作节点，只需要在合适的时间修改数据就行）
        * 响应式属性
            > 可以监听到数据的修改，进而更新视图
            * 原理：存储器属性（getter&setter）
            * `Object.defineProperty(target,prop,descriptor)`
                * target
                * prop
                * descriptor    属性描述对象
                    * configurable  总开关，用于控制enumerable属性是否可被修改
                    * enumerable    可枚举
                    * get
                    * set
        * 双向数据绑定的原理
            * Model -> View: getter & setter
            * View -> Model: 事件监听

    * 页面渲染
        * 数据绑定
            * 单向绑定
                * 绑定到标签内容
                    * {{}}  插值
                * v-text
                * v-html
                    > 使用v-html是一定要确保html内容的安全性，避免xss攻击
                * 绑定到标签属性：v-bind
            * 双向绑定
                * v-model   一般用于表单元素
                    > `v-model="msg" = v-bind:value="msg" + v-on:input="msg=$event.target.value"`
        * 事件绑定：v-on
            > 格式：v-on:事件="事件处理函数"

    * Vue指令
        > 在指令中使用js语法
        * v-model: 双向数据绑定
            * View -> Model
            * Model -> View
        * 列表渲染：v-for
            > 通过遍历生成一个列表
            * v-for="<item> in <data>"
            * v-for="<item> of <data>"
        * v-bind
            > 可以用在任意属性，并对class和style属性进行了增强（支持数组与对象写法）
        * v-show: 用于控制显示/隐藏
            > 通过改变css的display属性实现显示隐藏
        * v-if/v-else/v-else-if
            > 通过创建和销毁节点的方式实现显示隐藏
        * v-text
        * v-html
    
## day2-2

### 复习
* Vue
    * 声明式设计
    * 渐进式框架
* 架构分层
    * MVC
    * MVP
    * MVVM
        * M: Model
        * V: View
        * VM: ViewModel
* 数据绑定
    > 把数据与视图进行绑定
    * 单向绑定
        * {{}}
        * v-text
        * v-html    
        * v-bind
    * 双向绑定
        * v-model = v-bind:value + v-on:input
* 响应式属性
    > 属性的修改，会被监听到，进而刷新视图
    * 原理：getter&setter
        * Object.defineProperty(target,prop,descriptor)
* 指令
    > 自定义的html属性
    * v-model
    * v-bind
    * v-text
    * v-html
    * v-on
    * v-for
    * v-show
    * v-if/v-else/v-else-if

### 知识点
* 锻炼以下几种能力
    * 整理知识点的能力
    * 查看文档的能力
        * 技术文档
        * 需求文档
    * 描述问题的能力
    * 查找和解决问题的能力
* ref
    > this.$refs.xxx获取ref引用
* 事件绑定
    * event事件对象
    * 事件修饰符
        > 格式：v-on:keyup.修饰符="事件处理函数"
        * 鼠标修饰符
        * 按键修饰符
        * v-model修饰符
    * 简写：v-on:click -> @click
* 数组的响应式
    > Vue给数组重写原型对象，并添加一些变更方法实现响应式
    * pop()
    * push()
    * shift()
    * unshift()
    * splice()
    * sort()
    * reverse()
* computed 计算属性
    > 具有**缓存特性**，只有在初始化和依赖发生变化时才重新执行里面的代码，一般用于优化代码
    * 原理：getter&setter
    * computed vs methods
        > 优先使用computed
    * computed vs watch
        > 优先使用computed
* watch 监听实例属性
    > 可监听实例属性或子属性
    ```js
        new Vue({
            data:{
                a:10,
                b:{
                    c:20
                }
            }
            watch:{
                a:function(n,o){},
                'b.c':function(n,o){}
            }
        })
    ```

* 使用Vue总结
    ```js
        // 类（构造函数）：Vue
        // 实例：vm
        // 原型对象：Vue.prototype
        // 配置选项：options
        const vm = new Vue(options)
    ```
    * 选项
        * el
        * data
        * computed
        * watch
        * methods
    * 全局Api
        > Vue的静态属性/方法（全局属性/方法）
        ```js
            Vue.xxx
            Vue.xxx()
        ```
    * vm实例属性/方法
        * $开头：内置属性
        * _开头：私有属性
        * 自定义属性
            > 一般来源于配置选项
### 练习
* todolist的批量删除与批量完成
* 实现商品列表排序升序与降序的效果


## day2-3

### 面试题题
* 事件是如何传播的
    * 捕获阶段
        ```js
            btn.addEventListener('click',function(){},true)
            <button @click.capture="handle"></button>
        ```
    * 冒泡阶段
* event对象中target与currentTarget的区别
    * target: 触发事件的节点
    * currentTarget: 绑定事件的元素

### 复习
* 配置选项
    * data
    * watch
    * computed
        * 缓存特性
    * methods
* Vue实例：vm
    * $refs
* Vue类（构造函数）
* 数组的响应式
* 如何设置响应式属性
    > 当数据发生改变时会自动更新视图
    * data属性设置初始值
    * `Vue.set(target,key,val)` / vm.$set()
        * target: 可以是数组或对象，但不能是vm实例或$data根数据对象

### 知识点
* 指令：一种特殊html标签属性
* 组件：一种特殊的html标签，定义一个组件，就相当于创建了一个标签
    * 优点
        * 复用
        * 维护
        * 分工
    * 组件定义
        > 定义组件的名称不能与内置的html标签一致，一个组件就是一个Vue的实例（意味着组件拥有与Vue实例化是一样的配置选项）
        * 全局组件：`Vue.component(name,options)`
        * 局部组件：`components:{name:options}`
        ```js
            Vue.component('mylist',{
                data(){
                    return {}
                },
                template:``,
                // render(){}
            })
        ```
    * 组件使用
        ```html
            <mylist></mylist>
            <mylist></mylist>
        ```
* 拆分组件
    > 把一个大的应用拆分成若干个独立的组件
    * 数据放置问题
        * 状态提升：如果是多个组件公用的数据，则放到它们共同的父级
    * 数据修改方法放置问题
        > 谁的数据谁修改
* 组件通讯
    * 父->子: props
        > TodoList -> TodoContent -> TodoItem
        >          -> TodoStatus
        1. 父组件操作：给子组件定义属性，并传递父组件数据
        2. 子组件操作：通过props选项接收父组件数据，props中的数据会自动写入组件实例（成为组件实例的属性意味着可以直接在模板中使用）
    * 子->父：
        * 方式一：把父组件方法传到子组件执行，并回传数据
        * 方式二：**自定义事件**（推荐）
            1. 父组件操作：给子组件自定义事件（如:v-on:show），并使用父组件的方法做为事件处理函数（handle）
            2. 子组件操作：通过实例方法`$emit()`触发自定义事件并传递数据
        * 方式三：v-bind的sync修饰符
    * 深层级组件通讯
        * 逐层传递（繁琐，不推荐）
        * Bus事件总线
            > 用一个Vue实例作为事件载体配合事件实现数据共享
            * 绑定事件: $on()
            * 触发事件: $emit()

* 单向数据流
    > 遵循谁的数据谁修改的原则，不要在子组件修改父组件传入的数据
    * 特点：
        * 父组件修改数据会自动传入子组件，反之，子组件无法修改父组件传入的数据
    * 需求：在子组件修改父组件的数据
        * sync修饰符
        ```html
            <!-- sync修饰符只是一个语法糖 -->
            <todo-form v-bind:msg.sync="msg"></todo-form>

            <!-- 以上写法等效于 -->
            <todo-form v-bind:msg="msg" v-on:update:msg="msg=$event"></todo-form>
        ```

* 渲染优先级
    * el
    * template
    * render

    > 优先级：render > template > el

### 练习
* 完成课堂案例
* 实现全选效果

## day2-4

### 面试题
* jQuery链式调用的原理
    > 每一个方法内都返回一个jQuery实例（this）
    ```js
        $('button') -> 实例
        .addClass('btn') -> return 实例
        .attr('type','submit') -> return 实例
        .css({color:'#58bc58'})
        ....
    ```
* 改变this指向的方式
    * fn.call(target)
    * fn.apply(target)
    * fn.bind(target)
    * 共同点
        * 都是函数的方法
        * 都能改变函数的this指向
    * 不同点
        * call,apply改变函数this指向的同时并执行函数
        * bind只改变函数this指向，并不执行函数，返回一个新的函数
        * apply只能接受两个参数，第二个参数为数组,call,bind能接收任意数量参数
    ```js
        fn.bind()
    ```
* 前端往后端传参的方式
    > RESTful规范
    * 请求类型
        * get       查
        * post      增
        * put/path  改
        * delete    删
    * 传递方式
        * url参数： ?name=value&name=value
        * 请求体：request body
        * 请求头：request header
    ```js
        const xhr = new XMLHttpRequest()
        //xhr.open('get',url,true)
        xhr.open('post',url,true)

        // 请求头
        xhr.setRequestHeader('content-type','application/json')
        xhr.setRequestHeader('token','xxxx')

        // x-www-form-urlencoded
        // xhr.send('name=value&name=value');

        // json
        xhr.send('{"username":"laoxie","password":"123456"}')

        $.ajax({
            url,
            data:{}
        })

        // express
        const app = express()
        // app.use('/goods',function(){})
        app.get('/goods',function(){})
        app.post('/goods',function(){})
        app.put('/goods',function(){})
        app.delete('/goods',function(){})
    ```
    * 接口链接：https://easydoc.net/s/58934052   密码：4wSFKBYp
### 复习
* 组件
    * 优点
    * 定义
        * 全局：Vue.component()
        * 局部: components:{}
        * 要求
            * 只能一个根节点
            * data必须为函数
            * 命名注意事项

* 渲染配置
    * el
    * template
        ```js
            <div v-on:click="handle" @keyup>hahah</div> 
            -> 
            createElement(
                'div',
                {
                    on:{
                        click:handle,
                        keyup:handle
                    }
                },
                'haha'
            )
        ```
    * render
        ```js
            render(createElement){
                return createElement()
            }
        ```
* 组件通讯
    > 组件通过某种规则组合起来形成一个组件树（拥有**组件层级**）
    * 父->子：props
    * 子->父: 自定义事件（v-on,$on(),$emit()）
    * 兄弟->兄弟
        * 状态提升
    * 深层及组件
        * 逐层传递
        * Bus事件总线
* 组件层级
    * $parent
    * $children
    * $root
* 单向数据流
    > 父组件修改数据会自动影响子组件，反之不行（不能在子组件中修改props数据）
* 特殊需求
    * 父组件修改子组件数据
        * $children
        * ref
        ```js
            this.$children[0].todo = ''
        ```
    * 子组件修改父组件数据
        * 自定义事件
            ```js
                this.$emit('自定义事件',数据)
            ```
        * v-bind:index.sync
            ```js
                this.$emit('update:index',2)
            ```
        * this.$parent
            ```js
                // 子组件代码
                this.$parent.datalist = []
            ```

### 知识点
* Vue-CLI(Vue Command Line Interface)
    > @vue/cli
    * 安装
        ```bash
            npm install -g @vue/cli
        ```
    * 创建vue项目
        ```bash
            vue create <projectname>
        ```
    * eslint规则
        * package.json
        * vue.config.js
    * 配置文件:vue.config.js
        * lintOnSave: 'warning'

* 模块化开发规范
    * commonJS: nodeJS
        * 引入：require()
        * 导出: module.exports
    * ESModule: ES6
        > 把一个文件当作一个模块，模块具有独立作用域，要在外部获取模块内的变量，必须导入（前提是模块有导出）
        * 引入：import
            > import xxx from url
            * js文件
        * 导出：export
        * 基本特点
            * 每一个模块只加载一次， 并执行一次，再次加载同一文件，直接从内存中读取；
            * 每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
            * 通过export导出模块，通过import导入模块
            * ES6模块只支持静态导入和导出，只可以在模块的最外层作用域使用import和export ，
                * 导入的url不能是变量
                * url只能是相对路径或绝对路径
    * AMD:      require.js
    * CMD:      sea.js
* vue单文件组件
    * template
    * script
    * style
* npm
    * npm script
        * 运行：
            * `npm run <scriptname>`
    * npm 镜像
        ```bash
            # 查看镜像
            npm config get registry

            # 修改镜像
            npm config set registry https://registry.npm.taobao.org
        ```
* props数据类型校验
    * 支持单个类型
        ```js
            props:{
                data:Array
            }
        ```
    * 支持多个类型
         ```js
            props:{
                index:[Number,String]
            }
        ```
    * 必写参数：required

* 非props属性
    > 子组件不通过props接收，这种属性会自动成为组件根元素的html属性


## day2-5

### 面试题
* 伪数组如何使用数组的方法
    * 转成数组再调用
        * Array.from()
        * [...]
    * call/apply
        ```js
            Array.prototype.map.call(
                document.querySelector('button'),
                function(item,idx,arr){
                    // item： 每一个button
                }
            )
        ```
### 复习
* 模块化
    * commonJS
    * ES Module
    * AMD
    * CMD
* ESModule
    * 导入: import
        * import name from url
        * import {name} from url
        * import {name as myname} from url
        * import * as all from url
    * 导出: export
        > export后只能跟随var,let,const,function,class,default,{}
    
    * 使用
        * webpack   VueCLI
            > webpack对esmodule进行增强（编译，构建）
            * 引入js文件
            * 引入一个目录
            * 引入vue单文件组件
            * 引入css
            * 引入图片
            * ....
        * html
            ```js
                <script type="module">
                    // import 
                    // export
                    var username="xxx"
                </script>
            ```
* props类型校验
* 非props:attrs
    > 非props会自动写入组件的根节点
    * setAttribute()/点语法
        ```js
            // <button idx="10">
            btn.setAttribute('idx',10); //添加html属性
            btn.idx = 10; // 给节点添加属性

            //jquery
            $btn.attr('idx',10)
            $btn.props('idx',10)

            $btn.props('type','submit')
        ```
    
### 知识点
* 封装组件
    * 组件通讯
    * 插槽
* 插槽:slot
    > props把数据传入子组后再生成结构，插槽是在父组件生成结构后再传入子组件
    * 默认插槽: <slot/>
    * 具名插槽：<slot name="xx">
        > 更精确控制内容显示的位置
        * v-slot    （简写：#）
    * 作用域插槽: `v-slot:name="scope"`
        > 把子组件的数据传到父组件中使用

* 生命周期
    > 组件创建到销毁的过程
    * 创建：实例化时/注册组件时
    * 销毁：v-if/$destroy()/...
    * 生命周期函数（勾子函数）
        * 创建阶段
            * beforeCreate()
            * created()
        * 挂载阶段
            * beforeMount()
            * mounted()
        * 销毁阶段
            * beforeDestroy()
            * destroyed()
        * 更新阶段
            * beforeUpate()
            * updated()

* 页面渲染过程
    * 原生：数据修改->修改真实节点->渲染页面
    * Vue: 数据修改->修改虚拟节点->对比虚拟节点前后状态（找出差异项）-> 修改真实节点 -> 渲染页面
    * diff算法
        * key作用
            * 识别虚拟节点，如果没有提供key，Vue会利用type属性进行识别，
            * 如type属性一致且不提供key，Vue会采用节点复用原则
    ```js
        vdom1 = {
            type:'div'
            attrs:{id:'app'},
            children:[
                {type:'h4',key:1,children:'xxx'},
                {type:'button',key:2,attrs:{type:'submit'},children:'10'},
                {type:'input',key:3,attrs:{type:'number'}}
            ]
        }
        vdom2 = {
            type:'div'
            attrs:{id:'app'},
            children:[
                {type:'h4',key:1,children:'xxx'},
                {type:'button',key:2,attrs:{type:'submit'},children:'11'},
                {type:'input',key:3,attrs:{type:'number'}}
            ]
        }

        offset = {type:'button',attrs:{type:'submit'},children:'11'}

        // 数据变化
        ['laoxie','jingjing','tiantian']
        ['xiaoxie','laoxie','jingjing','tiantian']

        // 虚拟节点变化
        {
            type:'div',
            children:[
                {type:'p',{attrs:{dataId:'laoxie'},key:'laoxie'},children:'laoxie'},
                {type:'p',{attrs:{dataId:'jingjing'},key:'jingjing'},children:'jingjing'},
                {type:'p',{attrs:{dataId:'tiantian'},key:'tiantian'},children:'tiantian'},
            ]
        }

        // 无key值
        {
            type:'div',
            children:[
                {type:'p',{attrs:{dataId:'laoxie'}},children:'xiaoxie'},
                {type:'p',{attrs:{dataId:'jingjing'}},children:'laoxie'},
                {type:'p',{attrs:{dataId:'tiantian'}},children:'jingjing'},
                {type:'p',{attrs:{}},children:'tiantian'},
            ]
        }

        // 有key值
         {
            type:'div',
            children:[
                {type:'p',{attrs:{},key:'xiaoxie'},children:'xiaoxie'}
                {type:'p',{attrs:{dataId:'laoxie'},key:'laoxie'},children:'laoxie'},
                {type:'p',{attrs:{dataId:'jingjing'},key:'jingjing'},children:'jingjing'},
                {type:'p',{attrs:{dataId:'tiantian'},key:'tiantian'},children:'tiantian'},
            ]
        }

    ```

## day3-1

### 面试题
* 组件的哪个生命周期函数最先获取到父组件传入的props数据
    > created
* 父子组件生命周期函数的执行顺序
    1. 父beforeCreate
    2. 父created
    3. 父beforeMount
    4. 子beforeCreate
    5. 子created
    6. 子beforeMount
    7. 子mounted
    8. 父mounted

### 复习
* 插槽
    * 默认插槽
        ```html
            <MyButton>xxx</MyButton>
           
            <!-- MyButton模板 -->
            <button>
                <slot name="icon"/>
                <slot/>
            </button>
        ```
    * 具名插槽
        ```html
             <MyButton>
                <template v-solt:icon>
                    xxx
                </template>
            </MyButton>

            <!-- MyButton模板 -->
            <button>
                <slot name="icon"/>
                <slot/>
            </button>
        ```
    * 作用域插槽
        ```html
            <MyButton>
                <template #icon="scope">
                    xxx
                </template>
                <template #default="scope">
                    xxx
                </template>
            </MyButton>

            <!-- MyButton模板 -->
            <button>
                <slot name="icon" a="10" :b="20"/>
                <slot a="10" :b="20"/>
            </button>

        ```
    * 插槽默认值
        ```html
            <slot>
                // 默认结构
                <div v-for="data"></div>
            </slot>
        ```
* 生命周期
    * 搞懂以下问题
        * 执行过程
        * 在每个阶段能做什么
    * 阶段
        * 创建阶段：Create
            * beforeCreate()
            * created()
        * 挂载阶段：Mount
            * beforeMount()
            * mounted()
        * 卸载阶段：Destroy/UnMount
        * 更新阶段：Update

### 知识点
* 多页面应用Multiple Page Application（MPA）
* 单页面应用Single Page Application(SPA) 
    * 单页面多视图
* 路由
    * 安装：
        ```bash
            npm install vue-router
        ```
    * 使用步骤
        1. 引入
            ```js
                import VueRouter from 'vue-router'
            ```
        2. 安装插件
            > 注册了两个全局组件`<router-view/>`,`<router-link/>`
            ```js
                Vue.use(VueRouter)
            ```
        3. 实例化路由并配置参数
            ```js
                const router = new Router({
                    routes:[{
                        // 当浏览器地址为/home时，显示Home组件的内容
                        path:'/home',
                        component:Home
                    },{
                        path:'/login',
                        component:Login
                    }]
                })
            ```
        4. 把router实例注入到vue实例中
            ```js
                new Vue({
                    ...
                    router:router,
                })
            ```
        5. 使用
            * 显示路由：`<router-view/>`
                > `<router-view/>`为动态组件，根据不同的条件渲染不同的内容
                * 条件：浏览器地址是否匹配path
            * 路由跳转
                * 声明式导航：利用`<router-link>`组件跳转
                * 编程式导航：利用js实现路由跳转
                    > 第4步的注入操作会给每个组件添加$router,$route属性
                    * $router: 路由实例
                        * push()    等效于`<router-link>`
                        * replace() 等效于`<router-link replace>`
                        * go()
                        * back()
                        * forward()
                    * $route: 当前路由信息对象
            * 跳转传参
                * query传参
                    > 接收：this.$route.query
                    ```js
                        this.$router.push('/login?username=laoxie')

                        this.$router.push({
                            path:'/login',
                            query:{
                                username:'laoxie'
                            }
                        })

                    ```
                * params传参
                    > 接收：`this.$route.params`
                    * 注意：只能在name方式跳转时使用params传参，
                    * 缺点：刷新后数据丢失（动态路由例外）
                * 数据持久化
                    * query
                    * 动态路由

* Vue UI框架（组件库）
    * elementUI     饿了么
    * ant-design    蚂蚁金服
    * iView         腾讯
    * VantUI        有赞


## day3-2

### 复习
* VueRouter
    > 在单页面应用中实现多视图的功能
    * 使用步骤
        1. 引入
        2. 安装插件：Vue.use()
            * <router-view/>
            * <router-link/>
        3. 实例化路由并配置参数
            * routes
                * path
                * component
        4. 注册Vue根实例
            * $router
            * $route
        5. 使用
            * 显示路由组件：<router-view/>
            * 跳转(路由导航)
                * 声明式导航：<router-link/>
                    * to
                    * replace
                * 编程式导航
                    * $router.push()
                    * $router.replace()
                    * $router.back()
                    * $router.forward()
                    * $router.go()
* 路由跳转
    * 跳转方式
        * path
            ```js
                <router-link to="/home"/>
                <router-link :to="{path:'/home'}"/>
                $router.push('/home')
                $router.push({path:'/home'})
            ```
        * name
            ```js
                <router-link :to="{name:'Home'}"/>
                $router.push({name:'Home})
            ```
    * 传参
        * query
            > 数据持久化
        * params
            * 动态路由

### 知识点
* 定义路由时传参
    * props
    ```js
        <Home a="10" :b="20" />
        
        <!-- 内部接收 -->
        props:['a','b']

        new VueRouter({
            routes:[
                {
                    path:'/home',
                    component:Home,
                    // props:{},
                    // props:function(){},
                    props:true
                }
            ]
        })
    ```
* axios
    * axios(config) / axios(url,config)
    * axios.get(url,config)
    * axios.post(url,data,config)
    * axios.put(url,data,config)
    * axios.patch(url,data,config)
    * axios.delete(url,config)
    * config
        * url       请求地址
        * method    请求类型
        * params    url传参
        * data      请求体传参
        * headers   请求头传参
    * 二次封装

    ```js
        $.ajax({
            url
        })
        $.ajax(url,{})
        $.get()
        $.post()
    ```
* sass
    * 安装依赖
        * sass-loader@10.2.0
        * sass
    * lang="scss" 
    * lang="sass"
* 组件局部样式：`<style scoped>`
    * 原理：添加scoped属性后，webpack在编译时自动给当前组件中所有的标签添加`data-v-[hash]`自定义属性，然后把样式使用属性选择器进行匹配

### 练习
* 完成发现页面效果（分类）
* 完成购物车页面效果

### day3-3

### 复习
* 定义路由时传参：props
* axios
    * 二次封装
    * 写入Vue的原型
    * 常用方法
* Vue组件局部样式
    * `<style scoped>`
    * 原理
* Vue组件中使用sass
    * 老式写法：<style lang="sass">
    * 新式写法：<style lang="scss">

### 知识点
* 监听动态路由变化
    * watch
        ```js
            {
                watch:{
                    $route:function(){}
                }
            }
        ```
    * 路由守卫：beforeRouteUpdate()
        > 路由钩子函数
        ```js
            beforeRouteUpdate(to,from,next){
                // 这里的代码在$route发生变化前执行
                // to:      目标路由
                // from:    来源路由
                if(to.params.id != from.params.id){
                    this.getData(to.params.id)
                }
                next();
            },
        ```
* 路由守卫
    * 概念
        > /discover(Discover) -> /mine(Mine)
        * 目标路由（目标页面，激活组件）
        * 来源路由（来源页面，失活组件）
    * 分类
        * 路由独享的守卫
            > 写在路由配置中
            * beforeEnter(fn)
                * to
                * from
                * next()
        * 组件内的守卫
            > 写在组件内的钩子函数
            * beforeRouteEnter()
            * beforeRouteUpdate()
            * beforeRouteLeave()
                * to
                * from
                * next()
        * 全局守卫
            > 任何路由变化都会执行，是路由实例的方法，一般写在实例化路由所在的文件中
            * router.beforeEach(fn)
            * router.beforeResolve(fn)
                * to
                * from
                * next()
            * router.afterEach(fn)
                * to
                * from
* 路由跳转步骤
    * 普通组件
        > /discover -> /mine
        1. 导航被触发。
        2. 在失活的组件里调用beforeRouteLeave离开守卫。
        3. 调用全局的 beforeEach 守卫。
        4. 在路由配置里调用 beforeEnter。
        5. 解析异步路由组件。
        6. 在被激活的组件里调用 beforeRouteEnter。
        7. 调用全局的 beforeResolve 守卫 (2.5+)。
        8. 导航被确认。
        9. 调用全局的 afterEach 钩子。
        10. 触发 DOM 更新。
            > 执行组件生命周期钩子函数
     * 复用组件
        > /goods/1 -> /goods/2
        1. 导航被触发。
        2. 调用全局的 beforeEach 守卫。
        3. 在**重用的组件**里调用 beforeRouteUpdate 守卫 (2.2+)。
        4. 解析异步路由组件。
        5. 调用全局的 beforeResolve 守卫 (2.5+)。
        6. 导航被确认。
        7. 调用全局的 afterEach 钩子。
        8. 触发 DOM 更新。
            > 执行组件生命周期钩子函数

* 路由守卫应用：页面访问权限控制
    > 配置完路由，利用路由守卫控制用户是否能访问
    * 控制商品页访问权限
        > 传入的id必须是正确的id
    * 用户登录后才允许访问购物车和我的
        > 如用户未登录访问/cart和/mine，则跳到登录页面
        * 路由元信息
        * beforeEach全局守卫
        
        ```js
            router.beforeEach((to,from,next)=>{
                if(to.meta.requiresAuth){
                    // 判断用户是否登录
                }
            })
        ```
* 用户身份验证
    * token 令牌
        > `npm install jsonwebtoken`
        * 创建token
            > 生成token会得到一个加密后的字符串，一般保存在前端
            ```js
                const jwt = require('jsonwebtoken');
                const key = 'lx+jj'
                const token = jwt.sign(
                    // 加密数据
                    {username:'laoxie'},
                    // 密钥
                    key,
                    // 有效期
                    {expiresIn:'1d'}
                )
            ```
        * 校验token
            > token过期或被篡改都会导致校验失败，校验就是解密的过程，校验过程不需要查询数据库（不需要用户名密码），大大减轻其服务器压力
            ```js
                const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Imxhb3hpZSIsImlhdCI6MTYzNTMyNzMyMiwiZXhwIjoxNjM1MzM0NTIyfQ.E2FPVGao7V9LWOJZg79WamZStMP8Ha4fGULZQbo_gw8'
                try{
                    const data = jwt.verify(token,key)
                    // 校验成功
                }catch(err){
                    // 校验失败
                }
            ```

### 练习
* 完成注册页面效果


## day3-4

### 复习
* 路由跳转过程
    > 路由完成 -> 组件渲染
* 路由守卫
    * 全局守卫
    * 路由独享守卫
    * 组件内守卫
* 监听动态路由改变
* 控制页面访问权限
    * 路由守卫+token
* 校验用户身份
    * token: 加密后的字符
        * 特点
            * 安全(加密)
            * 减轻服务器压力
            * 设置有效期
        * 操作
            > 在服务端完成
            * 生成
            * 校验
    * 免登录
        1. 第一登录：需要用户名和密码
            > 服务器生成一个token并返回给前端保存
        2. 第二次后的每次登录：发送token到服务器校验
        
### 知识点
* 购物车页面效果
* 添加到购物车效果
* 全局状态管理工具：Vuex
    1. 安装模块
        ```
            npm install vuex
        ```
    2. 引入与安装插件
        ```js
            import Vue from 'vue'
            import VueX from 'vuex'
            Vue.use(Vuex)
        ``
    3. 创建存储仓库
        ```js
        const store = new Vuex.Store({
            // 配置参数
        })
        ```
    4. 注入Vue根实例
        ```js
            new Vue({
                ...
                store:store
            })
        ```
## day3-5

### 知识点
* Vuex
    * 解决了什么问题
        * 数据管理的问题
        * 数据更新的问题
        * 组件更新的问题
    * 如何使用Vuex
        1. 安装vuex
        2. 引入并安装插件
        3. 实例化数据仓库
            > 配置参数
        4. 注入根实例
            > 注入根实例后，每个组件实例中都有一个`$store`的属性
        5. 在组件中使用
            this.$store.xxx
    * 核心配置
        * state     全局状态（类似于组件中的data）
            > 组件中获取：`store.state.cartlist`
            ```js
                new Vuex.Store({
                    state:{
                        
                        cartlist:[{},{}]
                    }
                })
            ```
        * mutations 修改state的唯一方法（类似与组件中的methods）
            > 调用方式：store.commit(mutationName,payload)
            ```js
                new Vuex.Store({
                    state:{},
                    mutations:{
                        // store.commit('addItemToCart',10)
                        addItemToCart(state,payload){
                            // state 全局状态
                            // payload: 调用当前mutation时传递的参数
                        },
                        removeItemFromCart(){

                        }
                    }
                })
            ```
        * getters   类似与组件中的computed属性
        * actions   类似与组件中的methods
            > 调用方式：store.dispatch(actionName,payload)
            ```js
                // 不使用action
                // 组件发起ajax -> 返回数据 -> 触发mutation

                // 使用action
                // 触发action -> 内部发起ajax->返回数据->内部触发mutation
            ```
    * Vuex模块化: modules
        > 模块化后，默认只影响state的获取，getters,mutations,actions还是保存在全局状态（公用命名空间，不能重名），可能产生命名冲突问题，要解决该问题，则可以使用命名空间
        * 命名空间：namespaced
            > 在模块中使用`namespaced:true`选项
            ```js
                // 启用命名空间后，getters,mutations,actions的操作会有以下变化
                store.getter.isLogin -> store.getters['user/isLogin']
                store.commit('login') -> store.commit('user/login')
                store.dispatch('login') -> store.dispatch('user/login')
            ```
* 状态与数据

### 练习
* 把用户信息写入全局状态
    * 包含修改方法
* 填写码云账号
    > 填写地址稍后在群里发出，
    * 接受邀请
* 组队（3-4人）
* 选项目


## day4-1

### 面试题
* 如何设置对象的属性为只读
    * 属性特性
        * 存储器属性
            * configurable
            * enumerable
            * get
            * set
        * 值属性
            * configurable
            * enumerable
            * writable
            * value
    ```js
        let obj = {
            name:'jingjing',
            password:123,
            get age(){
                return 36
            }
        }
        // 与以上getter代码等效
        // 存储器属性
        // 属性特性：configurable,enumerable,get,set
        Object.defineProperty(obj,'age',{
            configurable:true,
            enumerable:false, // 无法用for...in遍历
            // getter 存储器属性
            get(){
                return 36
            }
        })

        // 值属性
        // 属性特性：configurable,enumerable,writable,value
        Object.defineProperty(obj,'password',{
            configurable:true,
            enumerable:false,
            writable:false, // 可写性
            value:123
        })
        
    ```
* 如何让v-model在组件中生效
    * v-model原理：v-bind:value + v-on:input
    ```js
        <mycomponent a="10" v-model="username"/>
        // <mycomponent a="10" v-bind:value="username" v-on:input="username=$event"/>

        // mycomponent代码
        {
            props:['value'],

            // 在合适的位置触发input事件
            // this.$emit('input',123)
        }
    ```

### 复习
* Vuex
    * vuex解决了什么问题
        * 数据共享的问题
        * 数据获取与修改的问题
        * 组件刷新的问题
    * 使用步骤
        1. 安装模块与引入
        2. 安装插件
        3. 实例化并配置参数
        4. 注入根实例
        5. 在组件中使用
            > this.$store
    * 核心参数
        * state
            > this.$store.state.user.userInfo.username
        * getters
            > this.$store.getters.xxx
        * mutations
            > this.$store.commit()
        * actions
            > this.$store.dispatch()
        * modules
            * 模块化后，默认只影响state的获取
            ```js
                store.state.xxx -> store.state.MODULE.xxx
            ```
            * 命名空间:namespaced:true
                ```js
                    store.getters.xxx -> store.getters['module/xxx']
                    store.commit('xxx') -> store.commit('module/xxx')
                    store.dispatch('xxx') -> store.dispatch('module/xxx')
                ```
### 知识点
* Vuex映射方法
    > 把Vuex中的数据/方法映射到组件，目的为了简化操作
    * mapState(namespace?,map)        把state映射到组件的computed
    * mapGetters(namespace?,map)      把getters映射到组件的computed
        > map支持数组和对象，但对象不支持函数写法
    * mapMutations(namespace?,map)    把mutations中的方法映射到组件的methods
    * mapActions(namespace?,map)      把actions中的方法映射到组件的methods

* 缓存组件：`<keep-alive>`
    > 不让组件被销毁，让其保存的内存中，意味着组件相应的生命周期钩子函数不会被执行
    * include
    * exclude
        ```js
            Vue.component(name,Search)
            components:{
                name:Search
            }
        ```
    * 钩子函数
        * activated     组件被激活时调用
        * deactivated   组件失活时被调用
* 页面切换过渡动画
    > 从一个页面切换到另一个页面时的转场效果
    * <transition>          单个子元素动画
    * <transition-group>    多个子元素动画

    * 触发过渡动画场景
        * 条件渲染 (使用 v-if)
        * 条件展示 (使用 v-show)
        * 动态组件
            * <component/>
            * <router-view/>
        * 组件根节点
            > 对单个页面（组件进行过渡动画）
        
    > 注意：当过渡动画与keep-alive同时使用时，建议使用transition包裹keep-alive

* Vue项目
    * 团队项目
        * webApp
        * 后台管理系统
        * 数据接口
    * 分工
        > 分析原网站有哪些页面模块
        * 有一个人负责公共部分
    * git
        > 解决冲突
    

## day4-2

### 面试题
* 两台同类型设备登录同一微信账号，之前的登录会自动下线
    > 服务器主动发送消息：websocket
    * 轮询
        > 在客户端不断发起http请求，缺点：会存在很多无用请求
    * 长轮询
        > 服务器会挂起请求，直到有新的消息才响应
    * websocket
* git常用命令
    * git pull = git fetch + git merge
    * git push
    * git commit
    * git add
    * git status
    * git branch    分支操作
    * git merge
    * git checkout
    * git reset     版本回退
    * git remote
        * add
        * remove
    * git clone
    * git rebase
    * git diff      代码对比

### 知识点
* 页面访问权限
    * 路由守卫控制是否可访问
        1. 先配置所有路由
            > 给需要登录才能访问的路由添加属性：`meta:{requiresAuth:true}`
        2. 在beforeEach路由守卫中控制路由是否可跳转
            > 判断用户是否登录或是否过期：token
    * 动态添加路由
        > 根据用户登录状态，动态添加需要登录才可访问的路由：
            > * `router.addRoute(routerConfig)`
            > * `router.addRoute('parentName',routerConfig)`
            ```js
                router.addRoute({
                    path:'/manage',
                    component:Manage,
                    name:'Manage'
                    //children:[
                        
                    //]
                })

                router.addRoute('Manage',{
                    path:'goods',
                    component:Goods
                })
            ```
        1. 提供一个基础路由
        2. 把需要登录才能访问的路由写入单独的模块authRouter
        3. 根据用户登录状态动态添加authRouter
            > 处理刷新后用户登录状态
* webpack路由别名
    > vue-cli中，@代表项目下的src目录
* axios请求在请求头中携带token
    * axios请求拦截
    * axios响应拦截
    ```js
        axios.interceptor.response.use((res)=>{
            // 处理返回数据，格式化成需要的格式
            res.data = {
                code,
                data,
                msg
            }
            return res;
        })
        axios.get().then((res)=>{

        })
    ```
* 子路由（嵌套路由）
    * children
        > 配置`router-view`组件的嵌套实现嵌套路由

## day4-4~5

### 知识点
* Vue的扩展
    * 组件
        * 内置组件
        * 自定义组件
    * 指令
        > 指令的值都是js代码，指令完整格式：`v-name:arg.modifer="value"`
        * 内置指令
        * 自定义指令
            * 类型
                * 全局指令：Vue.directive(name,option)
                * 局部指令：directives:{name:option}
                    * options
            * 钩子函数
                * bind
                * inserted
                * update
                * componentUpdated
                * unbind
            * 钩子函数参数
                * el 指令所绑定的元素，可以用来直接操作 DOM
                * binding 一个对象，包含以下案例中的属性
                * vnode
                * oldVnode
    * mixin混入
        > 提取组件公共配置
        * 全局mixin: Vue.mixin(options)
            > options与组件配置一致
        * 局部mixin: mixins:[]
    * plugin插件
        * Object
        * Function
    * provide / inject 依赖注入
        > 增强版的props，实现深层及组件通讯
        ```js
            <global/>   qty=10,username='laoxie'
                <List/>
                    <Content>
        ```
* 用户权限控制
    * 页面权限控制
    * 按钮级别权限控制
    * 数据权限控制

### 项目上线
* 备份数据库
    > 存入项目db目录
* 合并最新代码到master或main分支
* 上线

* 发邮件
    > 项目负责人发邮件给讲师、抄送给就业老师和团队成员, 老师邮箱格式：姓名全拼@1000phone.com

    * 内容为readme.md的内容
        > 不要以附件发送

    
## day5-1

### 知识点
* 版本
    * 按环境分
        * development   开发版
        * production    生产版
    * 按模块规范分
        * commonJS: cjs
        * ESModule: es/esm
        * AMD
        * CMD
        * UMD   通用模块化规范（支持所有模块化规范与全局引用方式）
    * 按编译方式
        * 完整版: 运行时版+编译器
        * 运行时版(运行时runtime):

    ```js
        render -> template -> el
        // 编译器作用：template 编译到 render

        // vue-cli单文件组件
        <template>
        </template>
        <script>
            export default {
                render(){

                }
            }
        </script>
    ```
* 安装
    * npm i react
    * npm i react-dom / npm i react-native
* 渲染节点：`ReactDOM.render(VNode,target)`
* 创建虚拟节点：`React.createElement(type,props,children)`

* JSX
    > JSX默认浏览器不支持，必须通过第三方工具编译（如：babel）,babel的作用就是把JSX编译成React.createElement()
    * 规范
        * 不能使用js关键字
            * class
            * for
        * 属性必须使用驼峰
            * onkeyup -> onKeyUp
            * autofocus -> autoFocus
        * 必须结束标签
            * input
            * img
        * 在jsx中使用变量: {}
            > 花括号内执行使用js表达式，不能使用声明式语句和条件语句（可以使用三元运算）
        * 在jsx中使用style: 必须为对象
        * 注释
            * 单行
            * 多行
```js
    // vue
    new Vue({
        template:`<div>xxx</div>`
    })

    // react
    ReactDOM.render(
        // React.createElement('div',{},'xxx'),
        <div>xxx</div>,
        document.querySelector('#app')
    )
```

* 组件
    * 定义
        * 函数组件(无状态组件)：利用函数来定义组件
            * 必须有返回值
        * 类组件(状态组件)：利用类来定义组件
            > 必须继承自`React.Component`
            * 必须包含render函数
            * state
                > 状态改变会自动刷新组件
                * 修改state: `this.setState()`
                    > 在React中不要直接修改状态，必须通过setState()
        > 注意：实际开发中优先使用函数组件
    * 注意事项
        * 首字母大写
        * 只能有一个根节点

## day5-2
* 类组件与函数组件的区别
    * 函数组件：无状态组件
        * 无状态
        * 无this
    * 类组件：状态组件
        * 有state
        * 有this
            * 默认只有render,construtor,生命周期函数才有this指向
* 组件通讯
    * 父->子：props
        > props数据被修改，会自动刷新组件
        * 函数组件：函数的第一个参数为props
        * 类组件
            * constructor()的第一参数
            * this.props
    * 子->父
        * 把父组件的方法传到子组件执行，并回传参数
    * 兄弟->兄弟
        * 状态提升

    * 深层及组件通讯
        ```js
            // TodoList -> TodoContent -> TodoItem
        ```
        * 方式一：逐层传递
        * 方式二：Context数据共享
            1. 创建 Context
                ```js
                    const context = React.createContext()
                ```
            2. 父组件Provide
                ```js
                    <context.Provide value={{a:10,b:20}}>

                    </context.Provide>
                ```
            3. 子组件接收
                * 函数组件
                    * Consumer
                        ```js
                            <context.Consumer>
                                {
                                    (value)=>{
                                        return <div></div>
                                    }
                                }
                            </context.Consumer>
                        ```
                    * Hooks
                * 类组件
                    * Consumer
                    * contextType
                        * constructor的第二个参数
                        * this.context
                        ```js
                            类.contextType = context;

                            // 设置contextType后，在组件中可以通过
                            // this.context
                        ```

* state：组件自身的数据（类组件）
* props: 父组件传入的数据
* ref
    * React.createRef()
    ```js
        const refObj = React.createRef(); // {current:null}
        <div ref={refObj}></div>
        <Button ref={refObj}/>
    ```
    * 回调写法
        ```js
            <div ref={el=>{ this.div = el}}>
            <Button ref={el=>{this.btn=el}} / >
        ```

* 数据渲染
    * 条件渲染：三元运算
    * 列表渲染
        * 常用方法
            * map()
            * filter()
            * ...
        * key
    * 事件绑定
        * event：事件处理函数的最后一个参数
        * this指向：默认没有this指向
            * 改变函数的this指向：bind,apply,call
                > bind改变this指向只在第一次生效
        * 传参
            * handle.bind(target,args)
    * React实现双向数据绑定
        > 单向 + 事件

* 受控组件与非受控组件
    * 非受控组件：通过节点操作表单数据
    * 受控组件：利用组件的state操作表单数据的方式
        > 把state与表单进行绑定，必须提供修改状态的事件

* webpack
    * webpack与gulp
        * gulp
            > 基于任务的构建工具，实现任何构建操作都需要用户一步步实现
            ```js
                //gulpfile.js
                gulp.task('compileSass',function(){
                    gulp.src('./src/sass/*.scss')
                    .pipe(sass())
                    .pipe(gulp.dest('./src/css'))
                })
                exports.compileSass = function(){}
                exports.compileJS = function(){}
                // 运行任务
                // gulp complieSass
            ```
        * webpack
            > 基于配置的构建工具，要实现任何构建（编译、合并、压缩等操作）只需要配置一个文件（webpack.config.js）来实现

* 从0搭建基于Webpack的React项目环境
    * 创建目录
    * 初始化文件
        * package.json
    * 安装依赖
        * react & react-dom
        * @babel/core & babel-loader & @babel/preset-react
        * webpack & webpack-cli & webpack-dev-server
        * html-webpack-plugin
    * webpack配置
        * 项目根目录创建`webpack.config.js`
        * 常用配置
            * entry 入口
            * output 出口
            * loader    加载器
                > module.rules
                * babel-loader
            * plugins
            * devServer
    * 编译打包
        > webpack
    

## day5-3

### 知识点
* webpack配置选项
    * entry
    * output
        > path必须使用绝对路径
    * loader加载器
        > module.rules
        * css-loader + style-loader
        * sass-loader + sass
        * file-loader + url-loader
            * limit
    * plugins插件
    * devServer测试服务器
    * resolve.extensions: 默认扩展名
    * resolve.alias: 路径别名

* react知识点梳理
    * JSX
    * 组件
        * 函数组件
        * 类组件
            * state
            * this
                > 默认只有render,constructor,生命周期函数中有this指向
            * 生命周期
    * 组件通讯
        * props
        * context
    * 数据渲染
        * state
        * props
        * 数据绑定
            * 单向：{}
            * 双向：单向+事件
        * 事件绑定
            * 事件名使用驼峰
            * 事件处理函数
                * event
                * this
            * 传参
                * bind()
                * 闭包
        * 列表渲染
            > key
            * map
            * filter
            * ...
        * 条件渲染
            * 三元运算
        * html内容渲染
            > dangerouslySetInnerHTML={{ __html: content}}
        * ref
            * React.createRef()
                * current
            * 回调函数的方式

* 生命周期
    > 只有类组件才有生命周期
    * 阶段
        * Initial: 初始化阶段
            * constructor
        * Mounting：挂载阶段
            * componentWillMount -> UNSAFE_componentWillMount （不推荐）
            * componentDidMount
        * Updating：更新阶段
            * componentWillUpdate -> UNSAFE_componentWillUpdate（不推荐）
            * componentDidUpdate
        * Unmounting：卸载阶段
            * componentWillUnmount
    * 特殊钩子函数
        * componentWillReceiveProps -> UNSAFE_componentWillReceiveProps
        * shouldComponentUpdate
* react组件性能优化
    * shouldComponentUpdate
        > 在内部通过返回true或false实现组件性能优化，实际开发中一个使用第三方工具（如：lodash）库配合判断
    * PureComponent: 在内部实现了简单判断的shouldComponentUpdate
        > React.PureComponent 与 React.Component的区别是PureComponent内部帮我们做了shouldComponentUpdate的简单判断，让state和props不变的情况下自动return false，从而实现性能优化

* 组件的刷新场景
    * state被修改
    * props被修改
    * 父组件刷新（需要优化）


### 练习
* 从0配置基于webpack的Vue项目环境


## day5-4

### 知识点
* ReactRouter
    * 使用步骤
        1. 安装
            > 只需要安装react-router-dom，react-router会作为依赖自动安装
            ```bash
                npm install react-router
                npm install react-router-dom
            ```
        2. 选择路由类型
            > 所有的组件都需要包裹在路由类型中
            * hash路由：`<HashRouter/>`
            * history路由: `<BrowserRouter/>`
        3. 配置路由
            * `<Route>`
                * path
                * component
                * render
                * exact
            * `<Redirect />`
                * from
                * to
                * exact
            * `<Switch/>`

* 路由跳转(导航)
    * 声明式导航
        * <Link/>
        * <NavLink/>
            * to
            * activeStyle
            * activeClassName
            * replace
    * 编程式导航
        > 要实现编程式导航，必须获取到`history`对象
        
        * 如何获取history、location、match对象
            * 组件通过Route的component属性渲染
            * withRouter高阶组件
        * history
            * push()    等效于：`<Link to />`
            * replace() 等效于：`<Link to replace/>`
            * go()
            * goBack()
            * goForward()
* 高阶组件 HOC（High Order Component）
    * 高阶函数（包装函数）
    * 纯函数
        * 不修改传入的参数
        * 固定输入有固定输出
    * 高阶组件要求
        * 必须为纯函数
        * 传入一个组件，并返回一个新的组件（包装函数的特点）
        * 装饰器模块
    * 定义高阶组件
        * 为什么需要高阶组件
            * 为了向下传递需要的props
            * 为了提取公共代码
        * 注意事项
            * 必须传递props到被包装的组件 
        * 定义方式
            * 属性代理/提取公共代码
            * 反向继承
                > 只适用于类组件，有局限性   
    ```js
        // 包装函数
        function formatData(data){
            return {
                code:200,
                data,
                msg:'success'
            }
        }

        formatData([10,20,30]); // {code:200,data:[10,20,30],msg:'success'}

        // 纯函数
        function sum(a,b){
            return a+b;
        }
        sum(1,2); //3
        sum(1,2); //3

        function randomNumber(min,max){
            return parseInt(Math.random()*(max-min+1))+min
        }
        randomNumber(20,30);//21
        randomNumber(20,30);//28
    ```
    * 应用
        * 实现一个获取本地存储数据的高阶组件
        * 实现页面访问权限控制
            * 反向继承
            * 属性代理
        ```js
            function Home(props){ // props={userInfo}
                let userInfo = localStorage.getItem('currentUser')
                try{
                    userInfo = JSON.parse(userInfo) || {}
                }catch(err){
                    userInfo = {}
                }
                return (
                    <div>{userInfo.username}</div>
                )
            }


            function withUser(InnerComponent){
                // 接收组件作为参数，并返回一个新的组件
                return function OuterComponent(){
                    let userInfo = localStorage.getItem('currentUser')
                    try{
                        userInfo = JSON.parse(userInfo) || {}
                    }catch(err){
                        userInfo = {}
                    }
                    return (
                        <InnerComponent userInfo={userInfo}></InnerComponent>
                    )
                }
            }

            Home = withUser(Home)
        ```

* 函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数后统一处理的函数编程方式
* 扩展运算符：`...`
    * 展开：数组、对象的复制
    * 剩余：解构、函数参数接收


### 练习
* 使用属性代理方式定义高阶组件withAuth，实现页面访问权限控制


## day5-5

### 知识点
* 路由传参
    * search
        ```js
            history.push('/login?targetUrl=/mine')

            history.push({
                pathname:'/login',
                search:'targetUrl=/mine'
            })
        ```
        * 接收：`props.location.search`
            > 得到一个带?的字符串
            ```js
                const search = props.location.search;// ?username=tiantian
                const query = new URLSearchParams(search)
                query.get('username');// tiantian
            ```
    * params    动态路由
        ```js
            history.push('/goods/'+id)
        ```
    * state

* React组件库（UI框架）
    * elementUI
    * Vant
    * ant-design

* crypto-js

* 嵌套路由（子路由）
    ```js
        // App.jsx
        <Route path="/manage">
            <Manage />
        </Route>

        // Manage.jsx
        <Route path={match.path+'/interview'}>
            <Interview/>
        </Route>
        <Route path={match.path+'/interview/:type'}>
            // 动态路由
            <Type/>
        </Route>
        <Route path={match.path+'/user'}>
            <User/>
        </Route>

        // Interview.js
        <Route path={match.path+'/add'}>
            <Add/>
        </Route>
        <Route path={match.path+'/list'}>
            <List/>
        </Route>
        <Route path={match.path+'/edit'}>
            <Edit/>
        </Route>
    ```

## day6-1

### 知识点
* antd表单与表格的使用
    > 组件二次封装
* props数据类型校验
    ```js
        // vue
        {
            props:['data'],
            props:{
                data:Object,
                data:[Object,Array],
                data:{
                    type:Object,
                    default:()=>({})
                },
                age:{
                    validator(value){
                        return value>=18&value<=30>
                    }
                }
            }
        }

        // react: prop-types
        import PropTypes from 'prop-types'
        Component.propTypes = {
            data:PropTypes.object,
            data:PropTypes.object.isRequired,
            data:PropTypes.oneOfType([PropTypes.object,PropTypes.array]),
            age:function(props, propName, comName){
                 if (props[propName] < 18) {
                    return new Error(propName + "必须大于等于18岁");
                }
            }
        }
    ```
* props默认值
    ```js
        Component.defaultProps = {
            data:100
        }
    ```


## day6-2

### 知识点
* 正则
    * 零宽断言：给正则表达式添加条件，只有符合条件才匹配
    * \b    边界
    * \B    非边界
* 路由监听
    > history.listen(callball)

* 路由传参
    * 跳转传参
        * search        通过?后的参数传参
            > 数据数据持久化
            * 获取方式：props.location.search
                > 得到字符串，需要使用URLSearchParams类去处理
                ```js
                    history.push({
                        pathname:'/list',
                        search:'page=1&size=10'
                    })

                    // 接收与处理
                    const query = new URLSearchParams(props.location.search)
                    query.get('page');//1
                ```
        * params动态路由
            > 可以实现数据持久化
            * 获取方式：props.match.params
        * state
            * 可以传递任意数据，但刷新后数据丢失
            * 获取方式：props.location.state
        * 自定义数据
            > 可以传递任意数据，但刷新后数据丢失
            * 获取方式：props.location.xx
    * 定义时传参（了解）
        > 与传统父传子通讯一致


* reudx
    > redux与react是两个独立产品
    * 使用步骤
        1. 安装
            ```bash
                npm install redux
            ```
        2. 引入
            ```js
                const {createStore} from 'redux'
            ```
        3. 创建store

            ```js
                const store = createStore(reducer,state)
            ```
        4. 操作
            > 利用store对象的方法进行操作
            * 获取：store.getState()
            * 修改: store.dispatch(action)
            * 监听: store.subscribe(fn)
* 核心参数
    * store     仓库
    * reducer   修改状态的方法  
        > 一般在reducer中定义所有State的修改方式 
        * 是一个纯函数
        * 接收state和action作为参数
        * 必须返回一个新的state
    * state     全局状态（共享数据）
    * action    动作/命令
        > 格式：{type}

    ```js
        //vuex
        const store = new Vuex.Store({
            state:{},
            mutations:{
                login(state,payload){
                    state.userInfo = {}
                }
            }
        })
        store.commit('login')
    ```
* redux与react组件的结合
    > redux与react是两个独立产,他们之间没有任何关联
    * 需要解决以下问题
        * 方便获取
        * 方便修改
        * 能实现自动刷新
    * 解决方案
        * 在React组件中编写redux代码
            * 繁琐
            * 可维护性差
        * 高阶组件

* 组件刷新的场景
    * state被修改
    * props被修改
    * 父组件刷新
    * 强制刷新

### 练习
* 实现一个增强版的withRedux高阶组件，支持按需传入redux数据

## day6-3

### 复习
* redux
    * 是什么
    * 有什么用
    * 怎么用
* reudx
    * 使用步骤
        ```js
            import {createStore} from 'redux'
            const state = {
                userInfo:{}
            }
            const reducer = function(state,action){
                // state: 最新状态
            }
            const store = createStore(reducer,state)
        ```
    * 核心API
        * store
        * state         状态，共享的数据
            > immutable数据（不可变数据）
        * reducer       修改状态的方法
            * 纯函数
            * 必须返回一个新的state
            * 接收state与action作为参数
        * action
            * 格式：{type,payload}
            * store.dispatch
    * store常用方法
        * getState()            获取
        * dispatch(action)      修改
        * subscribe(fn)         监听

* redux与react组件的结合
    > react与redux是两个独立的产品
    * 在React组件中编写redux代码
    * 高阶组件
        * withRedux
        * withStore
            * 结合：在react组件中方便使用redux数据与修改方法
            * 可维护性：结合的基础上进行代码分离，把redux相关代码几种放在某个唯一，更方便后期维护

### 知识点
* 封装增强版withStore
* react-redux桥接工具
    * 原理
        * context（`Provider`）   实现redux数据共享
        * 高阶组件（`connect()`） 高阶组件传递需要的数据
    * 使用步骤
        1. 安装
            ```bash
                npm install react-redux
            ```
        2. 共享数据
            > 利用context技术，在父组件共享store
            ```js
                <Provider store={store} context={context}>
                    ...
                </Provider>
            ```
        3. 接收数据
            > 利用connect高阶组件设置传入目标组件的redux数据
            ```js
                connect(mapStateToProps,mapDispatchToProps)(App)
            ```

* redux模块化（reducer模块）
    * vuex模块化
        ```js
            modules:{
                user,
                cart,
            }
        ```
    * reducer模块化
        * 使用`combineReducers()`把多个reducer合并成一个大的reducer
        * 尽量在模块中定义state初始值
        * 模块化后只影响state的获取，不影响dispatch操作
        ```js
            function userReducer(state=initState,action){

            }
            const reducer = combineReducers({
                user:userReducer,
                common:commonReducer,
                iterview:interviewReducer
            })
            const store  = createStore(reducer)
        ```

* Action Creator
    > action的构造器，一个用户创建action的函数，主要用于简化操作
    * bindActionCreators

    ```js
        store.dispatch({type:'USER_LOGIN_SYNC',payload})
    ```


## day6-4

### 知识点
* Redux工作流程
* 简化版redux
    ```js
        import {createStore} from 'redux'
        const store = createStore(reducer,state)
    ```
* ES7装饰器: @
    ```js
        // 需要以下配置
        ['@babel/plugin-proposal-decorators',{legacy:true}]
    ```

* redux中间件
    * createStore(reducer,initState,enhancer)
    * 常用中间件
        * redux-thunk
        * redux-promise
        * redux-saga
    * redux-thunk的使用
        ```js
            // vuex
            {
                state:{
                    userInfo:{}
                },
                mutations:{
                    login(){}
                },
                actions:{
                    loginAsyn(context){
                        //ajax
                        context.commit('login')
                    }
                }
            }

            // redux-thunk中间件
            dispatch(function(dispatch){
                // ajax
                dispatch({type:'login'})
            })
        ```

* 生成器函数与迭代器
    > 生成器函数返回一个迭代器
    * yield  暂停并返回
    * return 结束并返回
    * 迭代器：能自定义遍历规则的对象
        * 带next方法
            > 调用next()返回一个格式为{value,done}的对象
            * value：每一次迭代的返回值
            * done：是否完成迭代
        * 状态
            * suspended     挂起（没有迭代）
            * closed        关闭（迭代完成）
    ```js
        // 普通函数
        function show(){
            return 100
        }
        show();// undefined,100

        // 构造函数
        function show(){
            return {}
        }
        new show(); // object

        // 异步函数
        async function show(){
            return 100
        }
        show();// promise

        // 生成器函数
        function * show(){

        }
        show(); // 返回迭代器
    ```

## day6-5

### 复习
* redux与vuex
        redux               vuex
    *   state               state
                            getter
    *   reducer             mutation
    *   middleware          action
    *   combineReducers     modules
    *   react-redux         与Vue组件原生结合(this.$store)

* 中间件
    * redux-thunk
        > 让dipatch支持函数
        ```js
            dispatch({type:'login'})
            dispath(function(dispatch){
                //ajax
            })
        ```
    * redux-saga
        * 生成器+迭代器
        * 使用步骤
            1. 引入saga
                ```js
                    import createSagaMiddleware from 'redux-saga';
                ```
             2. 创建saga中间件
                ```js
                    const sagaMiddleware = createSagaMiddleware();
                ```
            3. 将 sagaMiddleware 连接至 Store
                ```js
                    let enhancer = applyMiddleware(sagaMiddleware)
                    const store = createStore(reducer,enhancer)
                ```
            4. 引入并运行自定义Saga配置
                ```js
                    import rootSaga from './saga'
                    sagaMiddleware.run(rootSaga);
                ```
        * 执行过程
            > action1 -> redux-saga -> action2 -> reducer
            * action1: sagaAction
            * axction2: reducerAction

            > 注意：避免action1与action2同名

* Hooks
    * 函数组件与类组件的区别
        * 状态
        * 生命周期
        * this
        * 自我刷新
            * 修改state
            * 强制刷新
    * 注意事项
        * hook只能在函数组件或其他hook中使用
        * 只能用在函数最外层
            > 不能在条件、循环、函数内等地方使用
    * 常用的hook
        * useState()：
            > 每次刷新组件useState会得到最新的值（而不是初始值）
            ```js
                const [state,setState] = useState('')
                // state: 状态，状态被修改，函数组件会自动刷新
                // setState(): 修改状态的方法，不支持回调

                // 修改state
                setState(newData)
                setState((preData)=>{
                    return {

                    }
                })
            ```
        * useEffect
            > 格式：`useEffect(fn,[dependencies])`
            * 用法一：`useEffect(fn)`
                > 等效于componentDidMount + componentDidUpdate的效果
            * 用法二：`useEffect(fn,dependencies)` 
                > 等效于componentDidMount+shouldComponentUpdate的效果，只有在依赖发生改变时才执行effect中的代码
            * 用法三：`useEffect(fn,[])` 
                > 等效于componentDidMount的效果
            * 用法四：useEffect返回一个函数
                > 等效于componentWillUnmount的效果
        * useMemo
            > 一般用于编写一些比较耗费资源且无需重复执行的代码，以达到优化性能的目的，返回值为回调函数的结果
            * 用法一：useMemo(fn)
                > 与传统写法一致（不推荐）
            * 用法二：useMemo(fn,[])
                > 只有在初始化时计算，以后组件的每次刷新都拿到缓存值
            * 用法三：useMemo(fn,[dependencies])
                > 只有在初始化时与依赖发生改变时计算,否则得到缓存值
        * useCallback
            > 缓存函数
            * 用法一：`useCallback(fn)`
                > 初始化和组件刷新时都创建一个函数，与传统用法一致（不推荐）
            * 用法二：`useCallback(fn,[])`
                > 只有初始化时创建函数，更新时从缓存中获取
            * 用法三：`useCallback(fn,[dependencies])`
                > 只有初始化与依赖发生改变时创建函数，否则从缓存中获取

### 项目介绍环节
1. 自我介绍
    > 让面试官快速了解我
2. 项目介绍
    * 项目是做什么的
    * 使用什么技术栈
    * 我在项目中负责的部分
    * 项目亮点
    * 遇到哪些问题及解决方案



## day7-1
### 复习
* context
    ```js
        const context = React.createContext({username:'laoxie'})
        // 2. 父组件共享数据
        <context.Provider value={{a:10,b:20}}>
            <App/>
        </context.Provider>
        // 3. 子组件接收
        <context.Consumer>
            {
                (value)=>()
            }
        </context.Consumer>
        // 类组件: this.context
        Child.contextType = context;
        // 函数组件：useContext()
    ```
### 知识点
* Hooks
    * `useContext(context)`
    * `useReducer(reducer,state)`
        > 增强版的useState
        * 使用useReducer实现redux的功能
            > 使用自定义组件与context实现redux的功能
    * `useRef(initValue)`
        > 与createRef()类似，都会创建一个ref对象
        * 区别
            * createRef()没有默认值
            * useRef()在组件更新时不会重新创建新的ref对象，而是从缓存中获取，而createRef()每次都创建一个新的ref对象
    * `useLayoutEffect()`
    * 自定义hook

* 封装组件
    > 无条件传递children子节点
    * props通讯
        * props校验
        * props默认值
    * 内容通讯：children
        > 类似于vue中的插槽
        * 文本： 字符串
        * 一个元素：虚拟节点Object
        * 多个元素：多个虚拟节点组成的Array
        * 函数
    * Render Props
        > 类似与vue中的作用域插槽
    ```js
        // 类似与vue中的插槽
        <MyComponent>abc</MyComponent>
        <MyComponent>
            <div></div>
        </MyComponent>
        <MyComponent>
            <div></div>
            <span></span>
        </MyComponent>

        // 类似与Vue中的作用域插槽
        <MyComponent>
            {
                (data)=>{
                    return (
                        <div>{data}</div>
                    )
                }
            }
        </MyComponent>


        // 
        <MyComponent 
            renderHeader={<div></div>}
            renderFooter={(data)=><div></div>}
        >

        </MyComponent>

        function MyComponent(props){
            const data = 100;
            return (
                <div>
                    <header>
                        {props.renderHeader}
                    </header>
                    {props.children(data)}
                    <footer>
                        {props.renderFooter(data)}
                    </footer>
                </div>
            )
        }
    ```

## day7-2

### 知识点
* react项目
    * 项目要求
    * 项目创建
        ```bash
            # 安装
            npm i -g create-react-app

            # 创建项目
            create-react-app myapp
        ```
    * cra项目扩展webpack配置
        * 找到react-scripts模块代码进行修改（不推荐）
        * eject (不推荐)
            > 单向操作不可逆，`npm run eject`命令暴露项目的配置，这样用户就可以完全取得 webpack 文件的控制权
        * react-app-rewired
            1. 安装react-app-rewired模块
            2. 根目录创建config-overrides.js文件
                > 文件为一个遵循commonJS规范的文件
            3. 修改package.json中的npm script
                ```json
                     "scripts": {
                        -   "start": "react-scripts start",
                        +   "start": "react-app-rewired start",
                        -   "build": "react-scripts build",
                        +   "build": "react-app-rewired build",
                        -   "test": "react-scripts test --env=jsdom",
                        +   "test": "react-app-rewired test --env=jsdom",
                            "eject": "react-scripts eject"
                    }
                ```

* 全局状态管理方案
    * redux + react-redux
    * useReducer
    * mobx + mobx-react

* hard code 硬编码
    ```js
        fetch('http://120.76.8.12:2003/api/iq').then(response=>response.json()).then(data=>{

        })
    ```
* fetch的二次封装
    ```js
        export const baseUrl = process.env.NODE_ENV === 'production' ? 
        'http://120.76.247.5:2002/'  // 生产环境
        : 
        'http://120.76.247.5:2002' // 开发环境

        export const apiUrl = baseUrl + '/api';


        function request(url,data={},config={}){
            url = (url.startsWith('http') ? '' : apiUrl) + url;
            
            if(config.method === undefined){
                config.method = 'get';
            }
            config.method = config.method.toLowerCase();

            // get,delete通过url传参
            if(['get','delete'].includes(config.method)){
                const params = [];
                for(let key in data){
                    params.push(`${key}=${data[key]}`)
                }
                if(params.length>0){
                    url = url + (url.includes('?') ? '&' : '?') + params.join('&')
                }
            }
            // 通过请求体传参
            else if(['post','put','patch'].includes(config.method)){
                config.body = JSON.stringify(data);
                if(config.headers === undefined){
                    config.headers = {}
                }
                config.headers['Content-type'] = 'application/json'
            }

            return fetch(url,{
                ...config,
            }).then(res=>{
                return res.json(); // res.json()得到promise对象
            })
        }

        // '/iq?page=1&size=10
        // '/iq?username=tt&page=1&size=10
        // request('/iq?username=tt',{page:1,size:10}).then(data=>)
        // request('http://120.76.8.12:2003/api/iq').then(data=>)
        // request('/iq',{page:1,size:10},{method:'post'})

        request.post = function(url,data,config={}){
            config.method = 'post';
            return request(url,data,config);
        }
        request.delete = function(url,data,config={}){
            config.method = 'delete';
            return request(url,data,config);
        }
        request.put = function(url,data,config={}){
            config.method = 'put';
            return request(url,data,config);
        }
        request.patch = function(url,data,config={}){
            config.method = 'patch';
            return request(url,data,config);
        }
        request.get = function(url,data,config){
            return request(url,data,config);
        }
    ```


## day7-5

### 知识点
* 数据可视化
    * 展示途径
        * canvas
            > 位图
        * svg
            > 矢量图（资源占用少，放大不失真）
    * 第三方工具
        * echarts
            * canvas
        * hicharts
            * svg
        * chart.js
        * d3.js

    * 坐标系
        * 直角坐标系
        * 极坐标系
        * 地理坐标系（GEO）
        * 单轴坐标系
    * 图表类型
        * 折线图
        * 柱状图
        * 饼状图
        * K线图


## day8-1

### 知识点
* 微信小程序文件组成
    * json  配置文件
    * js    逻辑文件
    * wxss  样式文件
    * wxml  结构文件

* 按作用范围区分
    * 全局通用文件
        > 根目录下，作用于所有页面
        * app.json
        * app.wxss
        * app.js

    * 页面级别文件
        > pages文件夹下，只在当前页面生效
        * [PAGE].json
        * [PAGE].wxss
        * [PAGE].js
        * [PAGE].wxml
* json配置文件
    * app.json
    * PAGE.json
    * project.config.json   项目配置文件
    * sitemap.json      网站地图
* 页面类型
    * tabbar页面
        > 设置在app.json中的tabbar属性的页面
    * 普通页面
* wxss样式文件
    * 类型
        * app.wxss
        * PAGE.wxss
    * 新增尺寸单位：rpx
    * 选择器
        * 不支持属性选择器与伪类选择器
        ```css
            <div></div>
            div:hover{background:#f00}

            <div><span>￥</span></div>
            div::before{
                content:'￥'
            }
        ```
        * 伪元素
            * ::before
            * ::after
            * ::first-line  （不支持）
            * ::first-letter  （不支持）
* js文件
    * app.js    应用
        > 通过`App()`注册一个应用，一个小程序只能有一个应用
        * onLaunch
        * onShow     监听小程序显示
        * onHide     监听小程序隐藏
    * PAGE.js   页面逻辑文件
        > 通过`Page()`注册小程序的一个页面
        * data  页面
        * onLoad    页面加载事件
        * onShow    监听页面显示
        * onHide    监听页面隐藏
* 查看文档


## day8-2

### 知识点
* data
    * 获取：this.data.xx
    * 修改: this.setData()
* 数据绑定
    * 单向绑定：{{}}
    * 双向绑定：
        * 单向+事件：
            > value={{data}} + bind:input
        * model:value
            * 不支持数据路径，如model:value="{{data.xx}}"
* 事件系统
    * 事件绑定方式
        * bind  事件处理函数在冒泡阶段执行
        * catch 事件处理函数在冒泡阶段执行，并会阻止继续向上冒泡
        * capture-bind  事件处理函数在捕获阶段执行
        * capture-catch 事件处理函数在捕获阶段执行，并会阻止继续向下传播
    * event事件对象
        * detail
        * target
        * currentTarget
    * 事件类型
        * 移动端事件：click -> touch(touchstart+touchmove+touchend)
        * 常用事件类型
            * touch
                > touchstart + touchmove + touchend + touchcancel
            * tap
            * longpress
            * input
            * ...
    * 传参
        > 利用自定义属性(`data-xx`)进行传参，在事件处理函数中通过dataset获取
* 列表渲染
    * wx:for
        > 默认使用item、index作用数据的引用和索引值
    * wx:for-item: 修改默认item变量名
    * wx:for-index：修改默认index变量名
    * wx:key    
        > 在Vue或react中使用唯一值作为key，在小程序中使用唯一值对一个的键作为key
        ```js
            [
                {
                    _id:'1234'
                },
                {
                    _id:'4567'
                }
            ]
            ['a','b','c']
            // vue/react
            v-bind:key="item._id" :key="item"
            key={item._id}  key={item}

            // 小程序
            wx:key="_id"    wx:key="*this"
        ```
* 条件渲染
    * wx:if
    * wx:else
    * wx:elif
    * 三元运算
    * hidden
        > `hidden`类似与Vue中的v-show，`wx:if`类似于vue中的v-if
        ```js
            <view hidden="{{show}}"></view>
        ```

* 组件
    * 内置组件
    * 自定义组件
        * 定义：Component()
            * data
            * properties    类似Vue的props
            * methods
            * observers     类似Vue的watch
            * behaviors     类似Vue的mixins
                ```js
                    const myBehavior =  Behavior({
                        // 以下为复用代码
                        behaviors: [],
                        properties: {
                            myBehaviorProperty: {
                                type: String
                            }
                        },
                        data: {
                            myBehaviorData: {}
                        },
                        attached: function(){},
                        methods: {
                            myBehaviorMethod: function(){}
                        }
                    })
                    behaviors:[myBehavior]
                ```
            * lifetimes: 生命周期钩子函数编写位置
                * created	在组件实例刚刚被创建时执行
                * attached	在组件实例进入页面节点树时执行
                * ready	在组件在视图层布局完成后执行
                * moved	在组件实例被移动到节点树另一个位置时执行
                * detached	在组件实例被从页面节点树移除时执行
                * error 每当组件方法抛出错误时执行
            * pageLifetimes 组件所在页面的生命周期声明对象
                * 这里可以使用页面生命周期函数
            * externalClasses   组件接受的外部样式类
        * 使用组件
            * 声明
                > 需要在配置文件中的`usingComponents`注册组件名称
                * 全局组件
                    > 可以在任意地方使用
                * 页面组件
                    > 只能在声明的页面中使用
            * 使用

* 自定义tabbar
    > 只在tabbar页面显示，非tabbar页面不显示

    * 使用自定义tabbar会在每个页面都是一个组件实例

## day8-3

### 知识点
* 微信小程序使用npm模块
    1. 初始化package.json
    2. 安装模块
    3. 构建npm
        * 勾选“使用npm模块”
        * 工具->构建npm
* 第三方组件库的使用
    * @vant/weapp       有赞组件库
        1. 安装模块
        2. 去除 app.json 中的 `"style": "v2"`
        3. 构建npm
        4. 声明组件（全局、局部）
        5. 使用组件
    * weui-miniprogram  官方组件库

* 微信小程序模块化开发
    * js模块化
        * commonJS
        * ESModule
    * wxs模块化
        > weixin script，基于ECMA5语法的支持commonJS规范的模块化脚本文件，
        ```html
            <script>
                var a = 10;
                console.log(a);
            </script>
            <script src="./tools.js"></script>
            <script type="module">
                import tools from './tools.js'
                var a=20;
            </script>
            <script type="module" src="./tools.js"></script>
        ```
        ```wxml
            <wxs module="m1">
                var m2 = require('./m2.wxss')
                var a=10;
                function sum(a,b){
                    return a+b;
                }
                module.exports = {
                    a:a,
                    sum:sum
                }
            </wxs>
            <wxs module="m2" src="./m2.wxs"></wxs>
            <view>{{m1.a}}</view>
            <view>{{m1.sum(10,20)}}</view>
        ```

* 复用wxml结构
    * 组件
    * wxml模板
        > 简化版的组件
        * 定义
            ```html
                <template name="list"></template>
            ```
        * 使用
            1. 引入模板文件
                * `<import/>`
                * `<include/>`
                ```html
                    <import src="/template.wxml"/>
                ```
            2. 使用模板
                ```html
                    <template is="list" />
                ```
                * 传递数据
                    ```js
                        <template is="list" data="{{}}">
                    ```
* ajax请求
    * wx.request()
    * 基于promise实现wx.request的二次封装


## day8-4

### 知识点
* 下拉刷新与滚动加载
* 分享
* 授权
    * 获取用户信息
        * 直接调用wx.getUserInfo()获取用户信息
            ```js
                wx.getUserInfo()
            ```
        * 必须伴随用户点击行为才能获取用户信息(调用wx.getUserInfo())
            > 点击按钮后会出现弹窗，必须得到用户授权
            ```js
                // getUser函数中直接得到用户信息
                <button open-type="getUserInfo" bind:getuserinfo="getUser"></button>

                // 需要在getUserInfo事件处理函数中调用wx.getUserInf()接口获取用户数据（前提是得到scope.userInfo授权）
                <button bind:tap="getUserInfo"></button>
            ```
        > 以上按钮获取用户信息方式与wx.geUserInfo获取用户信息方式已弃用，目前使用wx.getUserProfile获取用户信息

        * wx.getUserProfile
            > 该接口只能通过**用户点击事件**调用，每次通过该接口获取用户个人信息均需用户确认
            
        * open-data
            * type
    * 授权流程
        1. 获取用户授权信息：wx.getSetting()
        2. 如果没有授权，则通过wx.authorize() 主动向用户发起授权请求
            > 并不是所有的授权都可以弹窗，如scope.userInfo，需要通过用户点击行为才允许获取
        3. 如用户拒绝需要通过wx.openSetting()打开设置界面
            > 2.3.0开始，必须伴随用户点击事件才能使用该接口


* 用户位置
    > 需要scope.userLocation授权


* 上线
    * 请求地址
    * 项目成员


## day8-5

### 知识点
* http与https
    * ssl
* 云开发
    * 开通
    * 环境
        > 免费版最多能添加2个环境（dev+pro）
    * 资源
        * 后端          云函数（基于NodeJS）
        * 数据库        数据库（类似Mongodb）
        * 存储          存储空间（图片等文件）

    * 数据库
        * 小程序端操作数据库
            > 相当于在前端直接操作数据库，有权限限制
            0. 初始化
                ```js
                    wx.cloud.init({
                        // env 参数说明：
                        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
                        //   如不填则使用默认环境（第一个创建的环境）
                        env: 'test-0tcfp',
                    });
                ```
            1. 连接数据库
                ```js
                    // 指定环境连接数据库（不推荐）
                    const db = wx.cloud.database({
                        env:'test-0tcfp'
                    })

                    // 推荐初始化时指定环境
                    const db = wx.cloud.database()
                ```
            2. 选中集合
                ```js
                    const col = db.collection('category')
                ```
            3. CRUD
                1. 过滤条件
                    * doc()
                    * where()
                    * limit()
                    * skip()
                    * orderBy()
                    * field()
                2. 请求
                    * add()
                    * remove()
                    * update({data})
                    * get()
                    * count()
                ```js
                    // 查询单个数据
                    col.doc("381d149061a97e2f002c4ca809831069").get().then()

                    // 根据条件查询数据
                    col.where({_id:"381d149061a97e2f002c4ca809831069"}).get().then()

                    col.where({name:'HTML5'})
                    col.where({order:1})
                ```
        * 在云函数端操作数据库
            > 就是在后端操作数据库
            * 定义云函数
                > 基于nodeJS与wx-server-sdk模块
            * 调用云函数
                * wx.cloud.callFunction()

## day9-1

### 知识点
* 跨平台框架
    > 实现原理：实现了一个编译器，把一份代码编译到各个平台的代码
    * uni-app
    * mpvue
    * wePY
    * taro

* 应用类型
    * webApp
        > 跨平台
    * NativeApp
        * iOS
        * android
        * winPhone
    * HybridApp     混合
    * 小程序



## day9-2

### 知识点
```js
    /**
     * 计算两个数字的和
     * @a {Number}
     * @b {Number}
     * @return {Number}
     */
    const add = function(a,b){
        return a+b;
    }

    add(10,20);//30
    add(10,'20'); // 1020
    let number = 1;
    let number = '10'
    add(num1,num2); //1-01
```

## day9-3

### 知识点
* flow
* typescript
    > type + script
    ```js
        let price = 998
        price = '1998'

        price.toFixed(2)


        function sum(a,b){
            return a+b;
        }

        sum(10,20);//30

        sum(10,goods.prices)
        sum(10,20,30,40)

        10-'5' = 5;
        let
    ```

    ```ts
        let price:number = 998;
        price='1998'
    ```  
* 类型系统
    > 变量类型注解 + 类型检查
    * 类型安全：强类型与弱类型
        ```js
            const obj = {}
            obj['username'] = 'xxx'
            let key = 100;
            let key2 = {}
            obj[key] = 'test'
            obj[key2] = 'test2'; {'object Object':'test2'}

            let arr = [10,20,30]
            arr+10;
        ```
        > 结论：javascript属于弱类型语言
    * 类型检查：静态类型与动态类型
        ```js
            let username = 'laoxie'
            username = 18;
        ```
        > 结论：javascript属于动态类型语言

* typescript类型（变量类型）
    * 基本类型
        * number
        * string
        * boolean
    * 特殊类型
        * null
        * undefined
        * void
        * any
    * 复杂类型
        * 函数
            * 参数
            * 返回
            * 函数重载
        * 数组
            * type[]
            * Array<type>
        * 对象：interface
        * 枚举

* 类型断言
    * as
    * 尖括号
    ```ts
        const userInfo = localStorage.getItem('userInfo');// string|null

        (userInfo as string).length
        <string>userInfo.length
    ```

* 类型声明文件
    > .d.ts


* 在react项目中配置typescript
    * 手动搭建
    * CRA
        ```js
            create-react-app myapp --template typescript
        ```
* 在nodeJS项目中配置typescript
    * 依赖
        * "typescript"
        * "@types/node"
        * "@types/express"
        * "ts-node"


* App类型
    * webApp: HTML+CSS+JS
        > 优点：跨平台，成本低，缺点：无法调用硬件设备接口
    * NativeApp
        > 需要安装
        * iOS：objectC/swift + xml
        * android: java + xml
        * winPhone:
        * PC: 

        PS：web技术也能开发navtiveApp，如react-native，weex, flutter
    * HybridApp 混合
        > 综合webApp与NativeApp的优点
    * 小程序


## day9-5

### 知识点

* Options API 选项式API
```js
    new Vue({

    })

    Vue.component('list',{
        // Options API
        data(){
            return {
                datalist:[],
                newlist:[]
            }
        },
        computed:{
            donelist(){
                return this.datalist.filter(item=>item.done)
            }
        },
        methods:{
            getData(){
                // ajax()
            }
        },
        created(){
            this.getData()
            
        },
        destroyed(){

            cancelAjax()
        }
    })
```

* Composition API 组合式API
    ```js
        app.component('list',{
            setup(){
                // 功能1（100行）
                const list = Vue.reactive([])
                const donelist = Vue.computed(()=>list.filter(item=>item.don))
                const getData = function(){

                }
                Vue.onBeforeMount(()=>{
                    getData()
                })
                Vue.onDestroyed(()=>{
                    cancelAjax
                })


                //功能2（50行）
                const newlist = Vue.ref([])




                // 功能3（300行）

            }
        })
    ```

* 组件
    * 分类
        * 全局
            ```js
                // vue2
                Vue.component()

                // vue3
                const app = createApp()
                app.component(name,options)
            ```
        * 局部: components
    * 组件选项
        > 支持vue2大部分选项（选项式API）

* 组合式API
    * 入口：setup()
    * 响应式Api
        > 由于Proxy代理的时对象本身，而不是它的属性，所有都要想拥有响应式效果，不要对对象进行解构
        * reactive()
            ```js
                const data = {a:10,b:20}
                const rData = reactive(data); // 原理：rData = new Proxy(data,function(){})
            ```
        * ref()
            ```js
                const data = {a:10,b:20}
                const rData = ref(data); // 原理：rData = { value: new Proxy(data,()=>{})}
            ```
        * readonly()
        * toRef(target,prop)
        * toRefs(target)
        * computed() 计算属性
        * watch()
        * watchEffect()
            ```js
                const qty = ref(1)
                watchEffect(()=>{
                    // 这里的代码在初始化与依赖被修改时执行
                    console.log(qty.value);
                })

                const data = reactive({
                    count:10,
                    a:10,
                    b:20
                })

                // watch 与 watchEffect不同之处在于，它只有在监听的数据发生改变时执行函数
                // 监听整个响应式对象
                watch(data,()=>{
                    // 手动监听qty，当qty发生改变时执行这里的代码
                    // 可以实现当监听的值发生改变是执行其他操作
                })
                // 监听单个属性
                watch(()=>data.count,()=>{})
            ```
            
* script setup
    * 全局方法
        > 不需要导入，只能在setupscript中使用
        * defineProps()
        * defineEmits()
        * defineExpose()
    * useAttrs()
    * useSlots()

* style
    * scoped
        * 覆盖组件内部样式
            * `/deep/`
            * `>>>`
            * :deep() 深度伪类选择器
        * 覆盖slot插槽内容样式
            * :slotted() 插槽伪类选择器
        * 全局样式伪类
            * :global
            ```css
                .title{color:#58bc58}; 
                /*.title[data-v-xxxx]{color:#58bc58}*/ 
                :global(.title) {
                    color: red;
                }
                /*.title{color:red}*/
            ```
    * css模块化
        * css-loader
        ```js
            <style module></style>
        ```
    *