年末了，你总结了吗？我先来。

时间  2019-11-08
标签 年末 总结 先来 繁體版
原文   原文链接

一、小白的常见概念混淆与经常使用技巧

1）字面量与构建函数

字面量分为： 对象字面、数组字面量、字符串字面量css

new Object()则是构造函数
new Array()构造数组vue

先说下优缺点算法

  1. 对象字面量的声明比构建函数更加方便
  2. 空的对象实质上只是知足如下条件的数据结构：
    • __proto__属性指向Object.prototype
    • 其成员列表指向一个空壳
var obj3 = new Object();
    var num = 0;
    for(var i in obj3){
      num++;
    }
    console.log(num); //0
复制代码

对象的成员的存取遵循两个规则：一、在读取时，该成员表上的属性和方法将会被优先访问到； 二、若是成员表中没有指定的属性，那么会查询对象的整个原型链，直到找到该属性或者原型链的顶部。 因此存取实例中的属性比存取原型中的属性效率要高。咱们应该采用字面量语法建立对象数据库

var Student = function() {
            this.name = 'default';
            this.say = function() {
                console.log('say hello!');
            }
    }
    var s1 =new Student();
    console.log(window.name)
复制代码

new的话，对于student内部的this便指向了全局对象,没有定义的话.api

因此在这里简单总结下构造函数、原型、隐式原型和实例的关系：每一个构造函数都有一个原型属性(prototype)，该属性指向构造函数的原型对象；而实例对象有一个隐式原型属性(proto)，其指向构造函数的原型对象(obj.proto==Object.prototype)；同时实例对象的原型对象中有一个constructor属性，其指向构造函数。数组

2）this在call与apply与bind中

fn.call(asThis, p1, p2)是函数的正常调用方式，当你不肯定参数的个数时，就使用apply fn.apply(asThis, params)promise

bind call和apply是直接调用函数，而bind则是返回一个新函数(并没用调用原来的函数)，这个新函数会call原来的函数，call的参数由你指定。缓存

3）map的使用技巧

// 使用 Map 来找到对应颜色的水果
const fruitColor = newMap()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum']);
function test(color) {
  return fruitColor.get(color) || [];
}
复制代码

4）typeof 数组或者null 判断出来的类型值是object

5）svg的书写方式

<svg class="icon"><use :xlink:href="`#i-${icon}`"></use></svg> 
复制代码

6）debouce与Thorlle

  • debouce定义：当调用动做n毫秒以后，才会执行该动做，若在这n秒以后又调用此动做则将从新计算执行时间
  • Thorlle定义：节流无视后来产生的回调请求。
function  createDebounce  (callback, time){
  var timer
  time = time || 300  //默认值

  return function () {
        if (timer) {
              clearTimeout(timer);
        }

        timer = setTimeout(()=>{
              callback()
        }, time)
  }
}

复制代码
// fn是咱们须要包装的事件回调, interval是时间间隔的阈值
    function throttle(fn, interval) {
      // last为上一次触发回调的时间
      let last = 0
      
      // 将throttle处理结果看成函数返回
      return function () {
          let context = this
          // 保留调用时传入的参数
          let args = arguments
          // 记录本次触发回调的时间
          let now = +new Date()
          
          //时间差
          if (now - last >= interval) {
              last = now;
              fn.apply(context, args);
          }
        }
    }

复制代码

7）if判断的一些坑

诸如 if 语句之类的条件语句使用 ToBoolean 抽象方法来强制求值它们的表达式，并始终遵循如下简单规则：bash

  • Objects 求值为 true
  • Undefined 求值为 false
  • Null 求值为 false
  • Booleans 求值为 布尔值
  • Numbers 若是是 +0、-0、或 NaN 求值为 false ， 不然为 true
  • Strings 若是是空字符串 '' 求值为 false ， 不然为 true
//解释一下
if ([0] && []) {
 // true
 // 一个数组 (即便是一个空数组) 是一个 object, objects 被求值为 true
}
复制代码

8）深拷贝与浅拷贝

  1. 深拷贝的
  • JSON.stringify与JSON.parse
    2.浅拷贝
  • 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 }， 目标改变了
复制代码
  • 展开操做符...

9）Array.some的用法

(function s(){
    const value="0";
    const arrNo = ["", null, "0", 0, "undefined", undefined];
    if(arrNo.some(d => d === value)) return console.log('不是想要的值')
})()
复制代码

10）Array.forEach用法

var arry1 = [1, 2, 3];
arry1.forEach((item, index, arr)=>{
    console.log(arr[index]); //一、二、3
})
复制代码

11）Array.from

let hours = [];
for(let i =0; i<24;i++){
    hours.push(i +'时')
}
//咱们能够写成如下形式
let hours = Array.from({length:24}, (value, index) => index + '时')
复制代码

12）for-in、for-of

for(let i of nums){
	of 里面的值是VALUE
	in 里面的值是key，
    for...of 语句遍历可迭代对象定义要迭代的数据。
    for...in 语句以原始插入顺序迭代对象的可枚举属性。
}
复制代码

13）扩展运算符简写

const odd = [1, 3, 4];
    const nums = [2, 5, 6, ...odd];
    console.log(nums) //[2,5,6,1,3,4]
复制代码

14）乐观与悲观锁（这是不知道哪位大神取的名）

悲观锁 定义：提交表单时，防止屡次提交，咱们会在请求前加上标志位数据结构

var block = false    
        function refesh(){
            if(block){
                return 
            }
            block = true

            return fetch('api')
                .then(res => {
                    block = false
                })
                .catch(err =>{
                    block = false
                })
        }
复制代码

乐观锁 定义：用户在资源下载完以前，在点击其余组件，咱们就会去下载其余资源，以前的请求照常发起，只是不管如何都会被丢弃。

var id = 0
        function loading(resources){
            var load_id = ++id
            PromiseAll(resources)
                .then(()=>{
                    if(load_id === id){
                        //渲染
                    } else{
                        //丢弃
                    }
                })
                .catch(()=>{
                    if(load_id ===id){
                        //提示错误
                    } else{
                        //丢弃
                    }   
                })
        }
复制代码

15）Proxy

对象接受两个参数，第一个参数是须要操做的对象，第二个参数是设置对应拦截的属性，这里的属性一样也支持 get，set 等等，也就是劫持了对应元素的读和写，可以在其中进行一些操做，最终返回一个 Proxy 对象。

const proxy = new Proxy({}, {
  get(target, key) {
    console.log('proxy get key', key)
  },
  set(target, key, value) {
    console.log('value', value)
  }
})
proxy.info     // 'proxy get key info'
proxy.info = 1 // 'value 1'

案例：
            const me = {
                name: "小明", like: "小红 ", food: "香菇", musicPlaying: true
            };

            // const meWithProxy = new Proxy(me, {
            //     get(target, prop) {
            //         if (prop === "like") {
            //             return "学习";
            //         }
            //         return target[prop];
            //     }
            // });
            const meWithProxy = new Proxy(me, {
                set(target, prop, value) {
                    if (prop === "musicPlaying" && value !== true) {
                        throw Error("任何妄图中止音乐的行为都是耍流氓！");
                    }
                    target[prop] = value;
                }
            });

            //console.log("sale_check mounted", meWithProxy.like);
            console.log.log("sale_check mounted", meWithProxy.food);
            console.log("sale_check mounted", meWithProxy.musicPlaying = false);
复制代码

小白的vue入坑之路

1.vue中v-if中用key管理可复用的元素

咱们在不要复用的input框加入了相对应的key，而label元素仍然会被高效的复用。

<template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="emial-input">
        </template>
复制代码

2.动态插入相对应script

3. computed与watch

计算属性顾名思义就是经过其余变量计算得来的另外一个属性，计算属性具备缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。

侦听器watch是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，咱们能够监听当前页码，当页码变化时执行对应的获取数据的函数

  1. 从属性名上，computed是计算属性，也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化，而后执行相对应的函数。
  2. 从实现上，computed的值在get执行后是会缓存的，只有在它依赖的属性值改变以后，下一次获取computed的值时才会从新调用对应的getter来计算。watch在每次监听的值变化时，都会执行回调。 其实从这一点来看，都是在依赖的值变化以后，去执行回调。不少功能原本就不少属性均可以用，只不过有更适合的。

若是一个值依赖多个属性（多对一），用computed确定是更加方便的。 若是一个值变化后会引发一系列操做，或者一个值变化会引发一系列值的变化（一对多），用watch更加方便一些。

  1. watch的回调里面会传入监听属性的新旧值，经过这两个值能够作一些特定的操做。computed一般就是简单的计算。 下面是二者之间的互换
<input >
    
        watch: {
            word() {
                this.$emit("update:keyword", this.word);
            }
        }

上面这个data里面定义word
	computed: {
            word: {
                get() {
                    return this.keyword;
                },
                set(val) {
                    this.$emit("update:keyword", val);
                }
            }
	}
复制代码

4.refs的一些使用注意

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。

关于 ref 注册时间的重要说明：由于 ref 自己是做为渲染结果被建立的，在初始渲染的时候你不能访问它们 - 它们还不存在！$ refs 也不是响应式的，所以你不该该试图用它在模板中作数据绑定。 你应该避免在模板或计算属性中访问 $refs。 还有考虑到他们refs的惟一性，例如：两个表单取一样的话，只会引用到后面那个。

5.父子组件通讯

//父
<Child-one :parentMessage="parentMessage" @childEvent='childtMethod'></Child-one>

methods:{
    childMethod(){
        alert('组件的消息')
    }
}

//子
<button @click="childMethod">子组件</button>
props:{
    parentMessage:{
        type: String,
        default: '子组件'
    }
}
methods:{
    childMethod(){
        this.$emit('childEvent', '组件的信息')
    }
}

复制代码

6.非父子组件的数据传递能够采用

prop是单向数据流，因此prop接受的数据没法双向绑定，咱们能够采用

子组件中经过 emit(eventName)来触发事件 父组件经过on(eventName)来监听事件，

  • 定义一个局部变量，并用prop的值初始化它:
props:['initialCounter'],
data:function(){
    return {counter: this.initialCounter}
}
复制代码
  • 定义一个计算属性，处理prop的值并返回。
props:['size'],
computed:{
    normalizedSize:function(){
         return this.size.trim().toLowerCase()  
    }
}
复制代码

7.vue.extend

1.使用vue构造器,建立一个子类,参数是包含组件选项的对象. 2.是全局的. 结论: Vue.extend实际是建立一个扩展实例构造器,对应的初始化构造器,并将其挂载到标签上

8.vue.mixins

结论:

  • 1.mixins执行的顺序为mixins>mixinTwo>created(vue实例的生命周期钩子);
  • 2.选项中数据属性如data,methods,后面执行的回覆盖前面的,而生命周期钩子都会执行 后面执行created，而咱们created里面放着getSum(){console.log(‘这是vue实例的getSum’)}; -3.extends用法和mixins很类似,只不过接收的参数是简单的选项对象或构造函数,因此extends只能单次扩展一个组件

结论: 1.extends执行顺序为:extends>mixins>mixinTwo>created 2.定义的属性覆盖规则和mixins一致

9.vue.install

1.install是开发vue的插件,这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象(可选) 2.vue.use方法能够调用install方法,会自动阻止屡次注册相同插件.

上面的也能够简写为 

let install = function(Vue){
	components.map(component=>{
		Vue.component(Vue.component.name, Vue.component)
	})
}
复制代码

总结下这几个的区别

  • vue.extend和vue.use的使用，能够构建本身的UI库
  • Vue.extend和Vue.component是为了建立构造器和组件;
  • mixins和extends是为了拓展组件;
  • install是开发插件;

总的顺序关系: Vue.extend>Vue.component>extends>mixins

10.组件name的做用

  1. 当项目使用keep-alive时，可搭配组件name进行缓存过滤
  2. DOM作递归组件时 好比说detail.vue组件里有个list.vue子组件，递归迭代时须要调用自身name
  3. 当你用vue-tools时 vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

11.watcher有两个配置

（1）深度 watcher deep: true （2）该回调将会在侦听开始以后被当即调用 immediate: true

12.beforeDestroy

vue 的beforeDestroy（）生命周期钩子是一个解决基于 Vue Router 的应用中的这类问题的好地方。 beforeDestroy: function () { this.choicesSelect.destroy() } 能够配合deactivated 使用，能够去除keep-alive的钩子

13.keep-alive

当你用keep-alive包裹一个组件后，它的状态就会保留，所以就留在了内存里。

其余

1.diff算法

vue中key的做用主要是为了高效的更新虚拟DOM，其主要的逻辑大概下面这样

2.get和post在缓存方面的区别

get请求相似于查找的过程，用户获取数据，能够不用每次都与数据库链接，因此可使用缓存。 post不一样，post作的通常是修改和删除的工做，因此必须与数据库交互，因此不能使用缓存。 所以get请求适合于请求缓存。

3.setTimeout、process.nextTick、promise执行顺序

Event Loop队列任务有宏任务、微任务

常见的 macro-task 好比： setTimeout、setInterval、 setImmediate、script（总体代码）、 I/O 操做、UI 渲染等。

常见的 micro-task 好比: process.nextTick、Promise、MutationObserver 等。 macro-task出队时，任务是一个一个执行的，micro-task一队一队执行的。

它们的执行优先顺序是process.nextTick>promise>setTimeout

4.css的min-width和max-width

min-width会继承父元素,min-height不会继承父元素，若无父元素，也就是最外层的body，则默认100%

  • 以上是一些工做时候的遇到的问题、可使用到的技巧或者容易混淆的概念，但愿能帮助到一些人。因为能力有限，可能理解有误，欢迎指出。
  • 不喜勿喷，多谢合做
  • 求职启示：深圳有坑的能够联系我qq:1039460820,或者在评论区留下您的联系方式。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程