Vue核心知识一览

1. 生命周期

    

        beforeCreate :

                数据观测 和 初始化事件还未开始

 

        created : 

                完成数据观测 , 属性和方法运算 , 初始化事件 , $el属性还没有显示出来

 

        beforeMount : 

                render函数 首次被调用. 

                完成了 编译模板 , data中数据 结合 模板 生成了html虚拟对象.

                但未挂载到页面上

 

        mounted : 

                el属性 被 vm.$el 替换 , 并挂载到实例上之后调用.  

                使用内存中的html对象 替换掉 el属性指向的Dom对象.完成模板中的html渲染到html页面中.

                此过程可以进行ajax操作.

 

        beforeUpdate : 

                数据更新之前调用. 

                发生在虚拟dom重新渲染和打补丁之前.

                可以在该钩子中 进一步更改状态 . 不会触发重新渲染的过程

 

        updated :

                数据更新导致的虚拟dom重渲染之后调用.

                可以执行依赖于dom的操作.

                避免更新状态 , 也就是用到 dom时 , 最好时读操作 , 因为有可能导致更新无限循环.

                在服务器渲染期间不被调用.

 

        beforeDestroy : 

                实例销毁前调用 . 即 还可以操作实例.

 

        destroyed  :  

                实例销毁之后调用 . 

                调用后 所有的事件监听器会被移除.

                所有子实例被销毁.

                在服务器渲染期间不被调用.

 

1. 双向数据绑定

        实现原理 : 

            数据劫持 + 发布者-订阅者 模式.

                通过 Object.defineProperty() 来劫持各个属性的setter/getter .

                在数据变动时,发布消息给订阅者,触发相应监听回调.

 

 

 

1. 组件间参数传递

        父子组件传值

                父 -> 子 :  子组件通过props方法接受数据

                子 -> 父 :  $emit方法传递数据

 

        非父子组件传值

                eventBus : 事件中心 . 传递事件 , 接收事件 . 相当于中转站 .

                项目比较小的时候 推荐使用.

 

1. 路由

        hash模式 和 history模式

        

        hash模式 : 

                符号"#"及其后面的字符 所构成的字符串.

                js通过 window.location.hash获取

                hash不会包含在请求中传递.

               

        history模式:

                采用HTML5的新特性.

                提供了 pushState() , replaceState() 对浏览器历史记录栈进行修改.

                提供了 popState() 来监听转台的变更.

                想用好 必须有后台的配置支持.

 

1. 自定义指令

        局部指令:

                new Vue({

                    el:"#app",

                    data:{},

                    directives:{

                        dir_01:{

                            inserted(el){

                                console.log(el);

                                console.log(arguments);

                            }

                        }

                    }

                });

 

        全局指令:

                Vue.directive('dir2',{

                    inserted(el){

                        console.log(el);

                    }

                });

 

        指令的使用 : 

            <div id="app">

                <div v-dir_01 ></div>

                <div v-dir2 ></div>

            </div>

 

1. 自定义过滤器

        <div id="app">

            <input type="text" v-model="msg" />

            {{ msg | capitalize }}

        </div>

 

        局部过滤器:

            new Vue({

                el:"#app",

                data:{

                    return {

                        msg : ''

                    }

                },

                filters:{

                    capitalize : function(value){

                        if(!value) return ''

                        return value.toString().charAt(0).toUpperCase() + value.toString().slice(1);

                    }

                }

            });

 

        全局过滤器:

            Vue.filter('capitalize' , function(value){

                if(!value) return ''

                return value.toString().charAt(0).toUpperCase() + value.toString().slice(1);

            });

 

1. keep-alive

            keep-alive 是 Vue的一个内置组件 , 用以能避免重复渲染.

            包含两个属性 : include , exclude . 其中exclude的优先级更高.

            两个属性支持 正则,函数,数组等表达式. 

            多条件 用逗号 ',' 分隔.

 

1. vue的计算属性

            在模板中放入太多的逻辑会让模板难以维护.

            对数据进行复制处理 , 且可能多次使用的时候 , 尽量采取计算属性方式.

            优点 : 

• 数据处理结构清晰
• 依赖于数据 , 数据更新 ,  处理结果自动更新
• 计算属性内部this指向vm实例.
• 在template调用时,直接写计算属性名即可.
• 与methods相比:
• • 当依赖的数据不变时,computed会从缓存中获取
  • 而methods无论如何都会重新计算.

 

1. 其他面试题

        v-if 与 v-show 区别

            v-if 条件判断 , v-show 操作css属性 display ( block 或 none).

            v-show 性能更好.v-if 适用的情况更广.

 

        vueJs的核心是 : 数据驱动 , 组件系统

 

        vue 常用指令

            v-if , v-for , v-bind , v-on , v-show , v-else 

 

        vue常用修饰符

            .prevent : 提交事件不再重载页面

            .stop : 阻止事件冒泡

            .self : 当事件发生在该元素本身而不是子元素的时候触发

            .capture : 事件监听, 当事件发生的时候调用.

 

        v-on可以绑定多个方法.

 

        vue等单页面应用的缺点:

• 不支持低版本,最低支持IE9
• 不利于SEO
• 第一次加载页面耗时相对长一些
• 不能使用浏览器导航按钮前进,后退. 需要自行实现逻辑.