vue的面试题

vue的面试题

重点：组件、生命周期、双向绑定

vue实例的元素：

1. vm.$el：挂载元素，vue实例DOM的根元素；
2. vm.$data：vue实例观察的数据对象；
3. vm.$props;
4. vm.$options：用于当前vue实例的初始化选项；
5. vm.$parents：父实例；
6. vm.$root：当前组件树的根vue实例，如果没有父实例，就是实例本身；
7. vm.$children：当前实例的直接子组件；
8. vm.$slot：用于访问被slot分发的内容；
9. vm.$scopedSlots;
10. vm.$ref：一个对象，其中包含了所有注册ref的子组件；
11. vm.$isServe：当前vue实例是否运行于服务器；

vue指令，分别说明什么意思？

1. v-if 指令：它是条件渲染指令，根据表达式的真假来删除和插入元素；
2. v-show 指令：v-show 和 v-if 的区别就是，v-show是不管条件死否成立，都会渲染 html, 而 v-if 是只有条件成立才会渲染；
3. v-else 指令：v-else 与 v-show 同时使用，当 v-if 条件不成立的时候，则显示 v-else;
4. v-for 指令：v-for 指令基于一个数组渲染一个列表；
5. v-bind 指令：动态的绑定一个或多个特性，简写为 : ;
6. v-on 指令用来监听dom事件，简写为 @;

vue如何实现数据的双向绑定，底层原理？

底层原理是：
vue的双向绑定是由数据劫持结合发布者，订阅者模式实现的，那么什么是数据劫持？vue是怎么进行数据劫持的？说白了，就是通过 Object.defineProperty() 来劫持数据的 setter 和 getter 操作，再数据变动时做你想做的操作；

数据的双向绑定：

• 实现一个监听器 Observe, 用来劫持并监听所有属性，如果由变动，就通知订阅者；
• 实现一个订阅者 watcher，每一个订阅者都绑定一个更新函数，watcher 可以收到属性的变化通知并执行相应的函数，从而更新视图；
• 实现一个解析器 Compile,可以扫描和解析每个节点的相关指令（v-on,v-model等），如果节点存在 v-on,v-model相关指令，则解析器 Compile 初始化这类模板的数据，使之显示在视图上，然后初始化相应的订阅者 watcher；

vue中，methods,computed，watch 三个属性的区别？

• methods:只要调用就会执行，不管依赖的值有没有改变，无缓存；
• computed：计算属性，依赖其值的变化而变化，有变化就执行，没有变化就不执行，有缓存，不用每次都重新计算，不支持异步；
• watch：侦听属性，观察某一个变量，发生变化会执行，支持异步；

说一下，什么是变异数组，什么是非变异数组？什么是可变对象，什么是非可变对象？

• 变异数组：触发vue试图，改变原数组，例如：
  push(), pop(), shift(), unshift(), splice(), join(), reverse(), sort();
• 非变异数组：无法触发vue试图，不改变原数组，例如：
  slice(), concat(), filter(), find();
• 可变对象：把对象a赋值给对象b,改变对象b的属性值，随之对象a也会改变；
• 不可变对象：对象可能会被其他拥有同样引用地址的对象同步改变，如深拷贝；

vue中，如何实现深度监听？
watch:{} 可监听数据，数据发生变化， 处理函数，watch虽可监听，但只是浅监听，只监听数据第一层或者第二层，例如对象里面套对象data: {obj: {a: 123} }，
深度监听使用方法：
重点：handler方法，deep属性，immediate属性
watch: {
obj : {
handler:function() { //特别注意，不能用箭头函数，箭头函数，this指向全局，处理函数
},
deep: true //深度监听
}
}

vue中，生命周期分为那儿几个阶段？有哪儿些生命周期钩子函数？
八大生命周期：

1. beforeCreate:创建前，例如在这加个loading事件；
2. created:创建后，loadin事件结束，可以做一些初始化，实现函数的自执行；
3. beforeMount:载入前，给vue实例添加$el成员，并且替换掉Dom元素；
4. mounted:载入后，在这里发起厚点请求，拿回数据，并配合路由钩子做一些事情；
5. beforeUpdate:更新前，当vue发现data中的数据发生改变，会触发对象的组件重新渲染，前后调用beforeUpdate和updated两个钩子函数，发生触发子组件的更新；
6. updated:更新后，
7. beforeDestroy:销毁前，你确定删除xxx？
8. destoryed：销毁后，当前组件已被删除，清空相关内容；

剩下的面试题，有时间再跟大家分享。