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用$符申明和使用变量

  • 相关阅读:
    0827IO作业
    0927集合作业
    初学集合,以及泛型
    异常课——抛出
    Python环境变量配置
    安装Python
    MySQL多表操作
    MySQL增删改查
    Group by分组详解
    MySQL常用函数
  • 原文地址:https://www.cnblogs.com/wx3091/p/12787930.html
Copyright © 2011-2022 走看看