Zusammenfassung des Wissens über den Technologie-Stack von Vuejs

Vorwort

Die Projekte meiner vorherigen Firma verwendeten hauptsächlich jQuery und Angular1, und dann habe ich React gelernt. Als ich zu dieser Firma kam, hatte ich plötzlich angefangen, Vue zu machen, aber Vue ist es Der Einstieg ist immer noch recht einfach. Das Folgende ist eine Zusammenfassung des Vue-Technologie-Stacks, alles von der offiziellen Website. Es handelt sich hauptsächlich um meine eigene Sammlung von Wissenspunkten zum Vue-Technologie-Stack. Es wird daher empfohlen, meinen vorherigen Artikel Vuejs zu lesen Technologie-Stack von der CLI bis zur Verpackung und Online-Implementierung

Vue

Unabhängiger Build und Laufzeit-Build

Es gibt zwei Erstellungsmethoden: unabhängiger Build und Laufzeit-Build. Der Unterschied besteht darin, dass Ersteres einen Vorlagen-Compiler enthält und Letzteres nicht.

Die Aufgabe des Template-Compilers besteht darin, Template-Strings in reine JavaScript-Rendering-Funktionen zu kompilieren. Wenn Sie die Template-Option in einer Komponente verwenden möchten, benötigen Sie einen Compiler.

Lebenszyklus

Bitte überprüfen Sie das Flussdiagramm auf der offiziellen Website. Was Sie beachten sollten, ist der Unterschied zwischen „Erstellt“ und „Erstellt“, was bedeutet, dass die VM-Instanz erstellt wurde nicht gemountet, daher sollten einige DOM-Operationen in mount platziert werden. Es gibt keinen Unterschied, ob die asynchrone Anfrage erstellt oder gemountet wird. Wenn Sie den Unterschied kennen, kommentieren Sie ihn bitte.

Berechnete Attribute

Ausdrücke in Vorlagen sollten nicht zu viel Logik enthalten. Für jede komplexe Logik sollten berechnete Attribute verwendet werden

berechnete Attribute und Methoden Der Unterschied besteht darin, dass berechnete Eigenschaften werden basierend auf ihren Abhängigkeiten zwischengespeichert.

berechnetes Attribut und berechnetes Attribut. Normalerweise ist es besser, ein berechnetes Attribut anstelle eines zwingenden Überwachungsrückrufs zu verwenden. Während berechnete Eigenschaften in den meisten Fällen besser geeignet sind, ist manchmal ein benutzerdefinierter Watcher erforderlich. Dies ist nützlich, wenn Sie als Reaktion auf Datenänderungen asynchrone oder teure Vorgänge ausführen möchten.

Array-Update-Erkennung

Die Mutationsmethode des Arrays (Mutationsmethode, die das von diesen Methoden aufgerufene ursprüngliche Array ändert) löst eine Ansichtsaktualisierung aus. Es gibt die folgenden sieben:

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

Bei Verwendung der Nicht-Mutationsmethode können Sie das alte Array durch das neue Array ersetzen oder die Vue.set-Methode verwenden.

Objektaktualisierung

Sie können das alte Objekt durch das neue Objekt ersetzen oder die Vue.set-Methode verwenden

Vue.set(vm.someObject, 'foo', 'bar')

this.someObject = Object.assign({}, this.someObject, { a:1, b:2 })

Ereignishandler

Vue .js für v-on stellt Ereignismodifikatoren und Schlüsselmodifikatoren bereit

Formularsteuerelementbindung

Sie können die v-model-Direktive verwenden, um eine bidirektionale Datenbindung für Formularsteuerelemente zu erstellen. Zu den gängigen Modifikatoren gehören .lazy, .number und .trim.

Sie können Formulareingabekomponenten auch mit benutzerdefinierten Ereignissen verwenden.

Komponente

Die API der Vue-Komponente besteht aus drei Teilen: Requisiten, Ereignissen und Slots:

• Requisiten ermöglichen der externen Umgebung die Weitergabe von Daten die Komponente

• Ereignisse ermöglichen es Komponenten, Nebenwirkungen aus der externen Umgebung auszulösen

• Slots ermöglichen externen Umgebungen, zusätzliche Inhalte in die Komponente zu integrieren.

1) Das Datenattribut der Komponente muss eine Funktion sein

2) Eltern-Kind-Komponente

In Vue.js die Beziehung zwischen Eltern-Kind-Komponenten können als Requisiten nach unten und Ereignisse nach oben zusammengefasst werden. Die übergeordnete Komponente leitet Daten über Requisiten an die untergeordnete Komponente weiter, und die untergeordnete Komponente sendet über Ereignisse Nachrichten an die übergeordnete Komponente.

prop ist eine unidirektionale Bindung: Wenn sich die Eigenschaften der übergeordneten Komponente ändern, werden sie an die untergeordnete Komponente übertragen, aber nicht umgekehrt. Dadurch soll verhindert werden, dass untergeordnete Komponenten versehentlich den Status der übergeordneten Komponente ändern – was den Datenfluss der Anwendung schwer verständlich machen würde.

Darüber hinaus werden jedes Mal, wenn die übergeordnete Komponente aktualisiert wird, alle Requisiten der untergeordneten Komponente auf die neuesten Werte aktualisiert. Dies bedeutet, dass Sie Requisiten innerhalb untergeordneter Komponenten nicht ändern sollten. Wenn Sie dies tun, gibt Vue eine Warnung in der Konsole aus.

Warum verspüren wir den Drang, die Daten in prop zu ändern? Normalerweise gibt es zwei Gründe:

1.prop wird als Anfangswert übergeben und die Unterkomponente möchte es als lokale Daten verwenden.

2.prop wird als Anfangswert übergeben . Von Unterkomponenten in andere Datenausgabe verarbeitet.

Aus diesen beiden Gründen ist die richtige Antwort:

1 Definieren Sie eine lokale Variable und initialisieren Sie sie mit dem Wert von prop:

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

2 Berechnete Eigenschaft, die den Wert von prop verarbeitet und zurückgibt.

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

Beachten Sie, dass Objekte und Arrays Referenztypen in JavaScript sind und auf denselben Speicherbereich verweisen. Wenn prop ein Objekt oder Array ist, wirkt sich eine Änderung innerhalb der untergeordneten Komponente auf den Status aus übergeordnete Komponente.

3) Nicht-Eltern-Kind-Komponenten

Manchmal müssen auch zwei Komponenten kommunizieren (Nicht-Eltern-Kind-Beziehung). In einfachen Szenarien kann eine leere Vue-Instanz als zentraler Event-Bus verwendet werden. In komplexen Fällen sollten wir die Verwendung spezieller Zustandsverwaltungsmuster in Betracht ziehen.

4) .sync-Modifikator

In einigen Fällen müssen wir möglicherweise eine „Zwei-Wege-Bindung“ für eine Requisite durchführen.

.sync wurde in 2.0 entfernt und in Vue2.3.0+ wieder hinzugefügt, aber dieses Mal existiert es nur als syntaktischer Zucker zur Kompilierungszeit und wird in eine automatisch aktualisierte übergeordnete Komponenteneigenschaft erweitert -auf Zuhörer. Der folgende Code

<comp :foo.sync="bar"></comp>

wird erweitert zu:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

Wenn die Unterkomponente den Wert von foo aktualisieren muss, muss sie explizit ein Aktualisierungsereignis auslösen:

this.$emit('update:foo', newValue)

5) Slots für die Inhaltsverteilung verwenden

Scope-Slot: Von untergeordneten Komponenten übergebene Requisitenobjekte empfangen. Ein repräsentativerer Anwendungsfall für Bereichsslots sind Listenkomponenten, die es Komponenten ermöglichen, anzupassen, wie jedes Element in der Liste gerendert werden soll

6) Dynamische Komponenten, IS-Attribute und Keep-Alive-Anweisungen

7 )Unterkomponentenindex

尽管有props和events，但是有时仍然需要JavaScript中直接访问子组件。为此可以使用ref为子组件指定一个索引ID。

异步更新队列

虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

过渡效果

Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：

• 在CSS过渡和动画中自动应用class

• 可以配合使用第三方CSS动画库，如Animate.css

• 在过渡钩子函数中使用JavaScript直接操作DOM

• 可以配合使用第三方JavaScript动画库，如Velocity.js

1）单元素/组件的过渡

Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加过渡

• 条件渲染（使用v-if）

• 条件展示（使用v-show）

• 动态组件

• 组件根节点

2）多个元素的过渡

对于原生标签可以使用 v-if/v-else

3）多个组件的过渡

多个组件的过渡我们可以使用动态组件。

4）列表过渡

Render函数和JSX

自定义指令

和Angular的指令类似，主要操作DOM，下面是一个滚动加载的指令，holder暂时没想到什么更好的处理方法：

let scrollCallback = function (callback) {
  let windowH = window.innerHeight
  let getDocumentHeight = function () {
    var body = document.body
    var html = document.documentElement
    return Math.max(
      body.offsetHeight,
      body.scrollHeight,
      html.clientHeight,
      html.offsetHeight,
      html.scrollHeight
    )
  }
  let scrollH = document.documentElement.scrollTop || document.body.scrollTop
  if (windowH + scrollH >= getDocumentHeight() - (this.holder || 20)) {
    callback()
  }
}

let callBackWarpped

export default {
  bind (el, binding, vnode) {
    let holder
    if (vnode.data && vnode.data.attrs && vnode.data.attrs['scroll-placeholder']) {
      holder = parseInt(vnode.data.attrs['scroll-placeholder'])
    } else {
      holder = 20
    }
    callBackWarpped = scrollCallback.bind({el, holder}, binding.value)
    window.addEventListener('scroll', callBackWarpped, false)
  },

  unbind: function () {
    window.removeEventListener('scroll', callBackWarpped, false)
  }
}

混合

混合是一种灵活的分布式复用Vue组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

插件

1）创建插件

Vue.js的插件应当有一个公开方法install。这个方法的第一个参数是Vue构造器 , 第二个参数是一个可选的选项对象。

2）使用插件

通过全局方法Vue.use()使用插件:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

也可以传入一个选项对象:

Vue.use(MyPlugin, { someOption: true })

vue-router

两种导航方式

1）router-link声明式导航

<router-link to="/foo">Go to Foo</router-link>

router-link对应的路由匹配成功，将自动设置class属性值.router-link-active。

2）编程式导航

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

重命名(redirect)和别名(alias)

两种路由模式

vue-router默认hash模式，也可以设置为路由的history模式。

导航钩子

vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。

路由meta

一个路由匹配到的所有路由记录会暴露为$route对象（还有在导航钩子中的route对象）的$route.matched数组。因此，我们需要遍历$route.matched来检查路由记录中的meta字段。

过渡动效

router-view是基本的动态组件，所以我们可以用transition组件给它添加一些过渡效果。

数据获取

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

导航完成之前获取：导航完成前，在路由的enter钩子中获取数据，在数据获取成功后执行导航。

滚动行为(scrollBehavior)

注意: 这个功能只在HTML5 history模式下可用。

路由懒加载

当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合Vue的异步组件和Webpack的code splitting功能,轻松实现路由组件的懒加载。

const Foo = resolve => require(['./Foo.vue'], resolve)

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

router-link

可以设置tag、append、active-class、exact等属性

有时候我们要让 "激活时的CSS类名" 应用在外层元素，而不是a标签本身，那么可以用router-link渲染外层元素，包裹着内层的原生a标签：

<router-link tag="li" to="/foo">
  <a>/foo</a>
</router-link>

在这种情况下，a将作为真实的链接（它会获得正确的 href 的），而"激活时的CSS类名"则设置到外层的li。

Router构造配置

routes、mode、base、linkActiveClass、scrollBehavior

对组件注入

1）注入的属性

通过在Vue根实例的router配置传入router实例，下面两个属性成员会被注入到每个子组件。

$router：router实例

$route：当前激活的路由信息对象。这个属性是只读的，里面的属性是immutable（不可变）的，不过你可以watch（监测变化）它。

2）允许的额外配置：beforeRouteEnter、beforeRouteLeave

vuex

state

1)单一状态树

Vuex使用单一状态树--是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

2）在Vue组件中获得Vuex状态

最好在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到。而不是在每个需要使用state的组件中需要频繁地导入。

3）mapState辅助函数

当一个组件需要获取多个状态时候，可以使用mapState辅助函数帮助我们生成计算属性，这样可以简化代码书写。mapState函数会返回一个对象，然后可以使用对象展开运算符将它与局部计算属性混合使用。

4）不要滥用vuex

使用Vuex并不意味着你需要将所有的状态放入Vuex。虽然将所有的状态放到Vuex会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

getters

getters用来从store中的state中派生出一些状态，例如对列表进行过滤并计数：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

getters可以认为是store的计算属性。和state类似，有mapGetters辅助函数。

mutations

更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutations非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数

1）提交载荷（Payload）

你可以向store.commit传入额外的参数，即mutation的载荷（payload）：

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

2）Mutations需遵守Vue的响应规则

3）使用常量替代Mutation事件类型

4）mutation必须是同步函数

5）在组件中提交Mutations

你可以在组件中使用this.$store.commit('xxx')提交mutation，或者使用mapMutations辅助函数将组件中的methods映射为store.commit调用（需要在根节点注入store）。

actions

actions类似于mutation，不同在于：

• actions提交的是mutation，而不是直接变更状态。

• actions可以包含任意异步操作。

1）在组件中分发Action

你在组件中使用this.$store.dispatch('xxx')分发action，或者使用mapActions辅助函数将组件的methods映射为store.dispatch调用（需要先在根节点注入store）

2）组合Actions

Action通常是异步的，那么如何知道action什么时候结束呢？更重要的是，我们如何才能组合多个action，以处理更加复杂的异步流程？

首先，你需要明白store.dispatch可以处理被触发的action的回调函数返回的Promise，并且store.dispatch仍旧返回Promise。

使用async/await会更加简单：

// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。

为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

插件

Vuex的store接受plugins选项，这个选项暴露出每次mutation的钩子。Vuex插件就是一个函数，它接收store作为唯一参数。

严格模式

开启严格模式，仅需在创建store的时候传入strict:true

在严格模式下，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更--请确保在发布环境下关闭严格模式，以避免性能损失。

表单处理

测试

热重载

Das obige ist der detaillierte Inhalt vonZusammenfassung des Wissens über den Technologie-Stack von Vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!