面试题总结1
<p>面试题：
1、vue中 data 为什么要通过函数返回一个{}, 而不直接是一个对象呢
2、vue和react 虚拟DOM的好处是什么，为什么要使用虚拟DOM
3、vue中自定义了很多组件，一次引入太多组件麻烦，如何将组件注册到全局中
4、vue中路由的配置 mode为history和不是history的差别
5、v-if和v-show的差别
6、实现一个简单的类继承， Animal类和Dog类，Dog类继承Animal类
7、获取字符串的后三位 let str = "dabfbsdfv";
8、获取数组的后三个 let ary = ['a','b','c','d'];
9、vue中常用的生命周期
10、算法题</p>
<pre><code> let list = [
{
name : "Wayne",
order : "js123"
},
{
name : "Wayne",
order : "js234"
},
{
name : "Wayne",
order : "js543"
},
{
name : "Judy",
order : "js093"
},
{
name : "Judy",
order : "js789"
},
]
// 处理实现结果如下
let result = [
{
name : "Wayne",
order : ['js123','js234','js543']
},
{
name : "Judy",
order : ['js093','js789']
}
]</code></pre>
<p>1、vue中 data 为什么要通过函数返回一个{}, 而不直接是一个对象呢?</p>
<pre><code> 总结：1.函数的作用域 2.对象的引用数据类型
1.data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响
2.Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;</code></pre>
<p>2.vue和react 虚拟DOM的好处是什么，为什么要使用虚拟DOM</p>
<pre><code>1.具备跨平台的优势：由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
2.操作dom慢，js运行效率高，将dom对比放在js层，提高效率。
3.提升渲染性能：Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。
</code></pre>
<p>3、vue中自定义了很多组件，一次引入太多组件麻烦，如何将组件注册到全局中
参考链接：<a href="https://blog.csdn.net/weixin_42937737/article/details/91354170">https://blog.csdn.net/weixin_42937737/article/details/91354170</a></p>
<pre><code>1.统一目录下封装好组件
2.统一到index.js文件中导出
3.统一在入口js，中注册完成。
Vue.use(plugin) 如果是一个对象，则必须包含install方法</code></pre>
<p>4、vue中路由的配置 mode为history和不是history的差别</p>
<pre><code>大牛解答：1.hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。
那么什么时候要用history模式呢？
2.如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传。
3.当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，
/4.但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。</code></pre>
<p>5、v-if和v-show的差别</p>
<pre><code>//总结：v-show和v-if都是用来显示隐藏元素，v-if还有一个v-else配合使用，两者达到的效果都一样，性能方面去有很大的区别。
1.v-show不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。
之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。
2.v-if在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。
当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。
当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。
//总结2：v-if绝对是更消耗性能的，因为v-if在显示隐藏过程中有DOM的添加和删除，v-show就简单多了，只是操作css。</code></pre>
<p>6.实现一个简单的类继承， Animal类和Dog类，Dog类继承Animal类</p>
<pre><code class="language-javascript">function Animal(name,color){
this.name = name;
this.color = color;
}
Animal.prototype.sayName = function(){
return this.name+''+this.color
}
function Dog(name,color,age){
Animal.call(this,color,name); //将父类的属性继承过来
this.age = age;
}
Dog.prototype = new Animal(); //将父类的方法继承过来
Dog.prototype.sayAge = function(){
console.log("I am a "+this.age+"!")
}
var Dog = new Dog('Dog','white',3)
console.log(Dog) //Animal { name: 'white', color: 'Dog', age: 3 }</code></pre>
<p>7、获取字符串的后三位 let str = "dabfbsdfv";</p>
<pre><code>let str = "dabfbsdfv";
console.log(str.slice(-3)) //=>dfc</code></pre>
<p>8、获取数组的后三个 let ary = ['a','b','c','d'];</p>
<pre><code>let ary = ['a','b','c','d'];
console.log(ary.splice(-3)) //=>[ 'b', 'c', 'd' ]</code></pre>
<p>9、vue中常用的生命周期</p>
<pre><code>beforeCreate(){
console.log('刚刚创建实例');
},
created(){
console.log('实例创建完成');
},
beforeMount(){
console.log('模板编译之前 ');
},
mounted(){
/* 请求数据，操作Dom时常用 */
console.log('实力挂载完成');
},
beforeUpdate(){
console.log('更新前')
},
updated(){
console.log('更新后')
},
beforeDestroy(){
/* 页面销毁时要保存数据，可以监听这个销毁的生命周期 */
console.log('实例销毁前')
alert('准备销毁')
},
destroyed(){
console.log('实力销毁后')
}
--------------------------------------------------------
//业务中常用的Vue生命周期函数
mounted(){
/* 请求数据，操作Dom时常用 */
console.log('实力挂载完成');
},
beforeDestroy(){
/* 页面销毁时要保存数据，可以监听这个销毁的生命周期 */
console.log('实例销毁前')
alert('准备销毁')
},</code></pre>
<p>10、算法题
链接 ：<a href="https://blog.csdn.net/weixin_39100915/article/details/103120116">https://blog.csdn.net/weixin_39100915/article/details/103120116</a></p>
<p>总结：题目是都接触过，但没有系统的想过，所以以后遇见要在心中问十万个为什么？就是我们所说的知其然，而更要知其所以然！！！</p>