Vue.js開發常見問題解析

此前的Vue.js系列文章：

• Vue.js經常使用開發知識簡要入門（一）

• Vue.js經常使用開發知識簡要入門（二）

• Vue.js經常使用開發知識簡要入門（三）

camelClass & kebab-case

HTML標籤中的屬性名不區分大小寫。設置prop名字爲camelClass形式的時候，須要轉換爲kebab-case形式（短橫線）在HTML中使用。

Vue.component('child', {
    //這裏能夠是camelClass形式
    props: ['myMessage'],
    template: '<span>{{ myMessage }}</span>'
});
<!-- 對應在HTML中必須是短橫線分隔 -->
<child my-message="hello"></child>

字面量語法 & 動態語法

這個問題比較繞，也算是一個筆記常犯的一個錯誤吧，使用字面量語法傳遞數值：

<!-- 傳遞了一個字符串「1」 -->
<comp some-prop="1"></comp>

由於他是一個字面prop，它的值是字符串「1」，而不是以實際的數字傳遞下去。若是想傳遞一個真實的JavaScript類型的數字，則須要使用動態語法，從而讓它的值被當作JavaScript表達式計算。

<!-- 傳遞實際的數字 -->
<comp :some-prop="1"></comp>

模板解析

Vue的模板是DOM模板，使用瀏覽器原生的解析器而不是本身實現一個。相比字符串模板，DOM模板有一些好處，可是也有問題，它必須是有效的HTML片斷。一些HTML元素對什麼元素能夠放在它裏面有限制。常見的限制有：

• a不能包行其餘的交互元素（如按鈕、連接）

• ul和ol只能直接包含li。

• select只能包含option和optgroup。

• table只能直接包含thead、tbody、ftoot、tr、caption、col、colgroup。

• tr只能直接包含th和td。

在實際應用中，這些限制會致使意外的結果。儘管再簡單的狀況下它可能能夠工做，可是咱們不能依賴自定義組件在瀏覽器驗證以前展開結果。例如<my-select><option>....</option></my-select>不是有效的模板，即便my-select組件最終展開爲<select>...</select>。

另外一個結果是，自定義標籤（包括自定義元素和特殊標籤，如<component>、<template>、<partial>）不能用在ul、select、table等對內部元素有限制的標籤內。放在這些元素內的自定義標籤將被提到元素的外面，於是渲染不正確。

自定義元素應當使用is特性，如

<table>
    <tr is="my-component"></tr>
</table>

<template>不能用在<table>內，這時應該使用<tbody>，<table>能夠有多個<tbody>。以下：

<table>
    <tbody v-for="item in items">
        <tr>Even row</tr>
        <tr>Odd row</tr>
    </tbody>
</table>

如何解決數據層級結構太深的問題

在開發業務的時候，常常會出現異步獲取數據的狀況，有時候數據層次比較深。如：

<span class="airport" v-text="ticketInfo.flight.fromSegments[ticketInfo.flight.fromSegment - 1].depAirportZh"></span>

咱們可使用vm.$set手動定義一層數據。

vm.$set("depAirportZh" ,ticketInfo.flight.fromSegments[ticketInfo.flight.fromSegments - 1] .depAirportZh)

data中沒有定義計算屬性，它是如何被使用的

以下代碼：

<div id="example">
    a = {{ a }}, b = {{ b }}
</div>

var vm = new Vue({
    el: '#example',
    data: {
        a: 1
    },
    computed: {
        b: function() {
            return this.a + 1;
        }
    }
});

對於上面計算屬性b是怎麼被使用的？實際上它並無把計算數據放到$data裏，而是經過Object.definePropert(tihs, key, def)直接定義到了實例上。

---

《Vue.js權威指南》讀書筆記

---

++++++++++本人出售本人出售《Vue.js權威指南》，二手價20元！++++++++++