Vue.js大總結

最近回顧了一下Vue.js的基礎知識，把認爲重要的幾個點簡單的羅列了出來

vue漸進式的理解

vue能夠開發不少插件，能夠把不少插件組合到一塊兒，漸進的增長vue的功能

update beforeUpdated

在這兩個鉤子中不要修改data數據，不然會死循環，
由於數據修改後update會執行，執行後又會修改數據，如此便會死循環

data

data爲何要是一個函數而不是一個屬性？

由於要保證每個實例都有一個屬於本身的做用域

v-model

注意的問題

一、v-model是個語法糖（它是由v-bind和v-on結合體，原理是利用這兩個實現）
二、v-model在自定義組件上的使用（文檔）

props驗證

一、告訴使用你組件的開發人員該傳什麼類型的參數
二、三種驗證方式

修飾符

.sync

在子組件中可修改父組件傳遞的值（雖然通常不容許）

ref 和 refs

refs至關於一個鉤子，能勾到定義了ref的組件，能夠用實現父組件拿到子組件的數據並進行修改，
但通常不這麼作，由於這麼作破壞了單向數據流，
咱們應該進行父子組件傳參，拿到參數後進行保存在data中在進行修改

混入mixin

• 儘可能避免全局混入，

開發插件

流程及規則

一、vue.use()使用插件

二、開發插件
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }

  // 2. 添加全局資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 注入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 添加實例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}

生產環境的部署

先後端不分離發佈（nginx中間服務器）

TypeScript

vue 2.0寫ts很艱難，vue3.0將會改善，並直接引入類的概念

Vue Router

$route 和 $router

$route保存的路由的信息
$router上掛在是路由的方法

虛擬DOM

逐層比較要改變後的DOM
比較後在內存中更改
更改後再次逐層比較

服務端渲染 ssr框架

vue在服務器端的渲染（Node.js舉例）

一、裝載服務端渲染依賴包 yarn add vue-server-renderer
二、裝載vue的包 yarn add vue
三、引入vue並實例化vue（不用掛在el，由於實在後端）
四、引入vue-server-renderer並建立實例
五、....

服務端渲染框架 （nuxt）

nuxt官方中文文檔