Einige wichtige Wissenspunkte in Vue

Dieser Artikel teilt Ihnen hauptsächlich einige wichtige Wissenspunkte in Vue mit und hofft, allen zu helfen.

Verwenden Sie keine Pfeilfunktionen für Optionseigenschaften oder Rückrufe

Zum Beispiel:

• erstellt: () => .a)

• vm.$watch('a', newValue => this.myMethod())
  Weil die Pfeilfunktion an den übergeordneten Kontext gebunden ist Zusammengenommen wird this keine Instanz von Vue sein, wie Sie erwartet haben, was oft zu Fehlern wie Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function

Siehe: hier

führt v-html

Doppelte geschweifte Klammern interpretieren die Daten als normalen Text und nicht als HTML-Code. Um echtes HTML auszugeben, müssen Sie die v-html-Direktive verwenden:

<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p>

Einzelheiten finden Sie hier:

Cache für berechnete Attribute vs. Methode

Wir können dieselbe Funktion als Methode anstelle einer berechneten Eigenschaft definieren. Das Endergebnis ist tatsächlich in beide Richtungen genau das gleiche. Der Unterschied besteht jedoch darin, dass berechnete Eigenschaften basierend auf ihren Abhängigkeiten zwischengespeichert werden . Eine berechnete Eigenschaft wird nur dann neu bewertet, wenn sich die zugehörigen Abhängigkeiten ändern. Das bedeutet, dass, solange sich die Nachricht nicht geändert hat, mehrere Zugriffe auf die berechnete Eigenschaft „reversedMessage“ sofort das zuvor berechnete Ergebnis zurückgeben, ohne dass die Funktion erneut ausgeführt werden muss.
Was bedeutet das, dass berechnete Eigenschaften basierend auf ihren Abhängigkeiten zwischengespeichert werden?

computed: {  now: function () {    return Date.now()
  }
}

Obwohl sich der Wert von Date.now() ständig ändert, ist dies nicht der Fall watch, da es sich nicht um eine reaktive Abhängigkeit handelt.

Einzelheiten finden Sie unter: hier

CSS-Stile fügen automatisch Präfixe hinzu

Wenn v-bind:style CSS-Eigenschaften verwendet, die das Hinzufügen von Browser-Engine-Präfixen erfordern, wie z. B. transform, Vue .js erkennt automatisch das entsprechende Präfix und fügt es hinzu.

Einzelheiten finden Sie hier:

Verwenden Sie die bedingte Rendering-Gruppierung v-if für das <template>-Element.

Da es sich bei v-if um eine Direktive handelt, muss sie hinzugefügt werden a über die Elemente. Was aber, wenn Sie mehrere Elemente austauschen möchten? Zu diesem Zeitpunkt können Sie ein Element als unsichtbares Umhüllungselement behandeln und v-if darauf verwenden. Das endgültige Rendering-Ergebnis enthält keine <template>-Elemente.

<template v-if="ok">  <h1>Title</h1>  <p>Paragraph 1</p>  <p>Paragraph 2</p></template>

Siehe hier

v-if und v-show und v-for

• v- if is Der Vorgang des Hinzufügens und Entfernens von Seitenelementen

• v-show ist der Vorgang des Ein- und Ausblendens von Seitenelementen

• , wenn v- zusammen verwendet wird Bei v-for hat v-for eine höhere Priorität als v-if.

Einzelheiten finden Sie hier: hier

Hinweise zur Erkennung von Array-Änderungen

Vue kann kein Array erkennen, dessen Modus sich geändert hat, daher wird dies bei der Ansichtsaktualisierung der Fall sein nicht ausgelöst werden

• Wenn Sie ein Element direkt über den Index festlegen, zum Beispiel: vm.items[indexOfItem] = newValue

• Wenn Sie die Länge des ändern Array, zum Beispiel: vm.items.length = newLength

Einzelheiten finden Sie hier:

Hinweise zur Objektänderungserkennung

Vue kann das Hinzufügen oder Löschen von nicht erkennen Objektattribute

var vm = new Vue({
  data: {
    a: 1
  }
})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的

Aber wir können über die Vue.set(object, key, value)-Methode reaktive Eigenschaften zu verschachtelten Objekten hinzufügen.
Es gibt auch diese häufig verwendete MethodeObject.assign() Wenn wir einem Objekt mehrere neue Attribute zuweisen möchten, sollten Sie so vorgehen

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'})

Einzelheiten finden Sie unter: hier

Verwenden Sie die v-for-Methode in methods

<li v-for="n in even(numbers)">{{ n }}</li>

Einzelheiten finden Sie unter: hier

Komponenten, die v-for

verwenden. In benutzerdefinierten Komponenten können Sie v-for wie jedes normale Element verwenden.

<my-component v-for="item in items" :key="item.id"></my-component>

Einzelheiten finden Sie hier: hier

.onceEreignismodifikatoren (neu in 2.1.4)

<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>

.once kann auch für benutzerdefinierte Komponenten verwendet werden.

Einzelheiten finden Sie hier:

isFunktionen

Aufgrund einiger Einschränkungen einiger Dom-Elemente selbst, <ul>, <ol>, <table>, <select> Es gibt Einschränkungen hinsichtlich der Elemente, die innerhalb eines solchen Elements zulässig sind.

<div id="app">  <table>    <money></money>  </table></div>Vue.component('txt',{
   template: '<div>I like money!</div>'})new Vue({
  el:'#app'})

wird in den folgenden Dom analysiert

<div id="app">
  <div>I like money!</div>
  <table></table>
</div>

Wenn Sie es richtig analysieren möchten, müssen Sie das verwenden is Attribut .

<div id="app">
  <table>
    <tr is="money"></tr>
  </table>
</div>

Auf diese Weise wird der Dom korrekt analysiert.

<div id="app">
  <table>
     <tbody>
        <div>I like money!</div>
     </tbody>
  </table>
</div>

具体见:这里

将对象的所有属性作为 prop 进行传递

如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：

todo: {
  text: 'Learn Vue',
  isComplete: false}

然后:

<todo-item v-bind="todo"></todo-item>

将等价于：

<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"></todo-item>

具体见： 这里

非 Prop 特性的替换与合并

• class 和 style这两个特性的值都会做合并 (merge) 操作

• 其他属性(如: type) 则会进行覆盖

具体见: 这里

Props的一般绑定和动态绑定

我们常用的一般是动态绑定:

// 父组件<child :my-message="parentMsg"></child>new Vue({  data () {    return {
       parentMsg: '来自父组件的数据'
    }
  }
})// 子组件Vue.component('child', {  // 在 JavaScript 中使用 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'})

显示:

<span>来自父组件的数据</span>

一般绑定:

// 父组件<!-- 在 HTML 中使用 kebab-case --><child my-message="hello!"></child>

子组件获得的是: 字符串 'hello!'

具体见:这里

.sync 修饰符(2.3.0+新增)

之前在 2.0 版本中移除后，在 2.3.0 中又加上了，只是调用的逻辑发生了变化，变成了一种语法糖。
如下代码:

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

会被扩展为：

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

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

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

有点类似与 v-model

具体见:这里

自定义组件的 v-model(2.2.0 新增)

默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。这也是之前 v-model 默认绑定的元素 和 事件方法。

但是到 2.2.0 时候，我们可以通过 model 配置这个两个属性。

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',    event: 'change'
  },
  props: {
    checked: Boolean,    // 这样就允许拿 `value` 这个 prop 做其它事了
    value: String
  },  // ...})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码等价于：

<my-checkbox  :checked="foo"
  @change="val => { foo = val }"
  value="some value"></my-checkbox>

具体见:这里

插槽内容分发

我们不总能遇见我们的组件中包含了哪些元素，这时候我们在开发组件的时候，需要让这部分内容自定义。
假定 my-component 组件有如下模板：

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

父组件模板：

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

渲染结果：

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

当然还有 具名插槽 、作用域插槽(2.1.0 新增)、slot-scope(2.5.0新增)

具体见:这里

动态组件

通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">  <!-- 组件在 vm.currentview 变化时改变！ --></component>

注意这里的 is 与 之前说的 v-bind:is 别混淆

具体见:这里

对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：

Vue.component('terms-of-service', {
  template: '\    <div v-once>\      <h1>Terms of Service</h1>\      ...很多静态内容...\    </div>\  '})

具体见:这里

混合(mixins)的合并策略

周期钩子的合并策略

• 同名钩子函数将混合为一个数组，因此都将被调用

• 混合对象的钩子将在组件自身钩子 之前 调用

var mixin = {  created: function () {    console.log('混合对象的钩子被调用')
  }
}new Vue({
  mixins: [mixin],  created: function () {    console.log('组件钩子被调用')
  }
})// => "混合对象的钩子被调用"// => "组件钩子被调用"

methods, components 和 directives 的合并策略

• 两个对象键名冲突时，取组件对象的键值对

var mixin = {
  methods: {    foo: function () {      console.log('foo')
    },    conflicting: function () {      console.log('from mixin')
    }
  }
}var vm = new Vue({
  mixins: [mixin],
  methods: {    bar: function () {      console.log('bar')
    },    conflicting: function () {      console.log('from self')
    }
  }
})vm.foo() // => "foo"vm.bar() // => "bar"vm.conflicting() // => "from self"

Das obige ist der detaillierte Inhalt vonEinige wichtige Wissenspunkte in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!