vue相關知識

時間  2019-12-08
標籤 vue 相關 知識 简体版
原文   原文鏈接

說下Vue數據雙向綁定的原理

原理：vue採用數據劫持結合發佈者-訂閱者模式的方法，經過Object.defineProperty()來劫持各個屬性的setter、getter屬性，若是數據變更的話，通知訂閱者，觸發更新回調函數，從新渲染視圖。javascript

說說Vuex的做用以及應用場景

頁面經過mapAction異步提交事件到action，action經過commit或者dispatch（異步）把對應的參數同步提交到mutation，mutation會修改state裏面對應的值，最後經過getter把對應的值給拋出去，在頁面的計算屬性中經過mapGetter來動態獲取state中的值。html

vuex有5種屬性： State、Getter、Mutation、Action、Modulevue

  • State是存放數據的地方，相似一個倉庫，特性就是當Mutation修改了State數據的時候，它會動態的去修改全部的調用這個變量的全部組件裏面的值（如果store中的數據發生了變化，依賴這個數據的組件也會發生更新）java

  • getter用來獲取數據，mapGetter通常在計算屬性中使用node

  • action相似於Mutation。不一樣在於react

    一、Action提交的是Mutation而不是在於直接變動狀態webpack

    二、Action能夠包含異步操做ios

Vue組件的數據通訊方式

vue組件通訊主要是指如下三類通訊：父子組件通訊、隔代組件通訊、兄弟組件通訊git

  • props/$emit 適用父子組件通訊

props向子組件傳值，$emit父組件傳值或方法web

  • ref與parent/children適用 父子組件通訊

若是在普通的元素DOM上適用，引用指向的是元素DOM，若是用在子組件上，引用指向組件實例。parent/children: 訪問父/子實例

  • EventBus（emit/on）適用於 父子、隔代、兄弟組件通訊

這種方法經過一個空的Vue實例做爲中央事件總線（事件中心），用來觸發事件和監聽事件，從而實現任何組件之間的通訊，包括父子、隔代、兄弟組件

  • attrs/listeners 適用於隔代組件

    "attrs"：包含了父級做用域不被props識別（且獲取）的特性綁定（class和style除外），當一個組件沒有聲明任何props時，這裏會包含全部父級做用域的綁定（class和style除外），而且能夠經過v-bind="attrs"傳入組件內部，一般配合inheritattrs選項一塊兒使用。 #listeners：包含父級做用域中的（不含.native修飾器的）v-on事假監聽，它能夠經過v-on="$listeners"傳入內部組件

  • provide/inject 適用於隔代組件

祖先組件經過provider來提供變量，而後在子組件中經過inject來注入變量。provide/inject Api 主要解決了跨級組件間的通訊，不過它的使用場景，主要是在子組件獲取上級組件的狀態，跨級組件間創建了一種主動提供與依賴注入的關係。

  • vuex 適用於父子組件、隔代組件、兄弟組件

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。每個 Vuex 應用的核心就是 store（倉庫）。「store」 基本上就是一個容器，它包含着你的應用中大部分的狀態 ( state )。 Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。 改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣能夠方便地跟蹤每個狀態的變化。

爲何說虛擬 dom會提升性能，解釋一下它的工做原理

  • 什麼是虛擬DOM

虛擬DOM其實就是一個javascript對象，經過這個Javascript對象來描述真是DOM

  • 爲啥真實DOM推薦操做

真實DOM操做，通常會對某塊元素進行從新渲染

  • 爲何虛擬DOM能提高性能，

採用虛擬DOM的話，當數據發生變化的時候，字須要局部刷新變化的位子就行了。

  • 虛擬DOM和真實DOM的區別

    1. 虛擬DOM不會進行重拍和重繪
    2. 虛擬DOM進行頻繁修改，而後一次性對比並求改真實DOM中須要修改的部分，最後並在真實DOM中排版與重繪，減小過多DOM節點排版和重繪。
    3. 真實DOM頻繁排版和重繪的效率至關低下
    4. 虛擬DOM有效下降大面積真實DOM節點的重繪和重排，由於最終與真實DOM比較差別，能夠只進行局部渲染

請你詳細介紹一些 package.json 裏面的配置

{
  "name": "Hello World", // 項目名稱.
  "version": "0.0.1", //項目的版本號
  "author": "張三", //項目的做者
  "description": "第一個node.js程序", //項目的描述
  "keywords": [ //關鍵字。方便使用者在 npm search中搜索。格式爲字符串。
    "node.js",
    "javascript"
  ],
  "repository": { //用於指示源代碼存放的位置
    "type": "git",
    "url": "https://path/to/url"
  },
  "license": "MIT",
  "engines": { //指明瞭該項目所須要的node.js版本
    "node": "0.10.x"
  },
  "bugs": { //可選字段，文圖追蹤系統的URL或郵箱地址；npm bugs使用
    "url": "http://path/to/bug",
    "email": "bug@example.com"
  },
  "contributors": [ //項目的其餘貢獻者
    {
      "name": "李四",
      "email": "lisi@example.com"
    }
  ],
  "scripts": { //指定了運行腳本命令的npm命令行縮寫，使用scripts字段定義腳本命令。
    "start": "node index.js"
  },
  "dependencies": { // 生產/開發環境依賴包列表
    "express": "latest",
    "mongoose": "~3.8.3",
    "handlebars-runtime": "~1.0.12",
    "express3-handlebars": "~0.5.0",
    "MD5": "~1.2.0"
  },
  "devDependencies": { //指定項目開發所須要的模塊。
    "bower": "~1.2.8",
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-clean": "~0.5.0",
    "browserify": "2.36.1",
    "grunt-browserify": "~1.3.0",
  }
}
複製代碼

爲何說Vue是一套漸進式框架

個人理解是：主張問題較少，沒有那多的硬性要求。 每一個都會有本身的一些特色，從而對使用者有必定的要求，這些要求有強有弱。

好比，angular的兩個版本都是強主張，若是你使用它，必須接受如下東西

  1. 必須使用它的模塊機制，必須使用它的依賴注入，必須使用它的特殊形式定義組件

好比react，，它也有必定程度的主張，它的主張主要是函數式編程的理念，好比說，你須要知道什麼是反作用，什麼是純函數，如何隔離反作用。它的侵入性看似沒有Angular那麼強，主要由於它是軟性侵入。

Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你能夠在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也能夠整個用它全家桶開發，當Angular用；還能夠用它的視圖，搭配你本身設計的整個下層用。你能夠在底層數據邏輯的地方用OO和設計模式的那套理念，也能夠函數式，均可以，它只是個輕量視圖而已，只作了本身該作的事，沒有作不應作的事，僅此而已。

vue-cli提供的幾種腳手架模板有哪些，區別是什麼

vue-cli提供了兩種腳手架模板，webpack和webpack-simple

  1. webpack-simple沒有vue-router的中間件，不須要路由的時候可使用
  2. webpack-simple沒有格式的檢測

計算屬性的緩存和方法調用的區別

vue官方文檔上說：咱們能夠將同一個函數定義爲方法而不是一個計算屬性，兩種方式的最終結果都是徹底相同的，不一樣的是計算屬性是基於他們的響應式依賴進行緩存的，只在相關響應式依賴發生變化時，他們纔會從新求值，這就意味着只要message尚未發生變化，屢次訪問reversedMessage計算屬性會當即返回以前的計算結果，而沒必要執行函數；

個人理解就是：當頁面從新渲染的時候（不是刷新），計算屬性不會發生變化，而是直接讀取緩存使用，適合於大量的計算和改變頻率較低的屬性。

而methods，就是當頁面從新渲染的時候，頁面元素data發生變化，頁面就會從新渲染，都是從新調用methods方法。

axios、fetch與ajax有什麼區別

  • JQuery
$.ajax({
    method: "post",
    url: url,
    data: data,
    dataType: dataType,
    success； functon () {},
    error: function() {}
})
複製代碼

優缺點：

  1. 自己針對MVC的編程，不符合如今MVVM的編程思想
  2. 基於原生的XHR的開發，XHR自己的結構不清晰，已經有了fatch的替代方案
  3. JQuery的整個項目太大，單純使用ajax須要引入整個JQuery，採起個性化打包方案不能享受CDN服務
  • axios
axios({
    method: "post",
    url: url,
    data: {
        message: '123'
    }
}).then(res => {}).catch(err => {})
複製代碼

優勢：

  1. 從瀏覽器中建立XMLHTTPRequest
  2. 支持Promise API
  3. 客戶端防止CSRF攻擊
  4. 提供了一些併發請求接口
  5. 從nodeJS建立http請求
  6. 攔截請求和響應
  7. 轉化請求和響應
  8. 取消請求
  9. 自動轉化JSON數據
  • fatch
tyu {
    let response = await fetch(url)
    let data = response.json()
    console.log(data)
} catch (e) {
    console.log('error')
}
複製代碼

fetch是ajax的替代品，使用了ES6中Promise對象，fetch是基於promise設計的，fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHTTPRequest對象

優勢：

  1. 符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象裏
  2. 符合更方便的寫法

vue中央事件總線的使用

vue中央事件總線eventBus的實質就是建立一個vue實例，經過一個空白的vue實例做爲橋樑實現vue組件的通訊，它是實現非父子組件通訊的一種解決方案。

// 使用一個vue實例，做爲事件載體，用於綁定事件和處理髮送事件，做爲調度中心
        let eventBus = new Vue()
        let one = {
            template: '<div>{{ val }} <button @click="click">click</button></div>',
            data() {
                return {
                    val: 0
                }
            },
            created() {
                // 爲one綁定事件，若是tow_click事件發生了改變，則執行改變函數
                eventBus.$on('two_click',
                    (val) => {
                    // 這個this 指的是one的vue實例
                    this.val = val
                    }
                )
            },
            methods: {
                click() {
                    // 若是one被點擊了，則發送一個one_click的事件，並傳遞一個參數
                    eventBus.$emit('one_click', 11)
                }
            }
        }
        let two = {
            template: '<div>{{val}} <button @click="click">click</button></div>',
            data() {
                return {
                    val: 0
                }
            },
            created() {
                eventBus.$on('one_click',
                 (val) => {
                    this.val = val
                })
            },
            methods: {
                click() {
                    eventBus.$emit('two_click', 22)
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                one,
                two
            }
        })
複製代碼

實現MVVM的思路分析

MVVM是Model-View-ViewModel的簡寫，即模型-視圖-視圖模型，【模型】指的是後端傳遞的數據，【視圖】指的是所看到的頁面，【視圖模型】MVVM的核心，它是連接model和view的橋樑，它有兩個方向：一是將【模型】轉化爲【視圖】，即將後端傳遞的數據轉化爲所看到的頁面，實現的方式是數據綁定，二是將【視圖】轉化爲【模型】，即將所看到的頁面轉化爲後端數據。實現的方式是DOM監聽。這兩個方向都實現咱們稱之爲數據的雙向綁定。

在MVVM的框架下的【視圖】和【模型】不能直接通訊，他們經過ViewModel來通訊，ViewModel一般要實現一個Observer觀察者，當數據發生變化，ViewModel可以監聽到數據的這種變化，而後通知到對應的視圖作自動更新，而當用戶操做視圖，ViewModel也能監聽到視圖的變化，而後通知數據作改動，這就實現了數據的雙向綁定，而且MVVM中的View和ViewModel能夠相互通訊。

說說Vue開發命令 npm run dev 輸入後的執行過程

npm run xxx是運行package.json裏面的script命令

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
複製代碼

這裏運行了build/webpack.dev.conf.js文件

webpack.dev.conf.js 經過marge引用了 webpack.base.conf.js

在webpack.base.conf.js文件中調用了main.js文件

在main.js中用到html元素#app

template指定了index.html做爲輸出文件的模板文件

vue-cli中經常使用到的加載器有哪些

  • vue-loader --- 用於加載和編譯*.vue文件
  • vue-style-loader --- 用於加載*.vue文件中的樣式
  • style-loader --- 用於將樣式直接插入到頁面的
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程