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四个属性值

vue面试常被问到的问题整理的更多相关文章

  1. Java面试常被问到的题目+解答

    第一,anonymousinnerclass(匿名内部类)是否可以extends(继承)其它类,是否可以implements(实现)interface(接口)? 不行,对于匿名内部类,看到的一句话说的 ...

  2. 各大互联网公司java开发面试常问问题

    本人是做java开发的,这是我参加58,搜狐,搜狗,新浪微博,百度,腾讯文学,网易以及其他一些小的创业型公司的面试常被问的问题,当然有重复,弄清楚这些,相信面试会轻松许多. 1. junit用法,be ...

  3. 面试常问的几个排序和查找算法,PHP实现

    冒泡,快排,二分查找,都是面试常问的几个算法题目,虽然简单,但是一段时间不用的话就很容易忘记,这里我用PHP实现了一下,温故而知新. 排序 冒泡排序 每一次冒出一个最大的值 function bubb ...

  4. python基础之面试常问

    目录 python相对其他语言有什么特点? python内存管理机制,gc机制的了解,gc回收三种算法. lambda函数 高级函数 map.reduce.filter.sorted等. 简述六种基本 ...

  5. 面试常问的dubbo的spi机制到底是什么?

    前言 dubbo是一款微服务开发框架,它提供了 RPC通信 与 微服务治理 两大关键能力.作为spring cloud alibaba体系中重要的一部分,随着spring cloud alibaba在 ...

  6. 10个Python面试常问的问题

    概述 Python是个非常受欢迎的编程语言,随着近些年机器学习.云计算等技术的发展,Python的职位需求越来越高.下面我收集了10个Python面试官经常问的问题,供大家参考学习. 类继承 有如下的 ...

  7. Java面试常问的问题(转载)

    并发.JVM.分布式.TCP/IP协议 1)Java的数据结构相关的类实现原理,比如LinkedList,ArrayList,HashMap,TreeMap这一类的.以下简单模拟一个数据结构的连环炮. ...

  8. Python面试常问的10个问题

    很多人想找Python工作,面试往往在基础知识点采坑了 Python是个非常受欢迎的编程语言,随着近些年机器学习.云计算等技术的发展,Python的职位需求越来越高.下面我收集了10个Python面试 ...

  9. 太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

    前言 一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪. 最近两年,太原作为一个准二线城市,各大互联网公司的技术栈也在升级换代,假如你在太 ...

随机推荐

  1. verilog if语句

    a.基本形式 1) if(表达式) 语句1: 2)if(表达式) 语句1: else 语句1 3) if(表达式1) 语句1: else   if(表达式2) 语句2: else   if(表达式3) ...

  2. Nginx + Keepalived 实例(测试可行)

    Nginx_Master: 192.168.1.103 提供负载均衡 Nginx_BackUp: 192.168.1.104 负载均衡备机 Nginx_VIP_TP: 192.168.1.108 网站 ...

  3. 本机访问其它电脑上的oracle数据库

    最近发现很多人问到怎么才能访问别人机子上的oracle,这里来给大家做个示范 借助工具的话,oracle就自己带了两个配置和移值助手下面:net configuration assistant 和ne ...

  4. 轮播图jq版

    轮播图的需求 1:图片自己轮播,并且下面的tabs小图标跟着显示 2.鼠标hover到tabs上面显示对应的图片 3.点击左右按钮,显示下一张图片. <div id="oLunbo&q ...

  5. EasyUI 数据网格 - 设置排序并自定义排序

    数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排序.默认的,列是不能排序的,除非您设置 sortable 属性为 true. 当排序时,数据网格(DataGrid)将 ...

  6. ASP.NET Core后台任务

    之前在控制台程序中学习如何运行后台任务,ASP.NET Core中其实也有同样的方法BackgroundService,本以为跟HostedService没有区别,毕竟BackgroundServic ...

  7. node.js的介绍

    1.node.js的优点 性能高 开发效率高 应用范围广 2.安装 下载地址:http://nodejs.cn 下载git 3.框架选择 express(成熟),koa,Hapi

  8. [转]Linq语法二

    本文将讲述LINQ的基础查询(此文所有例子都使用LINQ to Object) 在此之前,我们先创建一个用于示例的数据源: Student类:表示学生,包括学号.姓名及班级 Courses类:表示学生 ...

  9. CSS的相对定位和绝对定位(position)

    什么是定位呢? 定位(position),故名思议,就是确定元素在页面中的位置. CSS的常用定位有两种,一种是相对定位,一种是绝对定位. 下面我们看例子 <html> <head& ...

  10. HTML中6种空白空格

    HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器.其他几种空格(       ‌‍)在不同浏览器中宽度各异.     ...