Vue.js大總結

一米八三發表於2018-11-12
Vue.js

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

vue漸進式的理解

vue可以開發很多外掛，可以把很多外掛組合到一起，漸進的增加vue的功能

update beforeUpdated

在這兩個鉤子中不要修改data資料，否則會死迴圈，
因為資料修改後update會執行，執行後又會修改資料，如此便會死迴圈

data

data為什麼要是一個函式而不是一個屬性？

因為要保證每一個例項都有一個屬於自己的作用域

v-model

注意的問題

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

props驗證

1、告訴使用你元件的開發人員該傳什麼型別的引數
2、三種驗證方式

修飾符

.sync

在子元件中可修改父元件傳遞的值（雖然一般不允許）

ref 和 refs

refs相當於一個鉤子，能勾到定義了ref的元件，可以用實現父元件拿到子元件的資料並進行修改，
但一般不這麼做，因為這麼做破壞了單向資料流，
我們應該進行父子元件傳參，拿到引數後進行儲存在data中在進行修改

混入mixin

  • 儘量避免全域性混入，

開發外掛

流程及規則

1、vue.use()使用外掛

2、開發外掛
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舉例）

1、裝載服務端渲染依賴包 yarn add vue-server-renderer
2、裝載vue的包 yarn add vue
3、引入vue並例項化vue（不用掛在el，因為實在後端）
4、引入vue-server-renderer並建立例項
5、....

服務端渲染框架 （nuxt）

nuxt官方中文文件

相關文章