Vue 面试考点（连载中。。。）1.Vue组件如何通讯vue父子组件父传子父通过:data="message"传

1. Vue组件如何通讯

vue父子组件

父传子

父通过 :data="message" 传值，子用props对象下message接收。

直接获取

this. $children this指向当前vue实例$ children是下面所有子组件的数组

子传父

子通过 this.$emit("message",data) 发送事件，父通过@message="getMessage" getMessage方法接收。

直接获取

this. $parent this指向当前vue实例$ parent 是上面父组件的实例对象

兄弟及祖孙组件

this. $emit 发送事件 this.$ on 接收事件

跨页面使用localstorage,vuex

2.描述组件渲染和更新的过程

初次渲染过程

解析模版为render函数（或在开发环境已完成，vue-loader）

触发响应式，监听data属性的getter和setter

执行render函数会触发getter，生成vnode,patch(elem,vnode)

更新过程

修改data,触发setter(此前在getter中已被监听)

重新执行render函数，生成newVnode

patch(vnode,newVnode)

异步渲染

$nextTick

汇总data的修改，一次性更新视图

减少dom操作次数，提高性能

3.双向数据绑定v-model的实现原理

实为:value与v-on的语法糖，通过绑定value通过v-on触发，利用Object.defineProperty()触发监听set,get事件。

其中observer是最主要的部分，用Object.defineProperty来实现数据的劫持，然后用他的set,get方法来通知，触发update方法，从而实现更新视图

4.自定义v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

<base-checkbox v-model="lovingVue"></base-checkbox>

Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: })

`5.同步和异步的区别是什么？`

**1.同步只有当前api执行完才会执行下一步，异步是当前api不会阻塞后续代码执行。**

**2.获取返回值的时候，同步方法可以直接通过return拿到返回值，异步不可以，异步时函数通过callback回调函数可以拿到返回值。**

同步任务指的是，在主线程上排队执行的任务；异步任务指的是，那些准备执行、被放在"任务队列"中的任务，一旦主线程上的所有同步任务执行完毕，队列中的任务就会结束等待的状态，开始执行。主线程从队列中读取任务的过程是循环不断的，这种运行机制称为Event Loop（事件循环）

6.promise

三种状态 rejected 已失败 fulfilled已成功  pendding挂载中

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
};

Vue 面试考点（连载中。。。）

1. Vue组件如何通讯

**5.同步和异步的区别是什么？**

`5.同步和异步的区别是什么？`