zoukankan      html  css  js  c++  java
  • 面试知识-vue-1

    1.v-if和v-show的区别?

    1).v-show和v-if都是用来显示隐藏元素,v-if还有一个v-else配合使用,两者达到的效果都一样。

    性能方面去有很大的区别:

    2).v-show:不管条件是真还是假,第一次渲染的时候都会编译出来,也就是标签都会添加到DOM中。之后切换的时候,通过display: none;样式来显示隐藏元素。可以说只是改变css的样式,几乎不会影响什么性能。v-if:在首次渲染的时候,如果条件为假,什么也不操作,页面当作没有这些元素。当条件为真的时候,开始局部编译,动态的向DOM元素里面添加元素。当条件从真变为假的时候,开始局部编译,卸载这些元素,也就是删除。

    3).性能方面v-if绝对是更消耗性能的,因为v-if在显示隐藏过程中有DOM的添加和删除,v-show就简单多了,只是操作css。

    4).因为v-show无论如何都会渲染,如果在一些场景下很难出现,那么使用v-if。如果是一些固定的,条件内容都不怎么会改变的,频繁切换的,使用v-show会比较省性能。如果是子组件,每次切换子组件不执行生命周期,使用v-show,如果子组件需要重新执行生命周期,那么使用v-if才能触发。

    2.Vue生命周期

    beforeCreate

    created

    beforeMount

    mounted

    beforeUpdate

    updated

    beforeDestroy

    destroyed

    --------------------------

    beforeCreate

    实例组件刚创建,元素DOM和数据都还没有初始化,暂时不知道能在这个周期里面进行生命操作。

    created

    数据data已经初始化完成,方法也已经可以调用,但是DOM为渲染。在这个周期里面如果进行请求是可以改变数据并渲染,由于DOM未挂载,请求过多或者占用时间过长会导致页面线上空白。

    beforeMount

    DOM未完成挂载,数据也初始化完成,但是数据的双向绑定还是显示{{}},这是因为Vue采用了Virtual DOM(虚拟Dom)技术。先占住了一个坑。

    mounted

    数据和DOM都完成挂载,在上一个周期占位的数据把值给渲染进去。一般请求会放在这个地方,因为这边请求改变数据之后刚好能渲染。

    beforeUpdate

    只要是页面数据改变了都会触发,数据更新之前,页面数据还是原来的数据,当你请求赋值一个数据的时候会执行这个周期,如果没有数据改变不执行。

    updated

    只要是页面数据改变了都会触发,数据更新完毕,页面的数据是更新完成的。beforeUpdate和updated要谨慎使用,因为页面更新数据的时候都会触发,在这里操作数据很影响性能和容易死循环。

    beforeDestroy

    这个周期是在组件销毁之前执行,在我项目开发中,觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行,只不过beforeDestroy无法阻止路由跳转,但是可以做一些路由离开的时候操作,因为这个周期里面还可以使用data和method。比如一个倒计时组件,如果在路由跳转的时候没有清除,这个定时器还是在的,这时候就可以在这个里面清除计时器。

    Destroyed

    说实在的,我还真的不知道这个周期跟beforeDestroy有什么区别,我在这个周期里面调用data的数据和methods的方法都能调用,所以我会觉得跟beforeDestroy是一样的。

    3.vue的路由模式有:三种

    Hash: 使用URL的hash值来作为路由。支持所有浏览器。(原理是onhashchange事件,url都会被浏览器记录下来,只能改变#后面的url片段)

    History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式。(根据history api中的pushState,replaceState两个方法)(通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面)

    Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。

    4.vue的数据双向绑定原理?

    VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。

    (实例:

    <input type="text" id="inp" />
    <div id="box"></div>
    <script>
    let obj = {};
    let oInput = document.getElementById('inp');
    let oBox = document.getElementById('box');
    Object.defineProperty(obj, 'name', {
    configurable: true,
    enumerable: true,
    get: function() {
    console.log(111)
    return val;
    },
    set: function(newVal) {
    oInput.value = newVal;
    oBox.innerHTML = newVal;
    }
    });
    oInput.addEventListener('input', function(e) {
    obj.name = e.target.value;
    });
    obj.name = 'xiaoming';
    </script>

     5.vuex的概念?

    1).state;=>基本数据

    2).getters=>从基本数据派生的数据 

    3).mutations =>提交更改数据的方法,同步! 

    4).actions =>像一个装饰器,包裹mutations,使之可以异步

    5).modules=>模块化Vuex

  • 相关阅读:
    c&c++中的宏
    cmake教程
    什么是Grunt
    npm-install camo
    在node.js中建立你的第一个HTTp服务器
    highChart数据动态更新
    css:before和after中的content属性
    清除float浮动三种方式
    中文标准web字体
    网站桌面端和手机端不同url的设置
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11809008.html
Copyright © 2011-2022 走看看