投稿 资料上传 搜索
您现在的位置是: 首页 > 文章 > 正文

vue面试题锦集整理

、  mvvm 框架是什么?   

     ue是实现了双向数据绑定的mvvm框架,当视图改变更新模型层,当模型层改变更新视图层。在vue中,使用了双向绑定技术,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View   

二 、  Vue的生命周期

        beforeCreate(创建前) 在数据观测和初始化事件还未开始
        created
(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来
        beforeMount
(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
        mounted
(载入后) el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
        beforeUpdate
(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
        updated
(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
        beforeDestroy
(销毁前) 在实例销毁之前调用。实例仍然完全可用。
        destroyed
(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。   

三、 Vue实现数据双向绑定的原理

        vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

        vue的数据双向绑定 MVVM作为数据绑定的入口,整合ObserverCompileWatcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observerCompile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input—>数据model变更双向绑定效果。

js实现简单的双向绑定

<body>

    <div id="app">

    <input type="text" id="txt">

    <p id="show"></p>

</div>

</body>

<script type="text/javascript">

    var obj = {}

    Object.defineProperty(obj, 'txt', {

        get: function () {

            return obj

        },

        set: function (newValue) {

            document.getElementById('txt').value = newValue

            document.getElementById('show').innerHTML = newValue

        }

    })

    document.addEventListener('keyup', function (e) {

        obj.txt = e.target.value

    })

</script>

、  vue优点

    轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb
    简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
    双向数据绑定:保留了angular的特点,在数据操作方面更为简单;
    组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;
    视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
    虚拟DOMdom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式;
    运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。

五、Vue组件间的参数传递

    1.父组件与子组件传值
        父组件传给子组件:子组件通过props方法接受数据;
        子组件传给父组件:$emit方法传递参数
    2.
非父子组件间的数据传递,兄弟组件传值
        eventBus
,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道。)

六、v-showv-if指令的共同点和不同点?

        当 v-if v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-ifv-for同时使用。
        如果v-ifv-for一起用的话,vue中的的会自动提示v-if应该放到外层去。   

七、如何获取dom?

        ref="domName" 用法:this.$refs.domName

八、说出几种vue当中的指令和它的用法?

            v-model双向数据绑定;
            v-for
循环;
            v-if v-show
显示与隐藏;
            v-on
事件;v-once: 只绑定一次。   

九、vue-loader是什么?使用它的用途有哪些?

        vue文件的一个加载器,将template/js/style转换成js模块。
        用途:js可以写es6style样式可以scsslesstemplate可以加jade   

十、v-modal的使用

        v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
        v-bind
绑定一个value属性;
        v-on
指令给当前元素绑定input事件。   

十一、分别简述computedwatch的使用场景

    computed:
    当一个属性受多个属性影响的时候就需要用到computed
    最典型的栗子: 购物车商品结算的时候
    watch:
    当一条数据影响多条数据的时候就需要用watch
    栗子:搜索数据

十二、Vue中双向数据绑定是如何实现的?

        vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法。   

十三、单页面应用和多页面应用区别及优缺点

        单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新
单页面的优点:
    用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容时的专场动画)。
单页面缺点:
    不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理);初次加载时耗时多;页面复杂度提高很多。

十四、v-ifv-for的优先级

    当 v-if v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-ifv-for同时使用。
    如果v-ifv-for一起用的话,vue中的的会自动提示v-if应该放到外层去。   

十五、assetsstatic的区别