vue el-checkbox循环多个如何选中当前的_Vue面试必看(精简版)

22031d09b06c5cc077a07cd34e25bb36.png

1.vue优点?

  • 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb

  • 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;

  • 虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式;

  • 运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。

  • 视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;

  • 双向数据绑定:保留了angular的特点,在数据操作方面更为简单;

  • 组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;

2.vue父组件向子组件传递数据?

通过props

3.子组件像父组件传递事件?

$emit方法

4.v-show和v-if指令的共同点和不同点?

共同点:都能控制元素的显示和隐藏;

不同点:

  • v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;

  • v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销比较大)。

5.如何让CSS只在当前组件中起作用?

在组件中的style前面加上scoped

6.的作用是什么?

keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

7.如何获取dom?

ref="domName" 用法:this.$refs.domName

8.说出几种vue当中的指令和它的用法?

  • v-model双向数据绑定

  • v-for循环

  • v-if v-show 显示与隐藏

  • v-on事件;v-once: 只绑定一次

9. vue-loader是什么?使用它的用途有哪些?

  • vue文件的一个加载器,将template/js/style转换成js模块。

  • 用途:js可以写es6、style样式可以scss或less、template可以加jade等

10.为什么使用key?

需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。

作用主要是为了高效的更新虚拟DOM。

11.v-modal的使用。

  • v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作

  • v-bind绑定一个value属性

  • v-on指令给当前元素绑定input事件

12.分别简述computed和watch的使用场景

  • computed:当一个属性受多个属性影响的时候就需要用到computed

  • watch:当一条数据影响多条数据的时候就需要用watch

13.v-on可以监听多个方法吗

可以的

13.$nextTick的使用

当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,

你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。

14.vue组件中data为什么必须是一个函数?

  • 因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。

  • 组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。

15.Vue实现数据双向绑定的原理:Object.defineProperty()

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

更细的说:是整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

16.对于MVVM的理解?

  • MVVM 是 Model-View-ViewModel 的缩写。

  • Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。

  • View 代表UI 组件,它负责将数据模型转化成UI 展现出来。

  • ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。

在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

17.Vue的生命周期

  • beforeCreate(创建前) 在数据观测和初始化事件还未开始

  • created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来

  • beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

  • mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

  • beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。

  • updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

  • beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

  • destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

18.v-if和v-for的优先级

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。

如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。

19.vue的两个核心点

数据驱动、组件系统

  • 数据驱动:ViewModel,保证数据和视图的一致性。

  • 组件系统:应用类UI可以看作全部是由组件树构成的。

20.vue更新数组时触发视图更新的方法

push();pop();shift();unshift();splice();sort();reverse()

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

beforeCreate, created,beforeMount, mounted

22.created和mounted的区别

  • created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

  • mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

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

  • 第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。

  • 第二种:组件内的钩子

  • 第三种:单独路由独享组件

24.$route 和 $router 的区别

  • $router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)

  • $route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

25.vue-router的两种模式

  • hash模式:即地址栏 URL 中的 # 符号;

  • history模式:window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)。

26.vuex有哪几种属性?

  • state => 基本数据(数据源存放地)

  • getters => 从基本数据派生出来的数据

  • mutations => 提交更改数据的方法,同步!

  • actions => 像一个装饰器,包裹mutations,使之可以异步。

  • modules => 模块化Vuex

27.css只在当前组件起作用

在style标签中写入scoped即可 例如:

28.v-if 和 v-show 区别

v-if按照条件是否渲染,v-show是display的block或none;

29.vue等单页面应用及其优缺点

  • 优点:Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

  • 缺点:不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退。

30.Vue组件间的参数传递

  • 父组件传给子组件:子组件通过props方法接受数据;

  • 子组件传给父组件:$emit方法传递参数

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

扫码二维码欢迎关注我

0bfddf0e175dfc8a015fa9f374279a1c.png

你在面试前端么?👇

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值