必背的小技巧让你轻松过关
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 一、生命周期
- 1.1 什么是生命周期函数
- 1.2 生命周期函数有哪些
- 1.3 项目开发中 在生命周期里都做过什么功能
- 1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?
- 二、vuex 的理解
- 2.1 什么是vuex?使⽤vuex能够解决什么问题?
- 2.2 五大核心和及属性和方法？
- 2.3 vuex的执⾏机制是什么?
- 2.4 vuex的弊端是什么?怎么解决?
- 三、 vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解
- 四、vue路由守卫?(必问) 讲解⻚⾯权限
- 五、v-if与v-show的区别
- 六、 v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?
- 七、methods、computed和watch的区别?
- 八、vue组件通信?
- 九、$nextTick⽅法有什么作⽤?
- 10、说⼀下什么是mvvm模式?
一、生命周期
1.1 什么是生命周期函数
所谓的vue⽣命周期就是vue实例从创建到销毁的整个过程我们称之为vue的⽣命周期
1.2 生命周期函数有哪些
- 创建阶段（4个）
- beforeCreate
- 实例创建之前 这个时候什么都没有 没有data methods 都不能用 更没有this
- created
- 实例创建之后 也是最早可以使用data methods 的钩子函数 就有this了
- beforeMount
- 组件挂载之前
- mounted
- 组件挂载之后 就可以拿到dom节点使用
- beforeCreate
- 运行阶段（2个）
* beforeUpdate- 数据变了 视图还没变
* updated+ 数据变了 视图也变了
- 销毁阶段（2个）
* beforeDestory- 组件销毁之前 是最后一个能使用data methods 的钩子函数
* destoryed+ 组件销毁之后
- 常用的也就以上（8个）还有三个不常用的
- 如果用keep-alive缓存组件 就会有 actived deactived 这两个钩子函数
- actived
- 组件激活
- deactived
- 组件停用
- mounted
- 子组件出错的时候会触发这个钩子函数
- actived
1.3 项目开发中 在生命周期里都做过什么功能
- 我在写效果的过程中 会在 created 或者 mounted 中发送 http 请求
- created 和 mounted 的区别 就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求
- mounted 的特点是可以操作 dom 节点
- 还会用 created 钩子函数 获取 本地存储的数据
1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?
页面—beforeCreate页面—created页面—beforeMount组件—beforeCreate组件—created组件—beforeMount组件—mounted页面—mounted
二、vuex 的理解
2.1 什么是vuex?使⽤vuex能够解决什么问题?
- vuex 是 vue 的状态管理工具 管理项目中的公共数据 能够在所有的组件中使用
2.2 五大核心和及属性和方法？
- state 存放公共数据的地方 通过 this.$store.state.xxx调用
- mutations 修改 state 的地方 只有这里能修改 通过this.$store.commit 调用
- getters 相当于是之前的计算属性 通过 this.$store.getters 调用
- actions 执行异步操作的地方 通过 this.$store.dispatch 调用
- modules 模块化
2.3 vuex的执⾏机制是什么?
- 在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发
- actions ⾥⾯的⽅法,
- 在 actions⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state,
- 同时这也是 vuex 的执⾏机制
2.4 vuex的弊端是什么?怎么解决?
- vuex 缺点就是刷新数据会丢失 我们可以保存本地存储 或者
- 安装 vuex 持久化插件 vuex-persist 去实现自动本地存储
三、 vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解
- vue的路由模式⼀共有两种,分别是哈希和history. 他们的区别是hash模式不会包含在http请求当中,
- 并且hash不会重新⻚ ⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,
- 会报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.
- history的原理就是利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的.
四、vue路由守卫?(必问) 讲解⻚⾯权限
- 路由的导航守卫 又叫做路由的钩子函数（生命周期函数）
- 就是在跳转页面的 时候把 路由拦下来 做一些操作 再放行
- 一共有三种
- 第一种是全局守卫
- beforeEach 路由进入之前
- afterEach 路由进入之后- 第二种 组件内守卫
- beforeRouteEnter 路由进入之前
- beforeRouteUpdate 路由更新之前
- beforeRouteLeave 路由离开之前- 第三种
- 独享守卫
- beforeEnter 路由进入之前
- 有三个参数- to from next
- next 这个参数 在路由 3.x 版本的时候 是必须的
- 但是到了路由 4.x 版本的时候 next 参数变成可选的了- 一般来说 vue2 搭配 3.x 的路由
- vue3 搭配 4.x 的路由
- 比如说 购物车页面只有登陆的才能访问 我们可以用组件级守卫守卫购物车页面
- 如果已经登陆存的有 token 的话 就继续访问这个页面 如果没有登陆的话就会跳转到登陆页面
next 参数 除了括号里可以是空和路径之外 还可以是一个回调函数（回调函数就是一个被作为参数传递的函数）
五、v-if与v-show的区别
⾸先v-if和v-show都是控制元素的显示与隐藏, 不过v-if控制元素的显
示和隐藏的时候会删除对⽤的dom元素,当每⼀个显示的时候,都会重新创建dom和渲染. ⽽v-show则是通过css的display:none
和display:block来控制元素的显示与隐藏. v-if⽐较耗费性能,所以我们涉及到频繁的显示隐藏操作我们建议使⽤v-show,如果不
是频繁操作的话,我们可以v-if
在项⽬中我会经常使⽤v-if和v-show,⽐如我们在搜索功能的时候,他有⼀个历史记录,这个时候我们根据是否有搜索的结果来判
断历史记录的显示与隐藏,这块我就可以使⽤v-if ,当然⽤v-show也可以. 以上就是我对v-if和v-show的理解.
六、 v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?
v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.
v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯)
七、methods、computed和watch的区别?
methods 就是方法 我们写的点击事件等各种事件都放在 methods 里
computed 计算属性 有缓存功能就是当跟他有关的值发生变化的时候才会重新计算 还有一个特点就是必须要有 return 值 return 就是把计算的结果 return 出去
watch watch 可以监听 数据和路由的变化
八、vue组件通信?
⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值
⼦传⽗ ⼦组件通过this.$emit(“⾃定义的事件”,要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的事件,通过⽅法来接收传递的数据
兄弟组件 通过中央事件总线,我们也称之为eventBus,
我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空的vue实例,通过实例对象调⽤.on⽅法进⾏接收,通过emit⽅法来进⾏发送,
九、$nextTick⽅法有什么作⽤?
⾸先呢, nextTick也叫做异步更新队列方法 而nextTick方法的主要作用就是等待dom元素加载完毕之后才会执行的回调函数 我们经常会在nextTick⽅法⾥⾯获取dom元素
10、说⼀下什么是mvvm模式?
MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。
View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动
同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作
必背的小技巧让你轻松过关相关推荐
- 如何阻止华为杀应用_华为手机“杀”后台严重受不了？别慌，这些小技巧就能轻松搞定...
原标题:华为手机"杀"后台严重受不了?别慌,这些小技巧就能轻松搞定 现在有越来越多的小伙伴喜欢使用华为手机,觉得其性价比非常高.但是不少使用华为手机的朋友会发现,华为手机" ...
- [教师资格证-中学笔试-裸考过关]教育知识与能力必背知识点（技巧）
裸考过了综测和专业课,都是刚刚达线,而教育知识与常识需要背,所以68分没过...很惨...就差了一个选择题. 所以再次考试的时候还是准备了下,至少得看看考什么,不然真的太惨了,68....不过其他两门 ...
- MAC使用小技巧之用好mac电脑?的10个必知的小技巧!
很多朋友是不是都有这样的困惑,刚接手Mac电脑,无论是笔记本亦或是台式机,很是不方便,因为windows系统那种习惯已经先入为主了,今天就给大家普及一些小技巧. 当你看到这篇文章,不管你有没有mac电 ...
- [新手] 必知~电脑小技巧
注:不接受私信 以下为分享文件(伸手党,白嫖党 专属) ------------------------------------------------------------------------ ...
- 解放生产力！20 个必知必会 VSCode 小技巧
本文转载于 SegmentFault 社区 译者:漓漾li 这篇文章旨在帮助使用 VS Code 的人能够更快速的开发,不是每个人都有时间去研究每一个提示和技巧,去发现帮助他们更快开发的那一个 - 因 ...
- 10 个 Python 初学者必知编码小技巧
2019独角兽企业重金招聘Python工程师标准>>> 技巧 #1 字符串翻转 >>> a = "codementor">>> ...
- 一个小技巧让你轻松处理Selenium处理滚动条和元素聚焦
01 JS处理滚动条 通过webdriver提供的execute_script()方法执行JS脚本操作滚动条 右侧滚动条 Firefox浏览器和Chrome浏览器用的语法不一样,下面区分列出来,貌似谷 ...
- 如何阻止华为杀应用_如何解决华为手机“杀后台”严重的情况呢？小技巧就能轻松搞定...
大家好,我是鲍清,这里专注数码,相信有很多人都喜欢,小编来给你们推荐,大家可以收藏转发哦! iOS13.2Beta版本因为杀后台严重被我们诟病不已,而华为确实也存在这样的问题,可是华为这样做" ...
- 背单词小技巧，大效果
(一)总论 对绝大多数中国同学来说,学英语就是背单词,单词是很多同学心中永远的痛.词汇是写作的基石,要想取得写作高分,必须突破词汇.但很多同学却陷入了背单词的误区.有些同学喜欢抱着厚厚的词汇书背,企 ...
最新文章
- ASP.NET MVC以ValueProvider为核心的值提供系统: DictionaryValueProvider
- java的线程管理器,QuickThread - Java线程池管理器
- pythonweb开发-如何用Python做Web开发？——Django环境配置
- [WCF]配置文件中Certificate 的encodeValue怎么设置？
- AssetManager (资源路径+当前手机配置信息)
- MVC之实体框架（数据持久化框架）EntityFrameWork(EF)
- 你可能不需要 jQuery！使用原生 JavaScript 进行开发
- 【LeetCode】剑指 Offer 54. 二叉搜索树的第k大节点
- 图解：Kafka 水印备份机制
- Android-Device supports x86,but APK only supports armeabi-v7a,armeabi,x86_64
- 开始我们的Snippets！
- php中is_uploaded_file()函数的用法
- 命令提示符操作及Java的特点
- mysql数据脱敏_数据脱敏|静态脱敏|动态脱敏—数据库脱敏_产品
- 多项式函数的极值点与拐点判别及个数公式
- 谈谈mq消息消费的几种方式
- 2022年中级会计中级经济学法考试复习题及答案
- Introduce·艺术学核心期刊推荐之《文艺争鸣》
- springMVC的扩展与接管
- 虾米音乐代码注释惊现 “穷逼 vip”，程序员要出来接锅了