vue面试题补充

vue中如何自定义指令（全局和局部）

全局的：参数一:指令调用的dom对象，参数二:指令对象，获取相应的传值信息

Vue.directive('color',function(ele,obj){
  if(obj.value%2==0){
      ele.style.backgroundColor='red';
  }else{
      ele.style.backgroundColor='blue';
  }
})

局部的：

directive:{
	color:function(ele,obj){
		ele.style.backgroundColor='red';
	}
}

为什么vue组件中data必须是一个函数？

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

页面加载时，vue生命周期的触发顺序

（beforeCreate、created、beforeMount、mounted）

延伸问题

 Vue 的父组件和子组件生命周期钩子函数执行顺序？?

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程 :
  父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
• 子组件更新过程 :
  父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
• 父组件更新过程 :
  父 beforeUpdate -> 父 updated
• 销毁过程 :
  父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

简述每个周期具体适合哪些场景

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框

怎么定义 vue-router 的动态路由? 怎么获取传过来的值

this.$router.push({
 name:"路由地址",
 params:{
 name:'要发送的数据',
 }
});
 
 
 
//读取 路由参数接收
this.name = this.$route.params.name;

延伸问题

query 和 params 之间的区别是什么？
1. query 要用 path 来引入，params 需要用 name 来引入

2. 接收参数时，分别是this.$route.query.name  和 this.$route.params.name (注意：是$route而不是$router)

3. query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，前者在浏览器的地址中显示，params 不显示

4. params 传值一刷新就没了，query 传值刷新还存在

 vue优点

1. 、轻量级框架
2. 、简单易学
3. 、双向数据绑定
4. 、组件化
5. 、视图,数据,结构分离
6. 、虚拟DOM
7. 、运行速度更快

 vue-loader是什么？使用它的用途有哪些？

: loader 用于对模块的源代码进行转换。它可以使你在 import 或"加载"模块时预处理文件。

它可以解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理

 优雅降级

.assets和static的区别

相同点：资源在html中使用，都是可以的。

不同点：使用assets下面的资源，在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。

  <div id="hook">
    <h3>演示钩子的组件</h3>
    <p>直接使用路径</p>
    <img src="../../assets/11.png" alt="图片加载失败" title="assets中的图片">
    <img src="../../../static/11.png" alt="图片加载失败" title="static中的图片">
    <br>
    <p>动态绑定路径</p>
    <img :src="assetsURL" alt="图片加载失败" title="assets中的图片">
    <img :src="staticURL" alt="图片加载失败" title="static中的图片">
  </div>

 vue的两个核心点分别是什么？

vue的两个核心点分别是数据驱动和组件系统。

三大框架的对比

angular（MVW）：
1、在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。

vue(mvvm)：
1、轻量级框架
2、在性能上，Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
3、在状态管理方面,使用的是vuex
vue比angular和react的运行速度快。

react (mvc)：
1、React采用特殊的JSX语法。
2、React采用特殊的JSX语法，React采用的Virtual DOM会对渲染出来的结果做脏检查。
3、在状态管理方面，使用的是Redux

为什么使用key

key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的

vue-router 路由钩子函数是什么 执行顺序是什么

路由钩子的执行流程, 钩子函数种类有:全局守卫、路由守卫、组件守卫

完整的导航解析流程:

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

13. 
    //全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
    router.beforeEach((to, from, next) => {
        //如果路由需要跳转
        if (to.meta.isAuth) {
            //判断 如果school本地存储是qinghuadaxue的时候，可以进去
            if (localStorage.getItem('school') === 'qinghuadaxue') {
                next()  //放行
            } else {
                alert('抱歉，您无权限查看！')
            }
        } else {
            // 否则，放行
            next()
        }
    

 $nextTick的使用

 this.$nextTick ()将回调延迟到下次 DOM 更新循环之后执行

可以在created 用 $nextTick操作DOM

$set 方法有什么用？ 有什么特点？  

$set是用于设置对象属性的。对于没有声明的属性,直接用赋值的方法,this.xxx= yyy,视图是不会更新的
使用$set ，视图才会更新

this.list.num = 888; //不生效

this.$set(this.list,'num','888')//

forEach(){
    obj['sex'] = 'NAN'
    
}

 

 vue组件中的data为什么必须是一个函数

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。