一些vue你不太知道的知识（2） | 8月更文挑战

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

1、vue组件data为何必须是个函数而vue根实例没有这个限制？

一、函数每次执行都会返回全新的data对象的实例

二、vue组件可能会存在多个实例，若是使用对象形式定义data就会致使不少组件公用同一个data，当data中数据改变就会影响其余组件的展现。

三、原理是vue中data使用函数的方式，在源码initData中做为工厂函数返回全新data对象，能够避免第二条发生在data数据更新影响其余组件的问题。

2、vue中的key的做用和原理是什么？

//html:
<div v-for="item in nums" :key="item">{{item}}</div>
//js:
const app = new Vue({
    el:'demo',
    data: {
        nums: ['a', 'b', 'c', 'd', 'e']
    },
    mounted() {
        setTimeout(()=> {
            this.nums.splice(2,0,'f');
        },1000);
    }
});
复制代码

在上面这段代码中，须要在初始化的时候在数组中加入一个f的字段，若是能够key的话会产生下面的问题

不使用key

若是你在执行的时候打断点调试，就能够在源码中发现src\core\vdom\patch.js 中updateChildren()方法就是以上的图

一、key的做用主要是为了更快速的更新DOM，原理就是vue源码中的patch过程当中key能够准确的判断两个节点是不是同一个，从而避免更新不一样元素，减小DOM操做，提升性能

二、不设置key会有warn提醒的bug

三、vue在使用相同元素的DOM过渡切换时，也会用到key，就是为了让vue能够区分他们，不然vue只能替换内部属性，而不会触发过分效果

3、vue-router中的导航钩子有哪些？

一、全局导航钩子

      beforeEach(to,from,next)路由改变前触发该方法，能够在用户验证权限的时候使用

             to：将要跳转的路由对象

             from：当前页面的路由对象

             next：路由控制参数，判断一些权限，而后控制：

                      next()路由正常执行跳转

                      若是next(false)就会取消导航，

                      next('/index')当前路由中断，进行一个新的index页面的路由跳转，

                      next(error)若是一个error实例，则导航会被终止而且该错误会被传递给router.onError(),走到afterEach(to,from)路由改变后的钩子

beforeEach((to,from,next) => {
    if(to.fullPath != '/login') {//若是不是登陆页面
         if(!localStorage.token) {//若是没有token
            next('/login');//就进入login页面登陆
         }else {
            next();//正常跳转
         }
    }else {
        next();//正常跳转
    }
})
复制代码

二、组件内的导航钩子

     1）beforeRouteEnter(to,from,next);和上面方法相似，可是此实例还没被建立，因此不能获取实例this

     2）beforeRouteUpdate(to,from,next);当前路由不改变，可是在组件被复用的时候触发，能够获取实例this

     3）beforeRouteLeave(to,from,next);当导航离开组件时触发，能够获取实例this

三、使用watch监听路由$route的变化

4、nextTick的原理

你们都知道，它能够在DOM更新后执行一个回调方法 ，其实内部使用了mutationObserver监听DOM的变化，mutationObserver是H5新增的属性，用于监听DOM修改事件，能够监听到节点的属性，文本等。

//mutationObserver的基本用法：
var observer = new MutationObserver(function() {
    console.log('dom修改了');
});
var content = document.querySelector('content');
observer.observer(content);
复制代码

能够查看源码/src/core/util/env.js，里面用到了事件循环机制，由于能够经过点击，页面渲染，脚本执行，网络请求等方式触发DOM的更新，为了协调这些事件，浏览器使用事件循环机制。

事件循环机制Event Loop

会维护一个或多个队列，以上触发DOM的方法就会在队列中加入任务，有一个持续执行的线程来执行这些任务，执行完一个就移除一个。

因此nextTick里要执行的代码就放到了队列的末尾执行，从而达到DOM更新后执行的效果，也可也理解使用setTimeout延时的时间恰到好处。可是vue的数据响应过程是：数据修改->通知watcher->更新dom。而数据修改咱们不知道何时会发生，若是在重绘以前就会发生屡次渲染，形成性能浪费，更多的还须要去了解event loop的另外一个概念：microtask，这里就很少说了，相似于微任务。

总结就是：

一、vue使用异步队列的方法控制DOM的更新和nextTick回调后执行

二、microtask有优先的特性，能够确保队列中的微任务在一次事件循环机制前被执行完

5、vue的设计原则

一、渐进式的javaScript框架

vue被设计为自下而上逐层应用，vue核心只关注视图层，易上手还能够和第三方库整合，能够彻底的实现复杂的单页应用提供驱动。

二、易用

vue提供数据响应式，声明式模板语法和基于配置的组件系统等核心，因此咱们只须要会js,html,css就能够开发vue

三、灵活

若是一个应用比较小，就能够只须要vue核心功能开发，若是应用比较大，就能够加入路由管理，vuex等方便灵活开发

四、高效

内部更新虚拟dom的快速和使用了diff算法提升了大量的性能，vue3还使用proxy对数据响应式改进和编译器对于静态内容的编译都让vue更高效了。