Vue2.x踩坑與總結

時間 2019-11-05

標籤 vue2.x vue 總結简体版

原文原文鏈接

年前就打算學習並總結一下vue2.x，可是由於年前工做比較多，因此進展十分緩慢，如今終於學了一大部分，並且本身在學習開發中也踩了很多坑也總結了很多，因此將本身踩過的坑總結一下分享出來。由於在項目中使用了webpack2.x，因此對於webpack2.x也有一個踩坑總結，點擊連接。css

原文連接：http://mrzhang123.github.io/2...
項目地址：https://github.com/MrZhang123...html

vue2.x

1.獨立構建vs運行時構建

在按照vue1.0的配置配置好webpack後，會出現Failed to mount component: template or render function not defined. (found in root instance) 的錯誤，這裏涉及到vue2.0與vue1.0的第一個不一樣的地方。具體區別獨立構建 vs 運行時構建。解決方法爲在webpack配置文件中添加以下配置項：vue

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

2.掛載點的選擇

在原來的vue1.0的項目中我使用body元素做爲掛載點，可是在vue2.0中，若是使用body或者html做爲掛載點，則會報如下警告：Do not mount Vue to <html> or <body> - mount to normal elements instead.node

<font color='red'>在vue1.0中容許開發者以body或者html做爲根實體的掛載點，可是到了2.0後，只能經過獨立的節點掛載，例如：div等，不然報警告</font>webpack

3.動態組件渲染（跟1.x相似）

多個組件可使用同一個掛載點，而後動態地在它們之間切換。使用保留的 <component> 元素，動態地綁定到它的 is 特性：git

<!-- 動態組件由 vm 實例的屬性值 `componentId` 控制 -->
<component :is="componentId"></component>
<!-- 也可以渲染註冊過的組件或 prop 傳入的組件 -->
<component :is="$options.components.child"></component>

`keep-alive`

若是把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。爲此能夠添加一個 keep-alive 指令參數：github

<keep-alive>
  <component :is="currentView">
    <!-- 非活動組件將被緩存！ -->
  </component>
</keep-alive>

4.ref

有時候須要直接在父組件中訪問子組件實例，或者直接操做DOM元素，此時須要使用ref。web

ref被用來給元素或子元素註冊引用信息。引用信息會根據父組件的$refs對象進行註冊。若是在普通的DOM元素上使用，引用信息就是元素，若是用在子組件上，引用信息就是組件實例。vue-router

<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>
<!-- vm.$refs.child will be the child comp instance -->
<child-comp ref="child"></child-comp>

當 v-for 用於元素或組件的時候，引用信息將是包含DOM節點或組件實例數組。shell

關於ref註冊時間的重要說明: 由於ref自己是做爲渲染結果被建立的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，所以你不該該試圖用它在模版中作數據綁定。

5.自定義事件

在vue自定義事件使用$on與$emit，前者用於觸發監聽，後者用於觸發，監聽能夠有兩種方式

<!--使用v-on在html中監聽-->
<my-component v-on:test="callbackFun"></my-component>
<script>
  //直接用$on監聽
  vm.$on('text',function(){})
</script>

6.組件命名的約定

當註冊組件（或者 props）時，可使用 kebab-case ，camelCase ，或 TitleCase

// 在組件定義中
components: {
  // 使用 kebab-case 形式註冊
  'kebab-cased-component': { /* ... */ },
  // register using camelCase
  'camelCasedComponent': { /* ... */ },
  // register using TitleCase
  'TitleCasedComponent': { /* ... */ }
}

在 HTML 模版中，只能使用 kebab-case 形式：

<!-- 在HTML模版中始終使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<title-cased-component></title-cased-component>

當使用字符串模式時可使用 camelCase 、 TitleCase 或者 kebab-case 來引用：

<!-- 在字符串模版中能夠用任何你喜歡的方式! -->
<my-component></my-component>
<myComponent></myComponent>
<MyComponent></MyComponent>

7.子組件中使用`this`

有時候子組件簡單，能夠在父組件中直接註冊，此時在子組件內使用this就是子組件實例並非父組件，例如：

export default{
    data(){
        return{
            parentMsg:'hello!'
        }
    },
    components:{
        child:{
            props:['inputMessage'],
            template:'<span>{{inputMessage}}</span>'
        },
        'child-secound':{
            props:['inputMessage'],
            template:'<span>{{upperCase}}</span>',
            computed:{
                upperCase(){
                    return this.inputMessage.toUpperCase();
                }
            }    
        }
    }
}

8.`key`的使用

通常狀況下，vue在渲染完成後，若是數據發生變化，只會從新渲染數據，不會從新渲染整個元素，可是有時候咱們須要元素被從新渲染，此時就須要使用key關鍵字，使用v-bind綁定key關鍵字，能夠實如今數據發生變化時候從新渲染整個元素。注：同一父級元素下全部子元素若是都要在數據變化後從新渲染元素，則須要被綁定的key

9.`v-move`的使用

在使用<transition-group>時候，不只能夠定義進入離開動畫，還可使用新增的v-move特性，與過渡同樣，默認爲v-move，能夠用name進行自定義前綴，也能夠用move-class屬性手動設定。用了這個以後就能夠實現移動過程當中的動畫。

10.跳過css檢測

對於只使用js過分的元素使用v-bind:css="false"跳過vue對css的檢測。

render函數的使用

createElement接受三個參數：

{String | Object | Function}即一個HTML標籤 | 組件選項 | 一個函數，必須返回上述其中一個
{Object}一個對應HTML標籤屬性的數據對象（可選）
{String | Array}子節點（VNode）（可選）

⚠️ 關於第三個參數的說明

createElement第三個參數，若是是String，則相似於innerHTML，若是是Array，則能夠寫入一個執行函數，這個函數用於建立另外一個DOM結構（並且這裏若是想寫入一個執行函數，必須是數組！！）
每一個createElement只能建立一個元素，因此若是是建立多個元素相互嵌套，須要多個createElement函數相互嵌套，最後再render，這個跟原生js建立DOM元素相似
若是須要同時渲染多個元素，則須要在第三個參數的數組中，分別寫入須要渲染的元素，此時Vue會按照數組中順序進行渲染

完整數據對象：

{
  // 和`v-bind:class`同樣的 API
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`同樣的 API
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 組件 props
  props: {
    myProp: 'bar'
  },
  // DOM 屬性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件監聽器基於 "on"
  // 因此再也不支持如 v-on:keyup.enter 修飾器
  // 須要手動匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅對於組件，用於監聽原生事件，而不是組件使用 vm.$emit 觸發的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定義指令. 注意事項：不能對綁定的舊值設值
  // Vue 會爲您持續追踨
  directives: [
    {
      name: 'my-custom-directive',
      value: '2'
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => h('span', props.text)
  },
  // 若是子組件有定義 slot 的名稱
  slot: 'name-of-slot'
  // 其餘特殊頂層屬性
  key: 'myKey',
  ref: 'myRef'
}

vue-router2.x

1.router-view

在vue-router2中<router-view>是最頂層的出口，渲染最高級路由匹配到組件。一樣地，一個被渲染組件一樣能夠包含本身的嵌套<router-view>。

2.掛載

在router1.0中，掛載節點的方式爲router.start()而在router2.0中使用vue本身的$mount手動掛載

3.給link添加事件

在vue-router1中使用v-link寫入路由，可是在vue-router2中要使用router-link寫入路由，在瀏覽器渲染的時候會把router-link渲染成a。

有時候須要爲router-link註冊事件，對於通常的html元素，直接使用@click="eventFun"便可，可是對於router-link，像普通html元素那樣註冊事件後並無論用，須要添加.native纔會成功註冊。

事實上給組件綁定原生事件就須要.native修飾v-on，不然沒法註冊成功。

<my-component v-on:click.native="doTheThing"></my-component>

4.利用vue-router作導航

在利用vue-router作導航的時候，須要用到redirect關鍵字的重定向功能，具體寫法以下：

const router = new VueRouter({
    routes : [
        {path:'/',redirect:'/ZY'},
        {path:'/ZY',component:ZY}
    ]
});

5.路由嵌套

vue-router的路由嵌套指的是子組件會在父組件中渲染出來，必須是子組件的父組件，祖先不能夠實現，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+