vue2面试题

vue2生命周期

1. 系统自带：
2.     beforeCreate
3.     created
4.     beforeMount
5.     mounted
6.     beforeUpdate
7.     updated
8.     beforeDestroy
9.     destroyed
10. 2．一旦进入到页面或者组件，会执行哪些生命周期，顺序。
11. beforeCreate
12. created
13. beforeMount
14. mounted
15. 3.在哪个阶段有$el，在哪个阶段有$data
16.     beforeCreate啥也没有
17.     created有data没有el
18.     beforeMount有data没有el
19.     mounted都有
20. 4.如果加入了keep-alive会多俩个生命周期
21. activated、deactivated
22. 5.如果加入了keep-alive，第一次进入组件会执行哪些生命？
23. beforeCreate
24. created
25. beforeMount
26. mounted
27. activated
28. 6．如果加入了keep-alive，第二次或者第n次进入组件会执行哪些生命周期？
29. 只执行一个生命周期：activated

复制代码

谈谈你对keep-alive的了解

1. 1.是什么
2. vue系统自带的一个组件，功能：是来缓存组件的。===》提升性能
3. 2.使用场景
4. 就是来缓存组件，提升项目的性能。具体实现比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详情页就没必要请求N次了，直接缓
5. 存起来就可以了，当然如果点击的不是同一个，那么就直接请求。

复制代码

v-if 和 v-show的区别

1. 1．展示形式不同
2. v-if是创建一个dom节点
3. v-show 是display:none、block
4. 2.使用场景不同
5. 初次加载v-if要比v-show好，页面不会做加载盒子
6. 频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

复制代码

v-if和v-for优先级

1. v-for的优先级要比v-if高
2. ***是在源码中体现的：function genElement

复制代码

ref是什么

1. 来获取dom的
2. <template>
3.     <div class="home">
4.     <img
5.     ref='imgs'src="../assets/logo.png" id='img'/>
6.     </div>
7. </template>
8. <script>
9. export default
10.     name: "Home",
11.     mounted(){
12.     console.log( document.getElementById('img')）;
13.     console.log(·this.$refs.imgs·)
14. </script>

复制代码

nextTick是什么?

1. 获取更新后的dom内容

复制代码

scoped原理

1. 1.作用：让样式在本组件中生效，不影响其他组件。
2. 2.原理：给节点新增自定义属性，然后css根据属性选择器添加样式。

复制代码

1.    一 、让css只在当前组件生效
2.     <style scoped>
3.    二、 scss、 stylus
4. scss:
5.     1.下载
6.     npm install
7.     sass-loader node-sass
8.     --save
9.     2.
10.     <style lang='scss' scoped>
11.     3.scss 样式穿透
12.     父元素/deep／子元素
13. stylus:
14.     下载
15.     npm install stylus
16.     s stylus-loader
17.     --save
18.     2
19.     <style lang='stylus' scoped>
20.     3. stulus
21.     样式穿透
22.     父元素>>>子元素

复制代码

父子组件传值、兄弟组件传值

1.     子组件
2. 1.父组件传值
3.     父组件:
4.     <Header :msg='msg'></Header>
5.     子组件：
6.     props:['msg']
7.     props:{
8.     msg:数据类型
9.     }
10. 2.子组件 传值
11.     父组件
12.     子组件：
13.     this.$emit（"自定义事件名称"，要传的数据）;
14.     父组件：
15.     <Header @childInput='getVal'></Header>
16.     methods:{
17.     getVal(msg) {
18.     / /msg就是，子组件传递的数据
19.     }
20. 3.兄弟组件之间的传值
21.     (bus)
22. 通过一个中转
23. A兄弟传值：
24.     import bus from '@/common/bus
25.     bus.$emit("toFooter",this.msg) ;
26. B兄弟接收：
27.     import bus from '@/common/bus'
28.     bus.$on('toFooter',(data)=>{
29.     this.str=data;
30.     })

复制代码

面试题：computed、methods、watch有什么区别?

1. 1. computed vs methods区别
2.     computed是有缓存的
3.     methods没有缓存
4. 2.computedvswatch区别
5.     watch是监听，数据或者路由发生了改变才可以响应（执行）
6.     computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回
7.     watch是当前监听到数据改变了，才会执行内部代码

复制代码

面试题：props和data优先级谁高?

1.    props ===> methods ===> data ===> computed ===>watch

复制代码

面试题：Vuex有哪些属性？

1. state、getters、mutations、actions、modules
2. state类似于组件中data，存放数据
3. getters类型于组件中computed
4. mutations类似于组件中methods
5. actions提交mutations的
6. modules把以上4个属性再细分，让项目更好管理

复制代码

面试题：Vuex中的mutaitons和actions区别

1.    
2. mutaitons 都是同步事物
3. actions  可以包含任意异步操作
4.    
5. ***在调试中就看出来

复制代码

面试题：Vuex是单向数据流
还是双向数据流?

1. Vuex是单向数据流

复制代码

面试题：Vuex怎样做持久化存储

1. Vuex本身不是持久化存储
2. 1.使用localstorage自己写
3. 2. 使用vuex-persist插件

复制代码

vue 设置署理

1. module.exports = {
2.     devServer:·{
3.         proxy:·'http://localhost:3000
4.     }
5. }

复制代码

打包路径和路由模式

1. 路由模式 ：history
2. 前端如果自己测试项目，hash
3. 项目上线要求是 history 模式， 该怎么办?重定向

复制代码

1. module.exports = {
2.     publicPath:'./
3. }

复制代码

署理和环境变量

vue-cli
面试题：Vue路由模式

1. 路由模式有俩种：history、hash
2. 区别:
3. 1．表现形态不同
4.     history:http://localhost:8080/about
5.     hash:http://1oca1host:8080/#/about
6. 2．跳转请求
7.     history : http://localhost:8080/id  ===>发送请求
8.     hash不会发送请求
9. 3。打包后前端自测要使用hash，如果使用history会出现空白页

复制代码

面试题：介绍一下SPA以及SPA有什么缺点

1. SPA是什么？单页面应用
2. 缺点:
3.     1.SEO优化不好
4.     2．性能不是特别好

复制代码

面试题：Vue路径传值

1. 1．显式
2.     http://localhost:8080/about?a=1
3.     1.1 传:
4.      this.$router.push({
5.         path:'/about',
6.         query:{
7.             a:1
8.         }
9.      })
10.     1.2 接:this.$route.query.a
11. 2.隐式
12.     http://1oca1host:8080/about
13.     2.1 传:
14.      this.$router.push({
15.         name:'About'
16.         params:{
17.            a:1
18.         }
19.      })
20.     2.2 接: this.$route.params.a

复制代码

面试题：双向绑定原理

1. 通过Object.defineProperty劫持数据发生的改变，如果数据发生改变了（在set中进行赋值的），触发update方法
2. 进行更新节点内容（str}），从而实现了数据双向绑定的原理。

复制代码

路由导航保卫有哪些

1. 全局、路由独享、组件
2. 1.全局
3.     beforeEach、beforeResolve、afterEach
4. 2.路由独享
5.     beforeEnterl
6. 3。 组件内
7.     beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

复制代码

面试题：Vue动态路由

1. 场景：详情页(文章、商品)

复制代码

谈一下MVVM框架

1. web1.0时代
2.     文件全在一起，也就是前端和后端的代码全在一起
3.     问题：
4.     1、前端和后端都是一个人开发。（技术没有侧重点或者责任不够细分）
5.     2、项目不好维护。
6.     3、html、CSS、js页面的静态内容没有，后端是没办法工作的（没办法套数据）。
7.     mVc..都是后端先出的
8. web2.0时代
9.     ajax出现了，就可以：前端和后端数据分离了。
10.     解决问题：后端不用等前端页面弄完没，后端做后端的事情（写接口）、前端布局、特效、发送请求。
11.     问题：
12.     1、html、cSS、js都在一个页面中，单个页面可能内容也是比较多的（也会出现不好维护的情况）。
13. 出现前端的框架了MVC、MVVM
14.     解决问题：可以把一个"特别大"页面，进行拆分（组件化），单个组件进行维护
15. 什么是MVVM
16.     Model-View-ViewModel的简写

复制代码

1. view：视图【dom==》在页面中展示的内容】
2. model：模型【数据层：vue中的data数据】
3. viewModel：视图模型层【就是vue源码】

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。