vue插槽面试题_vue面试题(一)
1.v-show与v-if的区别
v-show:操作的是元素的display属性
v-if:操作的是元素的创建和插入
v-if有更高的开销,而v-show有更高的初始化渲染开销,如果需要非常频繁地切换,
则使用v-show较好;如果在运行时条件很少改变,则使用v-if较好
使用场景:
v-show:前台数据的展示
v-if:管理系统权限列表地展示
2.methods、computed、watch三者区别
三者之间地共同点:methods、watch和computed都是以函数为基础的
computed与watch都是以Vue的依赖为基础,当所依赖的数据发生变化的时候会触发相关的函数去实现数据的变动
methods里面是用来定义函数的,需要手动才能执行,不像computed与watch“自动执行”函数
三者之间的不同点:
computed:
1.computed是一个计算属性,computed所依赖的属性发生变化时,计算属性才会重新计
算,并进行缓存。当其他数据发生改变的时候,computed属性不会重新计算。从而提升
性能
watch:
1.watch类似与事件监听+事件机制
2.watch的方法默认是不会执行的,只有所依赖的属性发生变化才会执行的
3.watch默认第一次是不会执行的,通过声明immediate选项为true,可以立即执行一次
handler
4.watch用来监听数据变化,给后台发数据请求
5.watch中的handler默认只能监听属性引用的变化,但内部属性是监听不到的设置deep
为true可以进行深度监听,但是性能开销也会变大
6.watch无法监听数组值得变化
watch与computed使用场景
1.watch:一个数据影响多个数据
例如:网络请求、模糊查询、浏览器自适应、监控路由对象
2.computed:一个数据受多个数据的影响
例如:商品购物车的结算、过滤某些商品数据
3.watch无法监听数组的情况,以及解决方案
无法监听数组的情况
1.利用索引直接设置一个数组项时,例如:arr[indexOfItem] = newValue;
2.修改数组的长度时,例如:arr.length = newLength;
解决方案
1.this.$set(arr,index,newVal)
2.使用数组splice方法
4.如何给一个响应式对象添加一个属性?如何删除响应式对象中的属性?
import Vue from "vue";
new Vue({
data:{
obj:{
}
}
})
通过vue.set方法 Vue.delete方法
Vue.set(obj,name,"xiaohou");
Vue.delete(obj,"name");
5.vue中自定义指令如何使用
Vue.directive();
参数一:指令名称
参数二:指令实现的函数,在回调函数中参数一是指令绑定的元素,
参数二是一个对象其中对象中有value属性代表的是表达式发挥的结果,
还有modifiers属性是指令的修饰符
6.vue中组件创建的方式有哪些
全局组件和局部组件
全局组件
Vue.component() 参数一:组件名称 参数二:组件的配置项
局部组件
new Vue({
components:{} key值为组件名称 val值为组件的配置项
})
7.vue中的过滤器如何使用
Vue.filter()
参数一:过滤器名称
参数二:过滤器实现的方法 该方法中有两个参数
参数一为需要过滤的数据
参数二:为过滤器传递的参数
8.vue中组件通讯的方式有哪些?
父传子:
1.通过绑定自定义属性,接收通过props进行接收
子传父:
1.通过绑定自定义事件
2.通过插槽作用域
非父子组件传值
1.创建公共的Vue实例对象
2.EventBus
3.手动封装事件订阅
4.Vuex
9.请解释一下vue中的单向数据流的理解
数据从父级组件传递给子组件,只能单向绑定,子组件不能直接修改从父级传递过来的数据
数据只能从一个方向来修改状态,如果父组件给N个子组件进行了数据传递。
那么某一个子组件中修改了这个数据,那么就会导致其他组件的数据也会发生改变。
这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。因此数据只能从一个方向来修改数据
10.请说一下什么是动态组件,如何使用,以及keep-alive的作用
动态组件:
让多个组件使用同一挂载点,并动态进行切换。这就是动态组件
通过保留元素,动态绑定它的is特性,可以实现动态组件
keep-alive
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
组件切换调用的时候本身会被销毁的,只要加上keep-alive进行包裹,就不会被销毁,
而是被缓存起来,下一次使用的时候直接从缓存中调用
是一个抽象组件;它自身不会渲染一个DOM元素
常用的一些属性:
include:
类型:字符串或者正则表达式
解释:只有名称匹配的组件会被缓存
exclude:
类型:字符串或者正则表达式
解释:任何名称匹配的租组件都不会被缓存
max:
类型:数字
解释:最多可以缓存多少组件实例
11.当使用keep-alive内置组件后组件会增加那两个生命周期函数
activated && deactivated:
activated:当组件为活跃状态的时候触发(活跃状态:进入页面的时候)
deactivated:缓存状态的时候触发
12.vue中solt的使用方式,以及solt作用域插槽的用法
当组件当作标签使用的时候,如果需要在组件标签内部进行嵌套内容的时候,需要
通过template组件包裹嵌套的内容,在组件内部通过进行接收
13.为什么组件内部的data是一个函数而不是一个对象?
因为每次调用组件的时候都会重新生成一个对象,如果是一个对象的情况下,data数据会进行
复用(因为对象时引用数据类型),而当data时一个函数的时候每次调用
的时候就会返回一个新的对象
14.vue中动画如何实现
那个元素需要动画就给那个元素加 transition 标签
进入时class的类型分为以下几种
-enter -enter-active -enter-to
离开时class的类型分为以下几种
-leave -leave-active -leave-to
如果需要一组元素发生动画需要标签
16.浅谈对路由的理解
什么是路由?
根据不同的url地址展示不同的页面或者数据
路由分为前端路由和后端路由
前端路由:
1.前端路由多用于单页面开发,也就是SPA
2.前端路由是不涉及到服务器的,是前端利用hash或者HTML的historyApi来实现的,
一般用于不同的内容展示和切换
17.路由跳转的方式有哪几种?
1.a标签进行跳转。例如:首页
2.router-link进行跳转
例如:首页
3.编程式路由 例如:this.$router.push()
18.路由传值的方式有几种
1.动态路由传值。例如:path:"/home/:id/name";接收的时候通过this.$route.params
2.query传值。因为在url中?后面的参数不会被解析,因此我们可以通过query进行传值。
接收的时候通过this.$route.query
3.路由解耦。在配置路由的时候添加props为true,在需要接收参数的组件页面通过props进行接收
4.编程式导航 this.$route.push({path:"/home",query:{}})
19.请说出路由配置项常用的属性以及作用?
路由配置参数:
path:路由跳转
component:路径相对于组件
name:命名路由
meta:路由元信息
children:子路由的配置参数(路由嵌套)
props:路由解耦
redirect:重定向路由
20.编程式导航使用的方法以及常用的方法
路由跳转:this.$router.push()
路由替换: this.$router.replace()
后退:this.$router.back()
前进:this.$router.forward()
this.$router.go()
21.如何重定向路由?如何实现路由解耦?
通过配置路由项中的redirect进行重定向
在配置路由项中设置props:true 在需要接收组件的内部通过props进行接收
vue插槽面试题_vue面试题(一)相关推荐
- vue插槽面试题_VUE面试题解析,半年出一篇,建议收藏!
回答范例: vuex是vue专用的状态管理库. 它以全局方式集中管理应用的状态,并且可以保证状态变更的可预测性. vuex主要解决的问题是多组件之间状态共享的问题,利用各种组件通信方式,我们虽然能够做 ...
- Vue虚拟DOM原理及面试题(笔记)
Vue虚拟DOM原理及面试题(笔记) 面试题:请你阐述一下对vue虚拟dom的理解 什么是虚拟dom? 虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构 在vue中,每个组件都有一个re ...
- VUE生命周期,经典面试题
文章目录 前言 一.VUE生命周期是什么? 二.VUE生命周期不同的阶段 1.创建前/后 2.载入前/后 3.更新前/后 4.销毁前/后 总结 前言 VUE有哪些特性,我们为什么要使用它 1.易用 已 ...
- vue插槽样式_vue 插槽简介及使用示例
Vue的插槽,是一种内容分发机制,但是我感觉它更加像组件的一种占位符的概念,通过插槽,等待组件外部传入复杂的内容. 使用插槽的好处 在以前的例子中todo-item插槽直接写在了todo-list插槽 ...
- vue插槽样式_Vue 插槽(slot)使用(通俗易懂)
因为在2.6.0中,具名插槽 和 作用域插槽 引入了一个新的统一的语法 (即v-slot 指令).它取代了 slot 和 slot-scope,并且现在网上都说的是一些老版本的内容,官方文档不太容易理 ...
- vue 2022最常见的面试题(实践出真理 出场率高得狠)
1.路由的三种模式? ● hash: 使用 URL hash 值来作路由.支持所有浏览器,包括不支持 HTML5 History Api 的浏览器: ● history : 依赖 HTML5 Hist ...
- vue插槽样式_Vue 插槽详解
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...
- 2022年最新前端面试题、高频面试题、面试题总结
文章目录 html面试题 js面试题 css面试题 vue面试题 react面试题 浏览器.项目优化.等其他类型高频面试题 html面试题 Doctype 作用 声明文档类型 HTML5 新增的内容有 ...
- matlab考试试题,matlab-考试试题-
matlab-考试试题- MATLAB 考试试题 (1) 产生一个1x10的随机矩阵,大小位于( -5 5),并且按照从大到小的顺序排列好!(注:要程序和运行结果的截屏)答案:a=10*rand(1, ...
- vue插槽--slot
2019独角兽企业重金招聘Python工程师标准>>> vue插槽--slot,在很多三方的UI框架里大量的使用了插槽,像现在用的比较多的饿了么的ElementUI 在这里有自己写的 ...
最新文章
- python画-使用python画个小猪佩奇的示例代码
- 解决VERSION 1.7 OF THE JVM IS NOT SUITABLE FOR THIS PRODUCT.
- 手把手入门神经网络:从初等数学的角度初探神经网络
- 达内TTS6.0课件oop_day01
- 【程序设计】函数参数
- 维权靠微博?用户京东金融账户被盗刷15万 处理未果怒发微博曝光
- python可视化的图表汉字显示成框框_Matplotlib图表上输出中文(汉字)、减号问题...
- sphereface 训练出现的问题
- 今日恐慌与贪婪指数为92 贪婪程度有所上升
- java随机生成字母用三元运算符,【代码笔记】Java常识性基础补充(一)——赋值运算符、逻辑运算符、三元运算符、Scanner类、键盘输入、Random类、随机数...
- android平台的计时功能,Android实现简单计时器功能
- 微软宣布提供Azure Cognitive Services容器支持
- 事物(三)之服务端事务匹配请求
- PC端和移动端的区别你知道吗?
- actived生命周期_初探 Vue 生命周期和钩子函数
- 【天光学术】体育论文:乒乓球少年运动员专项身体素质训练探究(节选)
- MySQL报错:The server quit without updating PID file 我的解决思路和方法
- python—networkx:画随机几何图,找出中心节点并按路径长度染色
- ipad键盘使用快捷键_每个iPad使用者都应该知道的20个键盘快捷键
- 2017年09月19日泰国清迈曼谷普吉岛三地游