zoukankan      html  css  js  c++  java
  • vue面试题,快看看


    vue优点

    双向数据绑定:在数据操作方面更为简单

    组件化:组件的封装和复用,开发更高效

    虚拟DOM:不再使用原生dom操作节点,原生dom操作非常耗性能

    MVVM的理解

    Model是模型层

    View 是视图层

    ViewModel 介于View和Model之间,起桥梁作用,使视图和数据既能够分离又能通信,View的变化能实时让Model发生变化,而Model的变化也能实时更新到View

    vue原理

    双向数据绑定

    通过数据劫持,结合发布订阅模式的方式实现,达到数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变

    虚拟DOM

    用JavaScript对象来代替DOM节点

    // 原始dom节点
    
    <ul calss=‘myclass’>
    
      <li>初始文本</li>
    
    </ul>
    
    // 对象形式节点
    
    let ul = {
    
      tag: ‘ul’,
    
      attrs: { class: ‘myclass’ },
    
      children: [
    
         tag: 'li',
    
         attrs: {},
    
         children: ['初始文本']
    
    ]
    
    }
    
    // 通过修改对象属性来修改视图
    
    ul.children.children[0](‘修改后的文本’)

    组件传值

    父传子:

    父组件中,用v-bind,绑定属性值,子组件通过props接收

    子传父:

    子组件通过$emit传值,父组件通过v-on绑定的事件接收

    兄弟传值:

    通过中间值,也是就在main.js文件里,new一个vue实例实现传值

    Vuex的理解

    是vue的状态管理器

    State: 存放数据

    Getters: 监听数据

    Mutations: 提交更改数据的方法,同步

    Actions: 像一个装饰器,包裹mutations,使之可以异步

    Modules: 模块化vuex 

    mapState、mapGetters、mapActions

    生命周期

    创建前/后,载入前/后,更新前/后,销毁前/后

    beforeCreated 创建前

    created 创建后

    beforeMount 载入前

    mounted 载入后

    beforeUpdate 数据更新前

    updated 数据更新后

    beforeDestory 实例销毁前

    destroyed 实例销毁后

     

    父子组件得生命周期顺序

    渲染过程:

    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

    更新过程:

    父beforeUpdate->子beforeUpdate->子updated->父updated

    <keep-alive></keep-alive>的作用

    是 vue内置组件,可以保留其包含的组件的状态,避免重新渲染

    ref的作用

    获取dom元素

    获取子组件的data

    调用子组件的方法

    组件中key的作用

    key是节点唯一标识,方便diff算法识别节点,高效更新虚拟dom

    组件中name的作用

    在dev-tools中使用,dev-tools中是以组件name进行显示的

    配合keep-alive对组件缓存做限制

    组件中data为什么必须是一个函数

    写成函数,复用组件时,都会返回一份新的data,相当于每个组件都有私有的数据空间,各自维护数据,不会造成混乱。而写成对象形式,相当于所有组件共用一个data,会牵一发而动全身

    $nextTick的使用

    created() 钩子内进行的dom操作一定要放在vue.nextTick() 的回调函数中,created() 执行时dom实际并未渲染,此时进行dom操作是徒劳的,nextTick正好解决了这一问题

    路由的模式

    hash模式:即地址栏url中的#符号
    history模式:利用了 html5中window.history新增的 pushState() 、replaceState() 方法

    路由的导航钩子

    全局导航钩子:router.beforeEach(to,from,next),即路由守卫
    组件内的钩子:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

    路由懒加载的实现方式
    使用import,实现懒加载
    webpack提供的方法,实现懒加载

    路由传参方式

    path后添加id

    使用路由name匹配路由,通过params传递参数

    使用path匹配路由,通过query传递参数

    第一种方式,页面刷新参数会丢失,而其他两种不会

    v-show、v-if的区别

    v-show本质是控制样式的显示和隐藏

    v-if是动态添加或者删除DOM元素,不停的销毁和创建更耗性能

    less、scss申明变量方式

    less用@符申明和使用变量

    scss用$符申明和使用变量

  • 相关阅读:
    百度mp3地址解密码
    VB 在EXE后附加信息
    截屏函数
    Base64和StrToByte
    The Android ION memory allocator, DMABUF is mentioned as well
    DDC EDID 介绍
    Memory management for graphic processors TTM的由来
    科普 写display driver的必看 How video card works [2D的四种主要操作]
    GEM vs TTM
    DMABUF 背景介绍文章 Sharing buffers between devices
  • 原文地址:https://www.cnblogs.com/wx3091/p/12787930.html
Copyright © 2011-2022 走看看