vue2面试题
vue2生命周期系统自带：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
2．一旦进入到页面或者组件，会执行哪些生命周期，顺序。
beforeCreate
created
beforeMount
mounted
3.在哪个阶段有$el，在哪个阶段有$data
beforeCreate啥也没有
created有data没有el
beforeMount有data没有el
mounted都有
4.如果加入了keep-alive会多俩个生命周期
activated、deactivated
5.如果加入了keep-alive，第一次进入组件会执行哪些生命？
beforeCreate
created
beforeMount
mounted
activated
6．如果加入了keep-alive，第二次或者第n次进入组件会执行哪些生命周期？
只执行一个生命周期：activated
谈谈你对keep-alive的了解
1.是什么
vue系统自带的一个组件，功能：是来缓存组件的。===》提升性能
2.使用场景
就是来缓存组件，提升项目的性能。具体实现比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详情页就没必要请求N次了，直接缓
存起来就可以了，当然如果点击的不是同一个，那么就直接请求。
v-if 和 v-show的区别
1．展示形式不同
v-if是创建一个dom节点
v-show 是display:none、block
2.使用场景不同
初次加载v-if要比v-show好，页面不会做加载盒子
频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小
v-if和v-for优先级
v-for的优先级要比v-if高
***是在源码中体现的：function genElement
ref是什么
来获取dom的
<template>
<div class="home">
<img
ref='imgs'src="../assets/logo.png" id='img'/>
</div>
</template>
<script>
export default
name: "Home",
mounted(){
console.log( document.getElementById('img')）;
console.log(·this.$refs.imgs·)
</script>
nextTick是什么?
获取更新后的dom内容
scoped原理
1.作用：让样式在本组件中生效，不影响其他组件。
2.原理：给节点新增自定义属性，然后css根据属性选择器添加样式。
一 、让css只在当前组件生效
<style scoped>
二、 scss、 stylus
scss:
1.下载
npm install
sass-loader node-sass
--save
2.
<style lang='scss' scoped>
3.scss 样式穿透
父元素/deep／子元素
stylus:
下载
npm install stylus
s stylus-loader
--save
2
<style lang='stylus' scoped>
3. stulus
样式穿透
父元素>>>子元素
父子组件传值、兄弟组件传值
子组件
1.父组件传值
父组件:
<Header :msg='msg'></Header>
子组件：
props:['msg']
props:{
msg:数据类型
}
2.子组件 传值
父组件
子组件：
this.$emit（"自定义事件名称"，要传的数据）;
父组件：
<Header @childInput='getVal'></Header>
methods:{
getVal(msg) {
/ /msg就是，子组件传递的数据
}
3.兄弟组件之间的传值
(bus)
通过一个中转
A兄弟传值：
import bus from '@/common/bus
bus.$emit("toFooter",this.msg) ;
B兄弟接收：
import bus from '@/common/bus'
bus.$on('toFooter',(data)=>{
this.str=data;
})
面试题：computed、methods、watch有什么区别?
1. computed vs methods区别
computed是有缓存的
methods没有缓存
2.computedvswatch区别
watch是监听，数据或者路由发生了改变才可以响应（执行）
computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回
watch是当前监听到数据改变了，才会执行内部代码
面试题：props和data优先级谁高?
https://i-blog.csdnimg.cn/direct/e0899c03576c49e898482e9ca8a5efe9.png
props ===> methods ===> data ===> computed ===>watch
面试题：Vuex有哪些属性？
state、getters、mutations、actions、modules
state类似于组件中data，存放数据
getters类型于组件中computed
mutations类似于组件中methods
actions提交mutations的
modules把以上4个属性再细分，让项目更好管理
面试题：Vuex中的mutaitons和actions区别
mutaitons 都是同步事物
actions可以包含任意异步操作
***在调试中就看出来
面试题：Vuex是单向数据流
还是双向数据流?
Vuex是单向数据流
面试题：Vuex怎样做持久化存储
Vuex本身不是持久化存储
1.使用localstorage自己写
2. 使用vuex-persist插件
vue 设置署理
module.exports = {
devServer:·{
proxy:·'http://localhost:3000
}
}
打包路径和路由模式
路由模式 ：history
前端如果自己测试项目，hash
项目上线要求是 history 模式， 该怎么办?重定向
module.exports = {
publicPath:'./
}
署理和环境变量
vue-cli
面试题：Vue路由模式
路由模式有俩种：history、hash
区别:
1．表现形态不同
history:http://localhost:8080/about
hash:http://1oca1host:8080/#/about
2．跳转请求
history : http://localhost:8080/id===>发送请求
hash不会发送请求
3。打包后前端自测要使用hash，如果使用history会出现空白页
面试题：介绍一下SPA以及SPA有什么缺点
SPA是什么？单页面应用
缺点:
1.SEO优化不好
2．性能不是特别好
面试题：Vue路径传值
1．显式
http://localhost:8080/about?a=1
1.1 传:
this.$router.push({
path:'/about',
query:{
a:1
}
})
1.2 接:this.$route.query.a
2.隐式
http://1oca1host:8080/about
2.1 传:
this.$router.push({
name:'About'
params:{
a:1
}
})
2.2 接: this.$route.params.a
面试题：双向绑定原理
通过Object.defineProperty劫持数据发生的改变，如果数据发生改变了（在set中进行赋值的），触发update方法
进行更新节点内容（str}），从而实现了数据双向绑定的原理。
路由导航保卫有哪些
全局、路由独享、组件
1.全局
beforeEach、beforeResolve、afterEach
2.路由独享
beforeEnterl
3。 组件内
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
面试题：Vue动态路由
场景：详情页(文章、商品)
https://i-blog.csdnimg.cn/direct/f9c0f06cb1ce4caab7378f80b0592d21.png
谈一下MVVM框架
web1.0时代
文件全在一起，也就是前端和后端的代码全在一起
问题：
1、前端和后端都是一个人开发。（技术没有侧重点或者责任不够细分）
2、项目不好维护。
3、html、CSS、js页面的静态内容没有，后端是没办法工作的（没办法套数据）。
mVc..都是后端先出的
web2.0时代
ajax出现了，就可以：前端和后端数据分离了。
解决问题：后端不用等前端页面弄完没，后端做后端的事情（写接口）、前端布局、特效、发送请求。
问题：
1、html、cSS、js都在一个页面中，单个页面可能内容也是比较多的（也会出现不好维护的情况）。
出现前端的框架了MVC、MVVM
解决问题：可以把一个"特别大"页面，进行拆分（组件化），单个组件进行维护
什么是MVVM
Model-View-ViewModel的简写
https://i-blog.csdnimg.cn/direct/0e8f506a92a047818c969225be2793c9.png
view：视图【dom==》在页面中展示的内容】
model：模型【数据层：vue中的data数据】
viewModel：视图模型层【就是vue源码】
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]