笔试

以下代码执行输出结果是什么

  1. function b () {
  2.     console.log(a);
  3.     var a = 10;
  4.     funciton a(){};
  5.     a = 100;
  6.     console.log(a);
  7. }
  8. b();
  9. //  function a(){}
  10. //  100

数组去重, 能写几种写几种

  2. //遍历数组法: 最简单数组去重法
  3. function unique1(array){
  4.   var result = []; //一个新的临时数组
  5.   //遍历当前数组
  6.   for(var i = 0; i < array.length; i++){
  7.     //如果当前数组的第i已经保存进了临时数组，那么跳过，
  8.     //否则把当前项push到临时数组里面
  9.     if (result.indexOf(array[i]) == -1) result.push(array[i]);
  10.   }
  11.   return result;
  12. }
  15. // 对象键值对法: 速度最快， 占空间最多（空间换时间）
  16. function unique2(array){
  17.   var obj = {}, result = [], len = array.length, val, type;
  18.     for (var i = 0; i < len; i++) {
  19.         val = array[i];
  20.         type = typeof val;
  21.        if (!obj[val]) {
  22.            obj[val] = true;
  23.            result.push(val)
  24.        }
  25.     }
  26.     return result;
  27. }
  28. // 数组下标判断法
  29. function unique3(array){
  30.   var n = [array[0]]; //结果数组
  31.   //从第二项开始遍历
  32.   for(var i = 1; i < array.length; i++) {
  33.     //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
  34.     //那么表示第i项是重复的，忽略掉。否则存入结果数组
  35.     if (array.indexOf(array[i]) == i) n.push(array[i]);
  36.   }
  37.   return n;
  38. }
  41. //排序后相邻去除法 将相同的值相邻，然后遍历去除重复值
  42. function unique4(array){
  43.   array.sort(); 
  44.   var re=[array[0]];
  45.   for(var i = 1; i < array.length; i++){
  46.     if( array[i] !== re[re.length-1])
  47.     {
  48.       re.push(array[i]);
  49.     }
  50.   }
  51.   return re;
  52. }
  55. // 优化遍历数组法 思路：获取没重复的最右一值放入新数组
  56. function unique5(array){
  57.   var r = [];
  58.   for(var i = 0, l = array.length; i < l; i++) {
  59.     for(var j = i + 1; j < l; j++)
  60.       if (array[i] === array[j]) j = ++i;
  61.     r.push(array[i]);
  62.   }
  63.   return r;
  64. }
  66. // es6 set去重
  67. funciton unique6(arr) {
  68.     return Array.from(new Set(arr))
  69.     <!--或者-->
  70.     return [...new Set(arr)]
  71. }
  73. // 利用includes实现去重
  74. function unique7(arr) {
  75.     var result = [];
  76.     for (var i = 0; i < arr.length; i ++) {
  77.         if (!result.includes(arr[i)) {
  78.             result.push(arr[i);
  79.         }
  80.     }
  81.     return result;
  82. }
  84. // 利用reduce + includes 去重
  85. function unique8(arr) {
  86.     return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
  87. }
  89. // 利用Map结构去重
  91. function unique9 (arr) {
  92.     let map = new Map();
  93.     let result = [];
  94.     for (var i = 0; i < arr.length; i++) {
  95.         if (map.has(arr[i])) { 
  96.             map.set(arr[i], true);
  97.         } else {
  98.             map.set(arr[i], false);
  99.             result.push(arr[i])
  100.         }
  101.     }
  102.     return result;
  103. }

请列举出三个Vue中常用的生命周期钩子函数

vue组件之间的传值

父子组件如何交流

父到子
  1.    <child :a=a @change="change">
  1. 属性：props
  2. vm.$attrs子组件获取未注册的属性
  3. v-bind=”$attrs” 子组件传递给孙子组件
  4. this.重庆网锐科技有限公司 - 图1children 麻烦效率也比较低 不推荐
  1.         <div id="app">
  2.             <my-content :title="tilte" :content="content" ></my-content>
  3.         </div>
  4.         <script>
  5.             const vm = new Vue({
  6.                 el: '#app',
  7.                 data: {
  8.                     content: 'content',
  9.                     title: 'title'
  10.                 },
  11.                 components: {
  12.                     myContent: {
  13.                         props: ['title'],
  14.                         created() {
  15.                             console.log(this.$attrs);
  16.                         },
  17.                         inheritAttrs: false,
  18.                         template: `<div> <h3>{{title}}</h3></div>
  19.                                 <my-p v-bind="$attrs"> </my-p></div>`,
  20.                         components: {
  21.                             myP: {
  22.                                 props: ['content'],
  23.                                 template: `<p>{{ content }}</p>`
  24.                             }
  25.                         }
  26.                     }
  27.                 }
  28.             })
  29.         </script>
  1. provide inject
  1.             <div id="app">
  2.                 <my-content ></my-content>
  3.             </div>
  4.             <script>
  5.                 const vm = new Vue({
  6.                     el: '#app',
  7.                     provide: {
  8.                         content: 'content',
  9.                         title: 'title'
  10.                     },
  11.                     components: {
  12.                         myContent: {
  13.                             inject: ['title'],
  14.                             created() {
  15.                                 console.log(this.$attrs);
  16.                             },
  17.                             inheritAttrs: false,
  18.                             template: `<div> <h3>{{title}}</h3></div>
  19.                                     <my-p> </my-p></div>`,
  20.                             components: {
  21.                                 myP: {
  22.                                     inject: ['content'],
  23.                                     template: `<p>{{ content }}</p>`
  24.                                 }
  25.                             }
  26.                         }
  27.                     }
  28.                 })
  29.             </script>

子 —-》 父
  1. $emit(‘change’, )
  2. ref 引用
  3. $listener 所有绑定事件的函数的集合
  1. <div id="app">
  2.     <my-cmp ref="cmp"></my-cmp>
  3. </div>
  4. <script>
  5.     const vm = new Vue({
  6.         el: '#app',
  7.         mounted() {
  8.             console.log(this.$refs.cmp.msg);
  9.         },
  10.         components: {
  11.             myCmp: {
  12.                 data() {
  13.                     return {
  14.                         msg: 'hello world'
  15.                     }
  16.                 }
  17.             }
  18.         },
  19.         methods: {
  20.             cmpFunc() {
  21.                 console.log('cmp')
  22.             }
  23.         },
  24.         template:  `<div></div>`
  25.     })
  26. </script>

子组件与子组件如何通信

  1. vuex
  2. event bus 事件总线
  1. Vue.prototype.bus = new Vue();

路由之间跳转, 如何携带参数, 有哪些方式

  1. 1. <router-link :to={params: {}} />
  2.     传参方式： 
  3.         - params传参（路由的配置 路由配置 path: "/home/:id" 或者 path: "/home/:id" ）
  4.         - query传参  路由不需要额外配置
  5. 2. this.$router.push() (函数里面调用)
  6.         - this.$router.push({name:'home',query: {id:'1'}})
  7.         - this.$router.push({path:'/home',query: {id:'1'}})
  8.         // html 取参 $route.query.id
  9.         // script 取参 this.$route.query.id
  10. query和params区别
  11.     query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
  12.      params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

vuex有哪几种属性? 不用vuex会带来什么问题?

  1. VUEX共有五种属性，分别是 State、 Getter、Mutation 、Action、 Module
  2. 不用vuex会带来的问题
  3. 1、可维护性会下降，你要想修改数据，你得维护三个地方
  4. 2、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
  5. 3、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

vue 双向绑定原理

  1. <div>
  2.     <input type="text" id="text">
  3.     <p id="show"></p>
  4. </div>
  5. <script>
  6.     var obj = {};
  7.     Object.defineProperty(obj, 'text', {
  8.         get: () => {
  9.             return obj['text'];
  10.         },
  11.         set: (val) => {
  12.             show.innerText = val;
  13.             text.value = val;
  14.         }
  15.     }); 
  16.     text.oninput = (e) => {
  17.         obj.text = e.target.value;
  18.     }
  20.     // 新版vue用了Proxy
  22. </script>