5.22作业

1.ref作用：

        放到 dom 节点上 >> 获取原生 dom
        组件身上 >> 获取组件实例 >> 可以获取组件内部所有的方法和数据

2. vue组件通信?

        父传子
                在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值。
        ⼦传父
                首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了
        ⾮⽗⼦组件通信
                通过中央事件总线,我们也称之为eventBus,在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫b u s 传 数 据 的 时 候 用 t h i s . bus 传数据的时候用this.bus传数据的时候用this.bus.e m i t 传 在 要 接 受 数 据 的 子 组 件 在 c r e a t e d 钩 子 函 数 中 用 emit传 在要接受数据的子组件 在 created钩子函数中 用emit传在要接受数据的子组件在created钩子函数中用on 方法接收

 3.生命周期：

        vue：从创建vue对象到销毁vue对象的过程
        钩子函数：
                    vue框架中内置函数，在vue生命周期的不同阶段自动执行
                    初始化
                        beforeCreate
                        created
                    挂载
                        beforeMount
                        mounted
                    更新
                        beforeUpdate
                        updated
                    销毁
                        beforeDestroy
                        destroyed
                    统称：生命周期回调函数、生命周期函数、生命周期钩子    
                        new Vue({
                            beforeCreate,
                            data,methods
                            created
                            el
                                模板虚拟dom渲染真实dom
                            beforeMount 执行对应的真实dom
                            el 
                                模板中数据从虚拟dom渲染为真实dom
                            mounted 挂载完成
                            
                        })

4.声明周期划分四个

       1- 初始化
                        beforeCreate
                        created
                        过程：
                            1- new Vue()
                            2- 初始化事件与生命周期函数
                            3- beforeCreate：立即执行函数，不能操作data 与 methods
                            4- vue内部添加data 或者 methods
                            5- created 立即执行函数， 可以访问 data，methods
                            6- 开始编译，是否有el选项 el选项挂载到哪里
                                6.1- 没有调用$mount
                                6.2- 有 是否有模板
        2- 挂载
                        beforeMount
                        mounted
                        过程：
                            1- 有 模板  编译模板template 返回render渲染函数
                            2- 没有 编译el选项对应的模板
                            3- 虚拟dom渲染为真实dom -- 准备工作 html结构
                            4- beforeMount 立即执行
                            5- 将虚拟dom挂载到真实dom -- 数据
                            6- 挂载完毕 Mounted 立即执行
          3- 更新
                        beforeUpdate
                        updated
                            1- 当data数据被更新、修改时 触发钩子函数 beforeUpdate 此阶段获取不到更新的真实dom
                            2- 虚拟dom 重新渲染到真实dom
                            3- 触发钩子函数 updated 
                            4- 当data数据再次发生改变时 ，重复执行此操作 
        4- 销毁
                        beforeDestroy
                        destroyed
                        1- 当$destroy 触发时 （比如组件的dom被移除）
                        2- beforeDestroy 被触发
                        3- 拆卸数据监视器 、 子组件 和事件侦听器
                        4- 当实例销毁后 触发destroyed
           
        面试题：
                页面第一次加载时会触发几个钩子
                    beforeCreate created beforeMount mounted
                dom渲染在哪个周期完成？
                    mounted中完成

5.五.vuex的五个核心

          1. state：存放状态(全局状态数据) 必填项
          2. mutations：对于 state 成员进行同步修改操作（也可以支持异步操作）
          3.getters：获取 state 中的数据，类似于组件中的计算属性
         4. actions：进行异步操作，异步得到结果后通知 mutation 修改 state 成员
         5. modules：模块化状态管理，多状态文件管理时使用，开发项目时多为多模块项目
在多模块 vuex 中会有配置namespaced:true开启命名空间

6.vuex优点

          1. 能够在 vuex 中集中管理共享的数据，便于开发和后期进行维护
          2. 能够高效的实现组件之间的数据共享，提高开发效率
          3. 存储在 vuex 中的数据是响应式的，当数据发生改变时，页面中的视图也会同步更新
          4.vuex中的数据操作可以在开发阶段通过开发调试工具来进行追踪，便于开发
          简单来说，vuex 就是为了实现组件间通信的。使用 vuex 的好处：可以跨层级进行通信；vuex 中的所有操作都有记录；vuex 独立于组件系统，是专门用来管理数据的框架。