vue中一些常见的面试题
前言
一位正在学习前端的菜鸟,虽菜,但还未放弃。
内容
1,说一下vue中的指令
答:
①,v-html:主要用来渲染html节点,其作用与原生的innerHtml基本一致
②,v-text:主要用来渲染文本,其作用与原生的innerText基本一致
③,v-on:主要用来绑定事件, 简写是@ 支持多个事件一起绑定 如 v-on="{click:fun,dbclick:fun1}"
④,v-bind:主要用来绑定属性,简写是 :
⑤,v-model:主要是用来跟表单进行双向数据绑定
⑥,v-for:主要用来多次渲染节点 注意:官网不推荐跟v-if一起使用,因为v-for的优先级更高 所以v-for每次在循环的时候都会进行v-if 这样很影响性能
⑦,v-if:主要用来判断是否创建和删除节点,可以搭配v-else 和v-else-if 一起使用
⑧,v-show:主要用来显示和隐藏原理,其主要原理根据css属性中的display为block和none来决定的
⑨,v-once:主要用来渲染元素或者组件一次的,绑定完一次后就不会再有相关联了,所以性能更好
⑩,v-block:主要用来解决插值表达式中的闪烁问题
2,vue生命周期的的理解
答:vue的生命周期主要分为8个阶段,3大状态(其中第一个状态一定会触发,二三阶段需要特点的条件才会触发)
第一个状态有四个生命周期函数
①,创建前(beforeCreate)/创建后(created) 在beforeCreate阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el和数据对象data都为undefined,还未初始化。
②,载入前(beforeMount)/载入后(mounted) 在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
第二个状态有俩个生命周期函数
①,更新前(beforeUpdate)/更新后(updated) 这个阶段主要是data里面的数据发生改变时,就会触发这俩个方法
第三个状态有俩个生命周期函数
①,销毁前(beforeDestroy)/销毁后(destroyed) 这个阶段主要就是销毁vue实例已经解除了事件监听以及和dom的绑定才会触发,触发完以后该实例将不会再产生任何生命周期函数,但是dom依旧存在
3,为什么vue组件里面的data必须是一个函数
答:因为vue的组件化开发主要就是为了自己的代码自己管理,复用性高等优点,要是data里面不是作为一个函数的话,那么所有的数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改,而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),对象都是存在于堆内存里面的,他们的内存地址不一样,所以则不会出现这种问题
4,vue中的computed和watch有什么区别?
答:
computed:①,支持缓存,就是只有当依赖效果发生改变时,才会重新计算,否则就是使用缓存效果,性能较好
②,不支持异步,当computed里面有异步的时候操作是无效的,无法监听数据的变化
③,如果computed写的是一个函数的话,默认是走get方法,如果需要set方法,则这俩个都要写
④,computed在实际开发中,更多的用于多个属性计算一个属性的时候使用
watch:①,不支持缓存,每次data数据发生改变,都会触发该方法
②,支持异步,watch里面可以写异步的操作
③,监听的函数默认会传俩个参数过来,第一个是新的数据,第二个是之前的数据
④,在实际开发中,一般用在一个数据改变多个数据的时候比较推荐使用
5,vue的双向数据绑定原理是什么?
答:vue的双向数据绑定原理主要是结合了数据劫持和观察者模式来进行互绑的,也就是数据层改变,视图层也就跟着改变,视图层改变,数据层也就随着改变,他内部主要的原理是运用了Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
6,vuex中有几个核心属性,分别是什么?
答,一共有5个核心属性
①:state 唯一数据源,Vue 实例中的 data 遵循相同的规则
②:getters 可以认为是 store 的计算属性,就像computed属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值
③:mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发
④:action action 类似于 mutation,不同在于Action 提交的是 mutation,而不是直接变更状态,Action 可以包含任意异步操作
⑤:module 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块
vue中一些常见的面试题的更多相关文章
- vue中一些常见错误
一:在抽取路由模块时路径没有更改过来 二:跨域的问题
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- vue中关于prop
组件之间的项目通信在vue中十分常见,父组件的数据传到子组件需要prop的支持,我们来看下prop 1.html的特性名大小写不敏感,浏览器会把所有大写字母解释为小写字母,使用dom模板时,使用等价的 ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- Java 基础常见知识点&面试题总结(中),2022 最新版!| JavaGuide
你好,我是 Guide.秋招即将到来,我对 JavaGuide 的内容进行了重构完善,公众号同步一下最新更新,希望能够帮助你. 上篇:Java 基础常见知识点&面试题总结(上),2022 最新 ...
- vue中常见的指令
1,差值表达式{{}} <p >{{ msg }}</p> 2.v-cloak解决差值表达式闪烁的问题 <p v-cloak>{{ msg }}</p> ...
- vue 中一些API 或属性的常见用法
prop 官方解释:Prop 是你可以在组件上注册的一些自定义特性.当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性. 通俗点讲就是:prop是父组件用来传递数据的一个自定义 ...
- Vue中常见参数传递方式
文章内容:这里只有vue中父子组件传参.路由间的传参 (另外还有vuex.储存本地.中央bus等方式) 一.父子组件 1.1父传子(props) <!-- 父组件father.vue --> ...
- vue中,怎么给data对象添加新的属性?(尼玛这面试题居然让我给碰上了。。。。)
Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决? 示例: <template> <div> <ul> <li v-for="v ...
随机推荐
- Typora上传图片设置
Typora上传图片设置 问题 使用Typora写文档时上传图片的路径默认是本地磁盘的路径,这样就导致一个问题,当写好的文档上传到blog.csdn等博客网站时,会导致图片失效无法识别的问题. 解决方 ...
- CTFHub_技能树_信息泄露
常用备份文件名: www.zip bak文件 在使用vim时会创建临时缓存文件,关闭vim时缓存文件则会被删除,当vim异常退出后,因为未处理缓存文件,导致可以通过缓存文件恢复原始文件内容 以 ind ...
- bzoj4236JOIOJI
bzoj4236JOIOJI 题意: 给一个只由JOI三个字母组成的串,求最长的一个子串使其中JOI三个字母出现次数相等.串长度≤200000 题解: 有点像bzoj4384,因此推算的过程是差不多的 ...
- Burp Suite Report - 报告功能
1. 通过点击Host选择不同的颜色,可以设置严重性: 2.生成网页版应用分析报告:选中所有条目->右击网址,保存所有选中项目,存储格式为html.
- C++语法小记---继承中的构造和析构顺序
继承中构造和析构的顺序 先父母,后客人,最后自己 静态变量和全局变量在最开始 析构和构造的顺序完全相反 #include <iostream> #include <string> ...
- Mysql5.7前后修改用户密码变化
本文主要强调修改密码的sql语句变化.如果是root密码忘记了,请参考Mysql忘记root密码怎么解决 Mysql 5.7以前修改密码 update mysql.user set password= ...
- springboot手动事务回滚
亲测在使用@Transactional.@Transactional(rollbackFor = Exception.class)及catch异常之后 throw new RuntimeExcepti ...
- JMS资源文件下载列表
网关程序(Gateway) https://files.cnblogs.com/files/IWings/Gateway.zip 网关裁判程序(GatewayReferee) https://file ...
- 循序渐进nginx(三):日志管理、http限流、https配置,http_rewrite模块,第三方模块安装,结语
目录 日志管理 access_log error_log 日志文件切割 自定义错误页 http访问限流 限制请求数 语法 使用 限制连接数 语法 测试 补充: https配置 使用 生成证书 配置ng ...
- DJANGO-天天生鲜项目从0到1-006-首页-内容展示
本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...