• vue面试装X知识汇总


    对你有帮助的文章

    vue2与vue3的区别

    vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具

    Vue 3教程(适用于Vue 2用户)

    Vue3 究竟好在哪里?(和 React Hook 的详细对比)



    1、对于MVVM的理解

    MVVM 是 Model-View-ViewModel 的缩写。

    Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
    View 代表UI 组件,它负责将数据模型转化成UI 展现出来。
    ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。

    viewmodel和model实现双向数据绑定


    2、Vue的生命周期

    1.什么是vue生命周期?

    答: Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。

    2.vue生命周期的作用是什么?

    答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    3.vue生命周期总共有几个阶段?

    答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

    4.第一次页面加载会触发哪几个钩子?

    答:会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

    5.DOM 渲染在 哪个周期中就已经完成?

    答:DOM 渲染在 mounted 中就已经完成了。


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

    Vue2.x

    采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。

    Vue3.x

    使用es6提供的 proxy API进行数据代理

    使用proxy的好处

    Object.defineProperty()只能监听对象的某一个属性,不能全对象监听
    省去了闭包和for ... in 提高性能  proxy可以直接绑定整个对象
    不用对数组进行特异性处理,proxy可以监听数组内部数据变化


    4、Vue组件间的参数传递

    1.父组件与子组件传值

    父组件传给子组件:子组件通过props方法接受数据;
    子组件传给父组件:$emit方法传递参数

    2.非父子组件间的数据传递,兄弟组件传值

    eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道。)


    5、Vue的路由实现:hash模式 和 history模式

    hash模式:

    在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

    history模式:

    history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。
    Vue-Router 官网里如此描述: “不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”


    6、vue路由的钩子函数

    首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
    beforeEach主要有3个参数to,from,next:
    to:route即将进入的目标路由对象,
    from:route当前导航正要离开的路由
    next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。


    7、怎么定义 vue-router 的动态路由? 怎么获取传过来的值

      答:在 router 目录下的 index.js 文件中,对 path 属性加上 /:id,使用 router 对象的 params.id 获取。


    8、vue常用的修饰符?

    答:.prevent: 提交事件不再重载页面;.stop: 阻止单击事件冒泡;.self: 当事件发生在该元素本身而不是子元素的时候会触发;.capture: 事件侦听,事件发生的时候会调用


    9、vue.js的两个核心是什么?

    答:数据驱动、组件系统


    10、vue中 key 值的作用?

    答:当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

  • 相关阅读:
    钉钉小程序解析html的方法
    git使用
    electron-vue项目
    数组方法大全
    关于AJAX
    常用的东西
    常用正则表达式
    选项卡
    进度条
    泛型单列
  • 原文地址:https://www.cnblogs.com/kousum/p/14288730.html
Copyright © 2020-2023  润新知