面试题No.1

1.双向数据绑定的原理
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
当把一个普通 Javascript 对象传给 Vue实例来作为它的 data选项时，Vue将遍历它的属性，用Object.defineProperty()将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

2.常用指令，
v-for v-text v-if v-html v-else v-show

3.组件：全局组件，局部组件，自定义组件，动态组件，***组件通信的方式
父传子传参通过props接收数据接受的数据和data中的数据一样可以直接挂载到实例中
子传父通过自定义事件，在子组件中通过$emit接受兄弟之间通过一个空的vue实例作为事件中心通过，用它来触发事件和监听事件，来实现组建之间的通信，用$on监听事件$emit来触发事件
$children 获取子组件实例
$parent 获取父组件实例

4指令：预定义指令，自定义指令(全局指令，局部指令)
自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：
注册一个全局自定义指令
v-focus Vue.directive(‘focus’, {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
注册局部指定
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}

5生命周期函数
创建实例之前 data methods。。 都没有初始化 买粉吃
beforeCreate(){
},
创建实例之后 data method 已经初始化可以获取数据 此时获取不了dom 此时dom还没有渲染到页面上
created(){
},
渲染dom之前
beforeMount(){
},
渲染dom之后 执行一次
mounted() {
},
beforeUpdate() {
},
updated() {
},
beforeDestroy() {
console.log(“销毁之前”)
},
destroyed() {
console.log(“销毁之后”)
},
生命周期函数
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期

6.key的作用
key是为Vue中的vnode（虚拟节点）标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速。
diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异。

简单来说，主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们

7.Data，computed和watch的作用，和区别
data:
data是一个对象,和数据相关的属性一般都放在data中
data对象内部所有的内容都是成对的,也就是键值对,我们叫属性比如site、url、alexa、msg这样的属性是我们自己定义的
Vue内部把data中的属性使用数据代理的方式直接绑定到了vm对象上
Vue 会递归的将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。官网API-data

computed：
computed是计算属性,也就是计算值,它更多用于计算值的场景。
computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。
computed适用于计算比较消耗性能的计算场景。

watch:
更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作。
无缓存性，页面重新渲染时值不变化也会执行。