关于前端:前端常见vue面试题必备

v-if 和 v -for 哪个优先级更高

• 实际中不应该把 v-for 和v-if放一起
• 在 vue2 中，v-for的优先级是高于 v-if，把它们放在一起，输入的渲染函数中能够看出会先执行循环再判断条件，哪怕咱们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比拟节约；另外须要留神的是在vue3 中则齐全相同，v-if的优先级高于 v-for，所以v-if 执行时，它调用的变量还不存在，就会导致异样

• 通常有两种状况下导致咱们这样做：

  • 为了过滤列表中的我的项目 (比方 v-for="user in users" v-if="user.isActive")。此时定义一个计算属性 (比方 activeUsers)，让其返回过滤后的列表即可（比方users.filter(u=>u.isActive)）
  • 为了防止渲染本应该被暗藏的列表 (比方 v-for="user in users" v-if="shouldShowUsers")。此时把 v-if 挪动至容器元素上 (比方 ul、ol)或者外面包一层 template 即可
• 文档中明确指出永远不要把 v-if 和 v-for 同时用在同一个元素上，显然这是一个重要的注意事项
• 源码外面对于代码生成的局部，可能清晰的看到是先解决 v-if 还是 v-for，程序上vue2 和vue3正好相同，因而产生了一些症状的不同，然而不管怎样都是不能把它们写在一起的

vue2.x 源码剖析

在 vue 模板编译的时候，会将指令系统转化成可执行的 render 函数

编写一个 p 标签，同时应用 v-if 与 v-for

<div id="app">
  <p v-if="isShow" v-for="item in items">
    {{item.title}}
  </p>
</div>

创立 vue 实例，寄存 isShow 与items数据

const app = new Vue({
  el: "#app",
  data() {
    return {
      items: [{ title: "foo"},
        {title: "baz"}]
    }
  },
  computed: {isShow() {return this.items && this.items.length > 0}
  }
})

模板指令的代码都会生成在 render 函数中，通过 app.$options.render 就能失去渲染函数

ƒ anonymous() {with (this) { return 
    _c('div', { attrs: { "id": "app"} }, 
    _l((items), function (item) 
    {return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e()}), 0) }
}

• _l是 vue 的列表渲染函数，函数外部都会进行一次 if 判断
• 初步失去论断：v-for优先级是比v-i f 高
• 再将 v-for 与v-if置于不同标签

<div id="app">
  <template v-if="isShow">
    <p v-for="item in items">{{item.title}}</p>
  </template>
</div>

再输入下 render 函数

ƒ anonymous() {with(this){return 
    _c('div',{attrs:{"id":"app"}},
    [(isShow)?[_v("\n"),
    _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}

这时候咱们能够看到，v-for与 v-if 作用在不同标签时候，是先进行判断，再进行列表的渲染

咱们再在查看下 vue 源码

源码地位：\vue-dev\src\compiler\codegen\index.js

export function genElement (el: ASTElement, state: CodegenState): string {if (el.parent) {el.pre = el.pre || el.parent.pre}
  if (el.staticRoot && !el.staticProcessed) {return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {return genSlot(el, state)
  } else {
    // component or element
    ...
}

在进行 if 判断的时候，v-for是比 v-if 先进行判断

最终论断：v-for优先级比 v-if 高

vue3.0 个性你有什么理解的吗？

Vue 3.0 正走在公布的路上，Vue 3.0 的指标是让 Vue 外围变得更小、更快、更弱小，因而 Vue 3.0 减少以下这些新个性：

（1）监测机制的扭转

3.0 将带来基于代理 Proxy 的 observer 实现，提供全语言笼罩的反馈性跟踪。这打消了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限度：

• 只能监测属性，不能监测对象
• 检测属性的增加和删除；
• 检测数组索引和长度的变更；
• 反对 Map、Set、WeakMap 和 WeakSet。

新的 observer 还提供了以下个性：

• 用于创立 observable 的公开 API。这为中小规模场景提供了简略轻量级的跨组件状态治理解决方案。
• 默认采纳惰性察看。在 2.x 中，不论反应式数据有多大，都会在启动时被察看到。如果你的数据集很大，这可能会在利用启动时带来显著的开销。在 3.x 中，只察看用于渲染应用程序最后可见局部的数据。
• 更准确的变更告诉。在 2.x 中，通过 Vue.set 强制增加新属性将导致依赖于该对象的 watcher 收到变更告诉。在 3.x 中，只有依赖于特定属性的 watcher 才会收到告诉。
• 不可变的 observable：咱们能够创立值的“不可变”版本（即便是嵌套属性），除非零碎在外部临时将其“解禁”。这个机制可用于解冻 prop 传递或 Vuex 状态树以外的变动。
• 更好的调试性能：咱们能够应用新的 renderTracked 和 renderTriggered 钩子准确地跟踪组件在什么时候以及为什么从新渲染。

（2）模板

模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会从新渲染，而 3.0 把作用域插槽改成了函数的形式，这样只会影响子组件的从新渲染，晋升了渲染的性能。

同时，对于 render 函数的方面，vue3.0 也会进行一系列更改来不便习惯间接应用 api 来生成 vdom。

（3）对象式的组件申明形式

vue2.x 中的组件是通过申明的形式传入一系列 option，和 TypeScript 的联合须要通过一些装璜器的形式来做，尽管能实现性能，然而比拟麻烦。3.0 批改了组件的申明形式，改成了类式的写法，这样使得和 TypeScript 的联合变得很容易。

此外，vue 的源码也改用了 TypeScript 来写。其实当代码的性能简单之后，必须有一个动态类型零碎来做一些辅助治理。当初 vue3.0 也全面改用 TypeScript 来重写了，更是使得对外裸露的 api 更容易联合 TypeScript。动态类型零碎对于简单代码的保护的确很有必要。

（4）其它方面的更改

vue3.0 的扭转是全面的，下面只波及到次要的 3 个方面，还有一些其余的更改：

• 反对自定义渲染器，从而使得 weex 能够通过自定义渲染器的形式来扩大，而不是间接 fork 源码来改的形式。
• 反对 Fragment（多个根节点）和 Protal（在 dom 其余局部渲染组建内容）组件，针对一些非凡的场景做了解决。
• 基于 treeshaking 优化，提供了更多的内置性能。

vue 中应用了哪些设计模式

1. 工厂模式 – 传入参数即可创立实例

虚构 DOM 依据参数的不同返回根底标签的 Vnode 和组件 Vnode

2. 单例模式 – 整个程序有且仅有一个实例

vuex 和 vue-router 的插件注册办法 install 判断如果零碎存在实例就间接返回掉

3. 公布 - 订阅模式 (vue 事件机制)

4. 观察者模式 (响应式数据原理)

5. 装璜模式: (@装璜器的用法)

6. 策略模式 策略模式指对象有某个行为, 然而在不同的场景中, 该行为有不同的实现计划 - 比方选项的合并策略

Vue 模板编译原理

Vue 的编译过程就是将 template 转化为 render 函数的过程 分为以下三步

第一步是将 模板字符串 转换成 element ASTs（解析器）第二步是对 AST 进行动态节点标记，次要用来做虚构 DOM 的渲染优化（优化器）第三步是 应用 element ASTs 生成 render 函数代码字符串（代码生成器）

相干代码如下

export function compileToFunctions(template) {
  // 咱们须要把 html 字符串变成 render 函数
  // 1. 把 html 代码转成 ast 语法树  ast 用来形容代码自身造成树结构 不仅能够形容 html 也能形容 css 以及 js 语法
  // 很多库都使用到了 ast 比方 webpack babel eslint 等等
  let ast = parse(template);
  // 2. 优化动态节点
  // 这个有趣味的能够去看源码  不影响外围性能就不实现了
  //   if (options.optimize !== false) {//     optimize(ast, options);
  //   }

  // 3. 通过 ast 从新生成代码
  // 咱们最初生成的代码须要和 render 函数一样
  // 相似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))
  // _c 代表创立元素 _v 代表创立文本 _s 代表文 Json.stringify-- 把对象解析成文本
  let code = generate(ast);
  //   应用 with 语法扭转作用域为 this  之后调用 render 函数能够应用 call 扭转 this 不便 code 外面的变量取值
  let renderFn = new Function(`with(this){return ${code}}`);
  return renderFn;
}

为什么在 Vue3.0 采纳了 Proxy, 摈弃了 Object.defineProperty？

Object.defineProperty 自身有肯定的监控到数组下标变动的能力, 然而在 Vue 中, 从性能 / 体验的性价比思考, 尤大大就弃用了这个个性。为了解决这个问题, 通过 vue 外部解决后能够应用以下几种办法来监听数组

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

因为只针对了以上 7 种办法进行了 hack 解决, 所以其余数组的属性也是检测不到的, 还是具备肯定的局限性。

Object.defineProperty 只能劫持对象的属性, 因而咱们须要对每个对象的每个属性进行遍历。Vue 2.x 里, 是通过 递归 + 遍历 data 对象来实现对数据的监控的, 如果属性值也是对象那么须要深度遍历, 显然如果能劫持一个残缺的对象是才是更好的抉择。

Proxy 能够劫持整个对象, 并返回一个新的对象。Proxy 不仅能够代理对象, 还能够代理数组。还能够代理动静减少的属性。

diff 算法

<details open=””><summary>答案 </summary>
<p>
</p><p> 工夫复杂度： 个树的齐全 diff 算法是一个工夫复杂度为 O(n*3），vue 进行优化转化成 O(n)。</p>
<p> 了解：</p>
<ul>
<li>
<p> 最小量更新， key 很重要。这个能够是这个节点的惟一标识，通知 diff 算法，在更改前后它们是同一个 DOM 节点 </p>
<ul>
<li> 扩大 v-for 为什么要有 key，没有 key 会暴力复用，举例子的话轻易说一个比方挪动节点或者减少节点（批改 DOM），加 key 只会挪动缩小操作 DOM。</li>
</ul>
</li>
<li>
<p> 只有是同一个虚构节点才会进行精细化比拟，否则就是暴力删除旧的，插入新的。</p>
</li>
<li>
<p> 只进行同层比拟，不会进行跨层比拟。</p>
</li>
</ul>
<p>diff 算法的优化策略：四种命中查找，四个指针 </p>
<ol>
<li>
<p> 旧前与新前（先比结尾，后插入和删除节点的这种状况）</p>
</li>
<li>
<p> 旧后与新后（比结尾，前插入或删除的状况）</p>
</li>
<li>
<p> 旧前与新后（头与尾比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧后之后）</p>
</li>
<li>
<p> 旧后与新前（尾与头比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧前之前）</p>
</li>
</ol>
<p></p>
</details>

— 问完下面这些如果都能很分明的话，根本 O 了 —

以下的这些简略的概念，你必定也是没有问题的啦😉

参考 前端进阶面试题具体解答

Vue 组件间通信有哪几种形式？

​ Vue 组件间通信是面试常考的知识点之一，这题有点相似于凋谢题，你答复出越多办法当然越加分，表明你对 Vue 把握的越纯熟。Vue 组件间通信只有指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，上面咱们别离介绍每种通信形式且会阐明此种办法可实用于哪类组件间通信。

（1）props / $emit 实用 父子组件通信

这种办法是 Vue 组件的根底，置信大部分同学耳闻能详，所以此处就不举例开展介绍。

（2）ref 与 $parent / $children 实用 父子组件通信

• ref：如果在一般的 DOM 元素上应用，援用指向的就是 DOM 元素；如果用在子组件上，援用就指向组件实例
• $parent / $children：拜访父 / 子实例

（3）EventBus（$emit / $on） 实用于 父子、隔代、兄弟组件通信

这种办法通过一个空的 Vue 实例作为地方事件总线（事件核心），用它来触发事件和监听事件，从而实现任何组件间的通信，包含父子、隔代、兄弟组件。

（4）$attrs/$listeners 实用于 隔代组件通信

• $attrs：蕴含了父作用域中不被 prop 所辨认 (且获取) 的个性绑定 (class 和 style 除外)。当一个组件没有申明任何 prop 时，这里会蕴含所有父作用域的绑定 (class 和 style 除外)，并且能够通过 v-bind="$attrs" 传入外部组件。通常配合 inheritAttrs 选项一起应用。
• $listeners：蕴含了父作用域中的 (不含 .native 润饰器的) v-on 事件监听器。它能够通过 v-on="$listeners" 传入外部组件

（5）provide / inject 实用于 隔代组件通信

先人组件中通过 provider 来提供变量，而后在子孙组件中通过 inject 来注入变量。provide / inject API 次要解决了跨级组件间的通信问题，不过它的应用场景，次要是子组件获取下级组件的状态，跨级组件间建设了一种被动提供与依赖注入的关系。

（6）Vuex 实用于 父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。每一个 Vuex 利用的外围就是 store（仓库）。“store”基本上就是一个容器，它蕴含着你的利用中大部分的状态 (state)。

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地失去高效更新。
• 扭转 store 中的状态的惟一路径就是显式地提交 (commit) mutation。这样使得咱们能够不便地跟踪每一个状态的变动。

Vue3.0 和 2.0 的响应式原理区别

Vue3.x 改用 Proxy 代替 Object.defineProperty。因为 Proxy 能够间接监听对象和数组的变动，并且有多达 13 种拦挡办法。

相干代码如下

import {mutableHandlers} from "./baseHandlers"; // 代理相干逻辑
import {isObject} from "./util"; // 工具办法

export function reactive(target) {
  // 依据不同参数创立不同响应式对象
  return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {if (!isObject(target)) {return target;}
  const observed = new Proxy(target, baseHandler);
  return observed;
}

const get = createGetter();
const set = createSetter();

function createGetter() {return function get(target, key, receiver) {
    // 对获取的值进行喷射
    const res = Reflect.get(target, key, receiver);
    console.log("属性获取", key);
    if (isObject(res)) {
      // 如果获取的值是对象类型，则返回以后对象的代理对象
      return reactive(res);
    }
    return res;
  };
}
function createSetter() {return function set(target, key, value, receiver) {const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);
    if (!hadKey) {console.log("属性新增", key, value);
    } else if (hasChanged(value, oldValue)) {console.log("属性值被批改", key, value);
    }
    return result;
  };
}
export const mutableHandlers = {
  get, // 当获取属性时调用此办法
  set, // 当批改属性时调用此办法
};

vue 中应用了哪些设计模式

1. 工厂模式 – 传入参数即可创立实例

虚构 DOM 依据参数的不同返回根底标签的 Vnode 和组件 Vnode

2. 单例模式 – 整个程序有且仅有一个实例

vuex 和 vue-router 的插件注册办法 install 判断如果零碎存在实例就间接返回掉

3. 公布 - 订阅模式 (vue 事件机制)

4. 观察者模式 (响应式数据原理)

5. 装璜模式: (@装璜器的用法)

6. 策略模式 策略模式指对象有某个行为, 然而在不同的场景中, 该行为有不同的实现计划 - 比方选项的合并策略

… 其余模式欢送补充

Vue 的生命周期办法有哪些 个别在哪一步发申请

beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。在以后阶段 data、methods、computed 以及 watch 上的数据和办法都不能被拜访

created 实例曾经创立实现之后被调用。在这一步，实例已实现以下的配置：数据观测(data observer)，属性和办法的运算，watch/event 事件回调。这里没有 $el, 如果非要想与 Dom 进行交互，能够通过 vm.$nextTick 来拜访 Dom

beforeMount 在挂载开始之前被调用：相干的 render 函数首次被调用。

mounted 在挂载实现后产生，在以后阶段，实在的 Dom 挂载结束，数据实现双向绑定，能够拜访到 Dom 节点

beforeUpdate 数据更新时调用，产生在虚构 DOM 从新渲染和打补丁（patch）之前。能够在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程

updated 产生在更新实现之后，以后阶段组件 Dom 已实现更新。要留神的是防止在此期间更改数据，因为这可能会导致有限循环的更新，该钩子在服务器端渲染期间不被调用。

beforeDestroy 实例销毁之前调用。在这一步，实例依然齐全可用。咱们能够在这时进行善后收尾工作，比方革除计时器。

destroyed Vue 实例销毁后调用。调用后，Vue 实例批示的所有货色都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

activated keep-alive 专属，组件被激活时调用

deactivated keep-alive 专属，组件被销毁时调用

异步申请在哪一步发动？

能够在钩子函数 created、beforeMount、mounted 中进行异步申请，因为在这三个钩子函数中，data 曾经创立，能够将服务端端返回的数据进行赋值。

如果异步申请不须要依赖 Dom 举荐在 created 钩子函数中调用异步申请，因为在 created 钩子函数中调用异步申请有以下长处：

• 能更快获取到服务端数据，缩小页面 loading 工夫；
• ssr 不反对 beforeMount、mounted 钩子函数，所以放在 created 中有助于一致性；

Vue 中组件生命周期调用程序说一下

组件的调用程序都是 先父后子 , 渲染实现的程序是 先子后父。

组件的销毁操作是 先父后子 ，销毁实现的程序是 先子后父。

加载渲染过程

父 beforeCreate-> 父 created-> 父 beforeMount-> 子 beforeCreate-> 子 created-> 子 beforeMount- > 子 mounted-> 父 mounted

子组件更新过程

父 beforeUpdate-> 子 beforeUpdate-> 子 updated-> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy-> 子 beforeDestroy-> 子 destroyed-> 父 destroyed

你有对 Vue 我的项目进行哪些优化？

（1）代码层面的优化

• v-if 和 v-show 辨别应用场景
• computed 和 watch 辨别应用场景
• v-for 遍历必须为 item 增加 key，且防止同时应用 v-if
• 长列表性能优化
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化有限列表性能
• 服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

• Webpack 对图片进行压缩
• 缩小 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建后果输入剖析
• Vue 我的项目的编译优化

（3）根底的 Web 技术的优化

• 开启 gzip 压缩
• 浏览器缓存
• CDN 的应用
• 应用 Chrome Performance 查找性能瓶颈

理解 nextTick 吗？

异步办法，异步渲染最初一步，与 JS 事件循环分割严密。次要应用了宏工作微工作（setTimeout、promise那些），定义了一个异步办法，屡次调用 nextTick 会将办法存入队列，通过异步办法清空以后队列。

Vuex 中 action 和 mutation 的区别

mutation 中的操作是一系列的同步函数，用于批改 state 中的变量的的状态。当应用 vuex 时须要通过 commit 来提交须要操作的内容。mutation 十分相似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是理论进行状态更改的中央，并且它会承受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {count: 1},
  mutations: {increment (state) {state.count++      // 变更状态}
  }
})

当触发一个类型为 increment 的 mutation 时，须要调用此函数：

store.commit('increment')

而 Action 相似于 mutation，不同点在于：

• Action 能够蕴含任意异步操作。
• Action 提交的是 mutation，而不是间接变更状态。

const store = new Vuex.Store({
  state: {count: 0},
  mutations: {increment (state) {state.count++}
  },
  actions: {increment (context) {context.commit('increment')
    }
  }
})

Action 函数承受一个与 store 实例具备雷同办法和属性的 context 对象，因而你能够调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
所以，两者的不同点如下：

• Mutation 专一于批改 State，实践上是批改 State 的惟一路径；Action 业务代码、异步申请。
• Mutation：必须同步执行；Action：能够异步，但不能间接操作 State。
• 在视图更新时，先触发 actions，actions 再触发 mutation
• mutation 的参数是 state，它蕴含 store 中的数据；store 的参数是 context，它是 state 的父级，蕴含 state、getters

请说出 vue cli 我的项目中 src 目录每个文件夹和文件的用法

• assets文件夹是放动态资源；
• components是放组件；
• router是定义路由相干的配置;
• view视图；
• app.vue是一个利用主组件；
• main.js是入口文件

computed 的实现原理

computed 实质是一个惰性求值的观察者。

computed 外部实现了一个惰性的 watcher, 也就是 computed watcher,computed watcher 不会立即求值, 同时持有一个 dep 实例。

其外部通过 this.dirty 属性标记计算属性是否须要从新求值。

当 computed 的依赖状态产生扭转时, 就会告诉这个惰性的 watcher,

computed watcher 通过 this.dep.subs.length 判断有没有订阅者,

有的话, 会从新计算, 而后比照新旧值, 如果变动了, 会从新渲染。(Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 从新渲染，实质上是一种优化。)

没有的话, 仅仅把 this.dirty = true。(当计算属性依赖于其余数据时，属性并不会立刻从新计算，只有之后其余中央须要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）个性。)

理解 nextTick 吗？

异步办法，异步渲染最初一步，与 JS 事件循环分割严密。次要应用了宏工作微工作（setTimeout、promise那些），定义了一个异步办法，屡次调用 nextTick 会将办法存入队列，通过异步办法清空以后队列。

Vue 中 v -html 会导致哪些问题

• 可能会导致 xss 攻打
• v-html 会替换掉标签外部的子元素

let template = require('vue-template-compiler'); 
let r = template.compile(`<div v-html="'<span>hello</span>'"></div>`) 

// with(this){return _c('div',{domProps: {"innerHTML":_s('<span>hello</span>')}})} 
console.log(r.render);

// _c 定义在 core/instance/render.js 
// _s 定义在 core/instance/render-helpers/index,js
if (key === 'textContent' || key === 'innerHTML') {if (vnode.children) vnode.children.length = 0 
    if (cur === oldProps[key]) continue // #6601 work around Chrome version <= 55 bug where single textNode // replaced by innerHTML/textContent retains its parentNode property 
    if (elm.childNodes.length === 1) {elm.removeChild(elm.childNodes[0]) 
    } 
}

v-model 的原理？

咱们在 vue 我的项目中次要应用 v-model 指令在表单 input、textarea、select 等元素上创立双向数据绑定，咱们晓得 v-model 实质上不过是语法糖，v-model 在外部为不同的输出元素应用不同的属性并抛出不同的事件：

• text 和 textarea 元素应用 value 属性和 input 事件；
• checkbox 和 radio 应用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

以 input 表单元素为例：

<input v-model='something'>

相当于

<input v-bind:value="something" v-on:input="something = $event.target.value">

如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：

父组件：<ModelChild v-model="message"></ModelChild>

子组件：<div>{{value}}</div>

props:{value: String},
methods: {test1(){this.$emit('input', '小红')
  },
},

Vue 组件间通信有哪几种形式？

Vue 组件间通信是面试常考的知识点之一，这题有点相似于凋谢题，你答复出越多办法当然越加分，表明你对 Vue 把握的越纯熟。Vue 组件间通信只有指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，上面咱们别离介绍每种通信形式且会阐明此种办法可实用于哪类组件间通信。

（1）props / $emit 实用 父子组件通信 这种办法是 Vue 组件的根底，置信大部分同学耳闻能详，所以此处就不举例开展介绍。

（2）ref 与 $parent / $children 实用 父子组件通信

• ref：如果在一般的 DOM 元素上应用，援用指向的就是 DOM 元素；如果用在子组件上，援用就指向组件实例
• $parent / $children：拜访父 / 子实例

（3）EventBus（$emit / $on） 实用于 父子、隔代、兄弟组件通信 这种办法通过一个空的 Vue 实例作为地方事件总线（事件核心），用它来触发事件和监听事件，从而实现任何组件间的通信，包含父子、隔代、兄弟组件。

（4）$attrs/$listeners 实用于 隔代组件通信

• $attrs：蕴含了父作用域中不被 prop 所辨认 (且获取) 的个性绑定 (class 和 style 除外)。当一个组件没有申明任何 prop 时，这里会蕴含所有父作用域的绑定 (class 和 style 除外)，并且能够通过 v-bind="$attrs" 传入外部组件。通常配合 inheritAttrs 选项一起应用。
• $listeners：蕴含了父作用域中的 (不含 .native 润饰器的) v-on事件监听器。它能够通过 v-on="$listeners" 传入外部组件

（5）provide / inject 实用于 隔代组件通信 先人组件中通过 provider 来提供变量，而后在子孙组件中通过 inject 来注入变量。provide / inject API 次要解决了跨级组件间的通信问题，不过它的应用场景，次要是子组件获取下级组件的状态，跨级组件间建设了一种被动提供与依赖注入的关系。（6）Vuex 实用于 父子、隔代、兄弟组件通信 Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。每一个 Vuex 利用的外围就是 store（仓库）。“store”基本上就是一个容器，它蕴含着你的利用中大部分的状态 (state)。

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地失去高效更新。
• 扭转 store 中的状态的惟一路径就是显式地提交 (commit) mutation。这样使得咱们能够不便地跟踪每一个状态的变动。