vue實(shí)例忿薇，vue根實(shí)例泽西，vue組件

實(shí)例：每個(gè) Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開始的旅敷。一個(gè) Vue 應(yīng)用由一個(gè)通過 new Vue 創(chuàng)建的根 Vue 實(shí)例癣亚，以及可選的嵌套的、可復(fù)用的組件樹組成

根實(shí)例：通過 new Vue 創(chuàng)建的實(shí)例猪钮，叫根 Vue 實(shí)例

組件：可復(fù)用的 Vue 實(shí)例品山，一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)，兩種組件的注冊(cè)類型：全局注冊(cè)和局部注冊(cè)

根實(shí)例和組件實(shí)例的區(qū)別：

vue實(shí)例會(huì)比vue組件多出el和router屬性烤低，而vue組件的data會(huì)被要求必須是函數(shù)肘交，防止出現(xiàn)同種組件多實(shí)例共享同一個(gè)data的事情

組件的注冊(cè)

1、全局注冊(cè)

//注冊(cè)
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

// 模板中使用
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

2扑馁、局部注冊(cè)
全局注冊(cè)往往是不夠理想的涯呻。比如，如果你使用一個(gè)像 webpack 這樣的構(gòu)建系統(tǒng)檐蚜，全局注冊(cè)所有的組件意味著即便你已經(jīng)不再使用一個(gè)組件了魄懂，它仍然會(huì)被包含在你最終的構(gòu)建結(jié)果中沿侈。這造成了用戶下載的 JavaScript 的無謂的增加闯第。

在這些情況下，你可以通過一個(gè)普通的 JavaScript 對(duì)象來定義組件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

3缀拭、在模塊系統(tǒng)中局部注冊(cè)

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

4咳短、基礎(chǔ)組件的自動(dòng)化全局注冊(cè)
若使用了 webpack (或在內(nèi)部使用了 webpack 的 [Vue CLI 3+])填帽，那么就可以使用 require.context 只全局注冊(cè)通用的基礎(chǔ)組件。這里有一份可以讓你在應(yīng)用入口文件 (比如 src/main.js) 中全局導(dǎo)入基礎(chǔ)組件的示例代碼咙好。記住全局注冊(cè)的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其組件目錄的相對(duì)路徑
  './components',
  // 是否查詢其子目錄
  false,
  // 匹配基礎(chǔ)組件文件名的正則表達(dá)式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 獲取組件配置
  const componentConfig = requireComponent(fileName)

  // 獲取組件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 獲取和目錄深度無關(guān)的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局注冊(cè)組件
  Vue.component(
    componentName,
    // 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的篡腌，
    // 那么就會(huì)優(yōu)先使用 `.default`，
    // 否則回退到使用模塊的根勾效。
    componentConfig.default || componentConfig
  )
})

單向數(shù)據(jù)流

所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中嘹悼，但是反過來則不行。這樣會(huì)防止從子組件意外變更父級(jí)組件的狀態(tài)层宫，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解杨伙。

額外的，每次父級(jí)組件發(fā)生變更時(shí)萌腿，子組件中所有的 prop 都將會(huì)刷新為最新的值限匣。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了毁菱，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告米死。

注意在 JavaScript 中對(duì)象和數(shù)組是通過引用傳入的，所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來說贮庞，在子組件中改變變更這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)峦筒。

for in遍歷數(shù)組，index是字符串的0,1,2窗慎，不是數(shù)字勘天，所以arr[index]取不到對(duì)應(yīng)下標(biāo)的值

  不建議用for-in循環(huán)遍歷數(shù)組還有以下幾點(diǎn)原因：

? 代碼中的index不是數(shù)字，是字符串“0”捉邢、“1”脯丝、“2”，可能無意間進(jìn)行字符串的計(jì)算“2”+1=“21”等伏伐。

? 代碼可能按照隨機(jī)順序遍歷數(shù)組元素宠进。

來自 https://www.cnblogs.com/ja-clin/p/6556793.html

vue用props定義事件和emit定義事件如何選擇

組件設(shè)計(jì)初衷就是要配合使用的，最常見的就是形成父子組件的關(guān)系：組件 A 在它的模板中使用了組件 B藐翎。它們之間必然需要相互通信：父組件可能要給子組件下發(fā)數(shù)據(jù)材蹬，子組件則可能要將它內(nèi)部發(fā)生的事情告知父組件。然而吝镣，通過一個(gè)良好定義的接口來盡可能將父子組件解耦也是很重要的堤器。這保證了每個(gè)組件的代碼可以在相對(duì)隔離的環(huán)境中書寫和理解，從而提高了其可維護(hù)性和復(fù)用性末贾。

在 Vue 中闸溃，父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發(fā)數(shù)據(jù)辉川，子組件通過事件給父組件發(fā)送消息表蝙。看看它們是怎么工作的乓旗。

--結(jié)論：事假就應(yīng)該用emit

來自 https://segmentfault.com/q/1010000013883412

混入mixins

應(yīng)用場(chǎng)景：

混入 (mixins)定義了一部分可復(fù)用的方法或者計(jì)算屬性

混入對(duì)象可以包含任意組件選項(xiàng)府蛇。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)屿愚。

注意：

1汇跨、當(dāng)組件和混入對(duì)象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞交旌献本唷１热缛欧ǎ瑪?shù)據(jù)對(duì)象在內(nèi)部會(huì)進(jìn)行淺合并 (一層屬性深度)，在和組件的數(shù)據(jù)發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先毅厚。

2塞颁、同名鉤子函數(shù)將混合為一個(gè)數(shù)組，因此都將被調(diào)用吸耿。另外祠锣，混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用。

3咽安、值為對(duì)象的選項(xiàng)伴网，例如 methods, components 和 directives，將被混合為同一個(gè)對(duì)象妆棒。兩個(gè)對(duì)象鍵名沖突時(shí)澡腾，取組件對(duì)象的鍵值對(duì)。

計(jì)算屬性的應(yīng)用場(chǎng)景

mathod需要主動(dòng)去調(diào)用

計(jì)算屬性類似于推送糕珊，源頭一變动分，計(jì)算屬性的結(jié)果就自動(dòng)變換，邏輯上不用關(guān)注數(shù)據(jù)變換红选，你一開始掉用后澜公，這種推送鏈接就建立了，始終自動(dòng)變換

計(jì)算屬性和$watch的區(qū)別

計(jì)算屬性是多個(gè)因素變化喇肋，影響一個(gè)結(jié)果變化坟乾，

$watch是一個(gè)因素變換，導(dǎo)致多個(gè)結(jié)果變換蝶防。watch不能監(jiān)聽數(shù)組和對(duì)象屬性的變化甚侣。需要用深度監(jiān)聽

watch: {

  itemArr: {

    handler (value, old) {

      console.log(value)  // 這里沒辦法使用this

    },

  deep: true

  }

}

下拉框回填時(shí)，更改默認(rèn)值不生效间学，defaultVal = ""或者defaultVal = []

解決方案：聲明defaultVal =[null], 賦值時(shí)殷费，

this.$set(this.defaultVal, 0, record.type);

表格自動(dòng)添加序號(hào)

方法一：colums中印荔，增加屬性：customRender: (text, record, index) => index + 1,

方法二：colums中，增加屬性：scopedSlots: { customRender: "index" },同時(shí)模板中增加

<template slot="index" slot-scope="text, record, index">

                <span>{{ index + 1 }}</span>

            </template>

回調(diào)傳參@click="e => {clickElement(e, records)}"

異步加載的antd Tree組件宗兼，設(shè)置了 defaultExpandAll 為true但是不起作用

如果一個(gè)表單組件沒有value prop就可以稱為非受控組件

來自 http://www.reibang.com/p/f83e961b4d73

ref

給原生htmldom綁定ref，獲取的是該dom對(duì)象

給組件綁定ref氮采，this.$refs.xxx獲取的是當(dāng)前的組件對(duì)象

在DOM更新時(shí)殷绍，比如改變v-show的值，this.refs.inputA.focus();。要使用下面的：

this.$nextTick(function() {

    this.$refs.inputA.focus();

})

樹形數(shù)據(jù)渲染&遞歸

組件調(diào)用組件本身

prop傳遞對(duì)象

（錯(cuò)誤理解）父組件傳遞的對(duì)象娶靡，只有在data中定義的對(duì)象屬性牧牢，在能傳遞到子組件