面试题总结：

1.怎样理解MVC MVVM的理解？

2.vue的三要素： 分析demo：

3.keep-alive 4.vuex的应用场景 响应式的 如果是大型项目，数据太多，只需要在vuex更改处理数据，不用去每个页面去改。。 5.v-show和v-if的区别 v-show和v-if都能控制元素的显示和隐藏。

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大） 6.介绍一下router 1.route是一条路由 它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。如：{path:’/home’, component: home}

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

2.routes是一组路由

3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

const router = new VueRouter({
      routes // routes: routes 的简写
})

ps:

//main.js
// 引入路由
import router from "./router.js"    // import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错
new Vue({
  el: '#app',
  router,  // 注入到根实例中
  render: h => h(App)
})

4.客户端路由有两种实现方式：基于hash 和基于html5 history api.

就是定义页面中点击的部分，你要跳转到那个地方 定义显示部分，就是点击后，区配的内容显示在什么地方

打开浏览器控制台，首先看到 router-link 标签渲染成了 a 标签，to 属性变成了a 标签的 href 属性，这时就明白了点击跳转的意思。router-view 标签渲染成了我们定义的组件，其实它就是一个占位符，它在什么地方，匹配路径的组件就在什么地方，所以 router-link 和router-view 标签一一对应，成对出现。

其实，当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route 来获取到 router 实例。

它有一个params 属性，就是来获得这个动态部分的。它是一个对象，属性名，就是路径中定义的动态部分 id, 属性值就是router-link中to 属性中的动态部分，如123。 使用vuex时，组件中想要获取到state 中的状态，(模板中中也可以直接$store.state.xx)是用computed 属性，在这里也是一样，在组件中，定义一个computed 属性 dongtaiId

<template>
    <div>
        <h1>User</h1>
        <div>我是user组件</div>
        <h3>动态属性{{ dongtaiId}}</h3>
    </div>
</template>
<script>
    export default {
       computed: {
        dotaiId () {
                return this.$route.params.id
            }
       },
    }
</script>

由于它们都是指向同一组件，vue不会销毁再创建这个组件，而是复用这个组件，就是当第一次点击（如：user123）的时候，vue 把对应的组件渲染出来，但在user123, user456点击来回切换的时候，这个组件就不会发生变化了，组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情，那么只能在组件内部（user.vue中）利用watch 来监听route 实现

<template>
    <div>
        <h1>User</h1>
        <div>我是user组件</div>
        <h3>动态id:{{ dongtaiId}}</h3>
    </div>
</template>
<script>
    export default {
        data(){
          return {
              getId:''
          }  
        },
        computed: {
            dongtaiId() {
                return this.$route.params.id
            }
        },
        watch: {
            $route(to, from) {
                // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对象，你可以把它打印出来，它们也有一个param 属性
                console.log('你要去的路径'+to. path);
                console.log(to);
                console.log('你从哪里来'+from. path);
                console.log(from);
                this.getId = to.params.id
                console.log('获得你想跳到那个路径的动态部分的参数id'+this.getId)
            }
        }
    }
</script>

注意：嵌套路由 // childrens:  //是不加s的  正确：children:[{}]

*path 和 Name路由跳转方式，都可以用query传参 *path路由跳转方式,params传参会被忽略，只能用name命名的方式跳转

path => query
name =>params（不在url）/query（显示在url）

很意外的事情？name =>params 不行 why？ ###原因： 命名路由：（与上面不同的是传递的参数值不会在url中显示）

实际上是传递过去了

ps：// 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定 7.水平居中的6中方法：

8.为什么data中的加return

9.字符串反转

 function reverse(str) {
            return str
                .split('')
                .reverse()
                .join('')
        }
  console.log(reverse(str));

10.js中的foreach用法 和map() 以及区别

forEach更多的用来遍历数组
for in 一般常用来遍历对象或json
for of 用来遍历数组非常方便且比较安全
for in循环出的是key，for of循环出的是value

11.深克隆：

var bob = {
    name: "Bob",
    age: 32
};
 
var bill = (JSON.parse(JSON.stringify(bob)));
bill.name = "Bill";
 
console.log(bob);
console.log(bill);

2.
// 深拷贝
var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
 
$.extend(true,obj1, obj2);   //第一个参数设为true表示深复制
 
console.log(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1)  // 22
 
obj2.b.b1=44;   //obj2重新赋值
console.log(obj1.b.b1)  // 22 obj1拷贝了obj2的所有属性以及值，并不受obj2的影响

12.浅拷贝

// 浅拷贝
var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
 
$.extend(obj1, obj2);   //obj1拷贝了obj2的属性
 
console.log(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1)  // 22
 
obj2.b.b1=44;   //obj2重新赋值
console.log(obj1.b.b1)  // 44  obj1.b仅拷贝了对象的指引，所以受原obj2的影响

13.对象的合并

var obj1= {'a': 1};
var obj2= {'b': 1};
var c = $.extend(obj1, obj2);

console.log(obj1); // {a: 1, b: 1}  obj1已被修改

2.Obj.assign()
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
 
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 且目标对象自身也会改变。

3. 对象的深拷贝和浅拷贝

14.vue项目中async、await+promise来将异步转为同步
msd.misuland.com/pd/41462636…