zoukankan      html  css  js  c++  java
  • vue面试常被问到的问题整理

    1、Vue的双向数据绑定原理是什么?

    答 : vue是采用数据劫持,并且使用发布-订阅者的开发模式。原理是观察者observer通过Object.defineProperty()来劫持到各个属性的getter setter,在数据变动的时候,会被observer观察到,会通过Dep通知数据的订阅者watcher,之后进行相应的视图上面的变化

    具体实现步骤,感兴趣的可以看看

    第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter 
    这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

    第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

    第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是: 
    1、在自身实例化时往属性订阅器(dep)里面添加自己 
    2、自身必须有一个update()方法 
    3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

    第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果

    2、请详细说下你对vue生命周期的理解?

    答 : 创建前/后,DOM渲染前/后,更新前/后,销毁前/后; 
    对于各个周期的理解: 
    创建前/后: 
    beforeCreated:此时的vue实例还没有挂载元素$el,数据对象data也是undefiend; 
    created:vue实例的数据对象data有了,但是$el还没有 
    载入前/后: 
    beforeMount:vue的实例的$el和data都初始化了,但还是挂载在之前虚拟的DOM节点上面,data.message还未替换 
    mounted :vue实例挂载完成,data.message成功渲染。 
    更新前/后 
    在data发生变化的时候,会触发beforeUpdate和updated方法。 
    销毁前/后: 
    在destiory之后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

    3.请说下封装 vue 组件的过程?

    首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。 
    然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。

    4、active-class是哪个组件的属性?

    vue-router模块的router-link组件。

    5、嵌套路由怎么定义?

    当有多层组件嵌套的时候,可以考虑嵌套路由实现 
    因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。 
    可能还会问如何实现重定向: 
    使用redirect配置

    6.怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

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

    7.vue-router有哪几种导航钩子?

    三种; 
    最常用的是一个全局导航钩子,router.beforeEach(to,from,next),可以用作路由跳转前进行判断拦截 
    第二种:组件内的钩子 
    第三种:单独路由独享组件

    8、scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译。 
    使用步骤: 
    第一步:用npm 下三个loader(sass-loader、css-loader、node-sass) 
    第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss 
    第三步:还是在同一个文件,配置一个module属性 
    第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”

    9、v-model是什么?怎么使用? vue中标签怎么绑定事件?

    可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:

    10、axios是什么?怎么使用?怎么解决跨域的问题

    axios:是请求后台资源的模块; 
    因为vue-cli会建立一个服务器,那么本地去用axios请求,会造成跨域;解决方法是通过vue-cli生成的框架的结构目录下的config/index.js,去配置proxyTable配置项; 
    详情可参照:https://blog.csdn.net/qq_33559304/article/details/72966028

    11.vuex是什么?怎么使用?哪种功能场景使用它?

    vue框架中状态管理。在main.js引入store,注入。新建了一个目录store,….. export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

    12.vuex的store有几个属性值?

    state、mutations、actions、getters四个属性值

  • 相关阅读:
    CJB的大作
    OI省选算法汇总
    bzoj1078【SCOI2008】斜堆
    zrt中文题
    bzoj4726【POI2017】Sabota?
    bzoj4591 【Shoi2015】超能粒子炮·改
    bzoj2086【Poi2010】Blocks
    bzoj2091【Poi2010】The Minima Game
    bzoj2038小z的袜子
    bzoj4282慎二的随机数列
  • 原文地址:https://www.cnblogs.com/qdjl/p/9363206.html
Copyright © 2011-2022 走看看