• Vue的设计哲学
  • Vue的组成
  • Vue的组件通信(状态管理)
  • Vue的逻辑复用
  • Vue的组件Pattern
  • Vue3.0
  • Vue和TS相容性
  • Vue和React

Vue的理念

Vue 的理念问题 - 知乎

  • 为什么JSX和渲染函数
  • 为什么VDom

为何支持JSX的编写？在Ant-Design-Vue中大量使用了JSX的写法

  • 为什么VDom

Vue 2.0 引入 vdom 的主要原因是 vdom 把渲染过程抽象化了，从而使得组件的抽象能力也得到提升，并且可以适配 DOM 以外的渲染目标。(可以是native，或者其它的任何的target，小程序等)

  • 为什么JSX和渲染函数

因为可以JS代码拼接模板，动态能力更强了，比模板动态能力强太多

Vue的组成


Vue的组件通信方案

vue组件间通信六种方式（完整版） - 知乎
Vue 组件通信方式全面详解 - 掘金 感觉比上面这个写的好一点

  • props
  • $emit , $on
  • $parent $children
  • $attrs $listeners
  • provide inject
  • vuex
  • v-model

Props

区分静态值和动态值

  1. <!-- 静态的值 -->
  2. <blog-post title="My journey with Vue"></blog-post>
  4. <!-- 动态赋予一个变量的值 -->
  5. <blog-post v-bind:title="post.title"></blog-post>
  7. <!-- 动态赋予一个复杂表达式的值 -->
  8. <blog-post
  9.   v-bind:title="post.title + ' by ' + post.author.name"
  10. ></blog-post>

Emit On

通过事件的方式来进行传播

  1. // 子组件触发事件
  2. this.$emit('my-event');
  4. // 使用子组件时监控
  5. <my-component v-on:my-event="doSomething"></my-component>

推荐使用横线划分的Kebab Case

全局事件 EventBus

  1. var Event=new Vue();
  2.     Event.$emit(事件名,数据);
  3.     Event.$on(事件名,data => {});

$Parent和$Children

$Attrs和$Listeners

Vue使用$attrs与$listeners实现多层嵌套传递 - 掘金

主要用来实现多层嵌套的传递，创建高级别的组件时非常有用

attrs传递属性，$listeners传递事件

Provide和Inject模式

project和inject优点类似provider和consumer模式

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

Ant-design-vue中使用的较多的

Vuex

逻辑复用

Vue Function-based API RFC - 知乎
vue开发中的逻辑复用方案 · Issue #43 · zimplexing/blog · GitHub

  • mixins
  • hoc
  • ScopedSlot
  • vue3.0 composition

Vue和TS相容性

Vue和React

2019-07-24 为什么我从vue转到了react? · Issue #9 · coppyC/blog · GitHub

专栏

Code, Design & Things in between - 知乎