Vue面试题
1、Vue的生命周期?
beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed(创建、挂载、更新、卸载)
挂载中可以操作DOM,创建中不能操作DOM;常用挂载或者创建生命周期就行了
2、methods和computed的区别?
都是存放方法的地方;
methods里面存放的方法每次调用都会重新计算(不会缓存)
computed里面的方法调用计算后,当其参数不发生改变时再次调用,直接返回上次计算的结果,不重新计算(会响应数据缓存)
watch主要用来解决 beforeUpdate, updated两个钩子里修改状态导致死循环的问题,采用watch以及 监测可能异步改变值得时候
3、Vue的传参方法?
属性传值、$refs
、$parent
、通知传值(广播传值)、本地传值、路由传值
父向子传值:v-bind属性绑定(props)
子向父传值:v-on 事件绑定
兄弟组件之间共享数据:EventBus($on
数据接收方,$emit
发送数据的内个组件)
4、vue-router路由守卫?
全局守卫、路由独享守卫、组件内守卫
Vue 路由 导航守卫(全局守卫、路由独享守卫、组件内守卫) - 简书
5、vuex的核心以及使用?
State、Mutation、Action、Getter
vuex及其五大核心功能运用解析 - 活在当下zql - 博客园
6、vue组件封装?
首先,使用Vue.extend()创建一个组件
然后,使用Vue.component()方法注册组件
接着,如果子组件需要数据,可以在props中接受定义
最后,子组件修改好数据之后,想把数据传递给父组件,可以使用emit()方法
Vue封装组件的过程_感恩、奋进、自信-CSDN博客_vue封装组件
7、虚拟DOM和DIFF算法?
将DOM抽象为虚拟DOM, 然后通过新旧虚拟DOM 这两个对象的差异(Diff算法),最终只把变化的部分重新渲染,提高渲染效率的过程;
diff 是通过JS层面的计算,返回一个patch对象,即补丁对象,在通过特定的操作解析patch对象,完成页面的重新渲染
虚拟DOM和diff算法 - simple小前端 - 博客园
8、vue2和vue3原理?
1. vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI 对数据代理。
相比于vue2.x,使用proxy的优势如下
defineProperty只能监听某个属性,不能对全对象监听
可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
2、默认进行懒观察(lazy observation)
在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。
3、更精准的变更通知
比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。
4、vue3新加入了TypeScript以及PWA的支持
5、vue2和vue3组件发送改变
vue2与vue3的区别_田兴的博客-CSDN博客_vue2和vue3区别
9、vue2和Vue3中的ref的作用?
Vue2
基本的用法,本页面获取DOM元素
<template>
<div id="app">
<div ref="testDom">11111</div>
<button @click="getTest">获取test节点</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
console.log(this.$refs.testDom)
}
}
};
</script>
获取子组件中的data
子组件 src\components\HelloWorld.vue
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
data() {
return {
msg: "hello world"
}
}
}
</script>
父组件
<template>
<div id="app">
<HelloWorld ref="hello"/>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {}
},
methods: {
getHello() {
console.log(this.$refs.hello.msg)
}
}
};
</script>
调用子组件的方法
子组件
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
open() {
console.log("调用到了")
}
}
}
</script>
父组件
<template>
<div id="app">
<HelloWorld ref="hello"/>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {}
},
methods: {
getHello() {
this.$refs.hello.open();
}
}
};
</script>
子组件调用父组件的方法
子组件
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
open() {
console.log("调用了");
// 调用父组件方法
this.$emit("refreshData");
}
}
}
</script>
父组件