No.2 小白短路

//优先级 问题

function app() {

    setTimeout(()=>{
        console.log('1-1');
        Promise.resolve().then(()=>{
            console.log('2-1')
        })
    });
    console.log('1-2');
    Promise.resolve().then(()=>{
        console.log('1-3');
        setTimeout(()=>{
            console.log('3-1')
        })
    })
}
// 1-2 、 1-3 、 1-1、 2-1、 3-1

//////////////////////////////////////////////////////////////////////////

　　console.log('1');

    setTimeout(() => {

        console.log('2');

        process.nextTick(() => console.log('3'));

        new Promise((resolve) => {

            console.log('4');

            resolve();

        }).then(() => console.log('5'))

    });

    process.nextTick(() => console.log('6')); //微任务

    new Promise((resolve) => {

        console.log('7');

        resolve();

    }).then(() => console.log('8'));

    setTimeout(() => {

        console.log('9');

        process.nextTick(() => console.log('10'));

        new Promise((resolve) => {

            console.log('11');

            resolve();

        }).then(() => console.log('12'))

    });

 //////////////////////////////////////////////////////////////////////////

　　async function async1 () {
　　    console.log('async1 start');
        await async2();
    　　console.log('async end')
    }


    async function async2 () {
    　　console.log('async2')
    }



    console.log('script start')



    setTimeout(() => {
    　　console.log('serTimeout')
    }, 0)



    async1()



    new Promise((function (resolve) {
    　　console.log('promise1')
    　　resolve()
    })).then(function () {
    　　console.log('promise2')
    }).then(function () {
    　　console.log('promise3')
    }).then(function () {
    　　console.log('promise4')
    })
    console.log('script end')
    console.log('222')

//////////////////////////////////////////////////////////////////////////

 

//指向与原型链
function car() {
　　var num1 = 10,num2 = 20;
　　console.log(this.num1 + this.num2);
}

car();
new car();
var carBind = car.bind({num1: 100, num2: 200});
carBind();
new carBind();
//NAN、NAN、300、NAN

//闭包
function foo(){
　　var i = 0;
　　return function() {
　　　　console.log(i++);
　　}
}
var f1 = foo(), f2 = foo();
f1() 0
f1() 1
f2() 0
f1() 2
创建两个函数分别保存各自的值，两个函数是不见面的函数 

为什么组件中的 data 必须是一个函数？
组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，
组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，
之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。

计算属性和watch区别
computed计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；只是需要动态值，那就用计算属性
watch 监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法；

组件间的通信 
父子  props/event $parent/$children ref provide/inject
兄弟  bus vuex
跨级  bus vuex provide.inject 

nextTick()理解
异步更新队列，在下次 DOM 更新循环结束之后执行延迟回调。
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

   

Router实现原理应用技术 
location.hash和window.history
目前前端路由的实现方法主要有两种方法，location.hash和window.history
History.pushState() 按指定的名称和URL（如果提供该参数）将数据push进会话历史栈，数据被DOM进行不透明处理；
History.replaceState() 按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。这个数据被DOM 进行了不透明处理。

理解Vue中的Render渲染函数 

输入URL回车瞬间执行过程？
DNS解析 => 客户端发送http请求 => TCP（协议握手） => 服务器接收请求 => 服务器对客户端进行请求 => 生成DOM，css 进行组合渲染

虚拟DOM与真实DOM的区别
虚拟DOM不会进行排版与重绘操作，虚拟DOM就是把真实DOM转换为Javascript代码
真实DOM频繁排版与重绘的效率是相当低的