vue編譯作用

『壹』 Vue 模板編譯 是用來代替JSP的嗎

JSP可以和Vue一起使用，但vue本身更傾向於基於node的服務端渲染SSR

『貳』 vue是什麼 vue特點 vue和其他前端框架區別

vue是什麼
Vue.js (讀音 /vju?/，類似於 view) 是一套基於javascript的用於構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
vue特點
簡潔、輕量、組件化、快速、數據驅動、模塊友好
vue和其他前端框架區別
1.與AngularJS的區別
相同點：
都支持指令：內置指令和自定義指令。
都支持過濾器：內置過濾器和自定義過濾器。
都支持雙向數據綁定。
都不支持低端瀏覽器。
不同點：
1>AngularJS的學習成本高，比如增加了Dependency Injection(依賴注入)特性，而Vue.js本身提供的API都比較簡單、直觀。
2>在性能上，AngularJS依賴對數據做臟檢查，所以Watcher越多越慢。
Vue.js使用基於依賴追蹤的觀察並且使用非同步隊列更新。所有的數據都是獨立觸發的。
對於龐大的應用來說，這個優化差異還是比較明顯的。
手機渲染速度：angular1 300ms * vue 200ms * react 100ms
2.與React的區別
相同點：
React採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯後使用。
中心思想相同：一切都是組件，組件實例之間可以嵌套。
都提供合理的鉤子函數，可以讓開發者定製化地去處理需求。
都不內置列數AJAX，Route等功能到核心包，而是以插件的方式載入。
在組件開發中都支持mixins的特性。
不同點：
React依賴Virtual DOM,而Vue.js使用的是DOM模板。React採用的Virtual DOM會對渲染出來的結果做臟檢查。
Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM。
vue的應用場景
簡單地說，就是需要對 DOM 進行很多自定義操作的項目小項目;理論上 Vue 配合類似Flux的架構也可以勝任超大規模多人協作的復雜項目。

『叄』 為什麼學習Vue框架

Vue是一個前端的框架,目前市場三大前端主流框架分別是Angular、React和Vue。Vue之所以被開發者青睞，主要是Vue乘承了Angular和React框架兩者的優勢，並且Vue的代碼簡潔、上手容易，在市場上也得到大量應用，下面我就對Vue的特性進行簡單介紹。

1、輕量級

Angular的學習成本高，使用起來比較復雜，而Vue相對簡單、直接，所以Vue使用起來更加友好。

2、數據綁定

Vue是一個MVVM框架，數據雙向綁定，當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟著同步變化，這也算是Vue的精髓之處。尤其是在進行表單處理時，Vue的雙向數據綁定非常方便。
3.指令

指令主要包括內置指令和自定義指令，以「v-」開頭，作用於HTML元素。指令提供了一些特殊的特性， 將指令綁定在元素上時，指令會給綁定的元素添加一些特殊的行為。 例如，v-bind動態綁定指令、v-if 條件渲染指令、v- for列表渲染指令等。

4、插件

用於對Vue框架功能進行擴展，通過MyPlugin.install完成插件的編寫，簡單配置後就可以全局使用。常用的擴展插件有vue-router、Vuex 等。

Vue很多特性與Angular和React有著相同的地方，但是也有著性能方面的差別。

5、Vue使用基於依賴追蹤的觀察系統並且使用非同步隊列更新，所有的數據都是獨立觸發的，提高了數據處理能力。

React和Vue的中心思想是一切都是組件，組件之間可以實現嵌套。React 採用了特殊的JSX語法，Vue中也推崇編寫以*.vue後綴命名的文件格式，對文件內容都有一些規定， 兩者需要編譯後使用。

值得一提的是，React依賴虛擬DOM，而Vue使用的是DOM模板。Vue 在模板中提供了指令、過濾器等，可以非常方便和快捷地操作DOM。推薦將Vue 使用到具有復雜交互邏輯的前端應用中，以確保用戶的體驗效果。

『肆』 Vue 面試中常問知識點整理

生命周期：Vue實例從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期，各個階段有相對應的事件鉤子。

beforeCreate（創建前），在數據觀測和初始化事件還未開始
created（創建後），完成數據觀測，屬性和方法的運算，初始化事件， $el 屬性還沒有顯示出來
beforeMount（載入前），在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data裡面的數據和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入後），在 el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用。實例已完成以下的配置：用上面編譯好的html內容替換 el 屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate（更新前），在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後），在由於數據更改導致的虛擬DOM重新渲染和打補丁之後調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在伺服器端渲染期間不被調用。
beforeDestroy（銷毀前），在實例銷毀之前調用。實例仍然完全可用。
destroyed（銷毀後），在實例銷毀之後調用。調用後，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在伺服器端渲染期間不被調用。

注意：
created 階段的ajax請求與 mounted 請求的區別：前者頁面視圖未出現，如果請求信息過多，頁面會長時間處於白屏狀態。
mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 。

初始化組件時，僅執行了 beforeCreate/Created/beforeMount/mounted 四個鉤子函數
當改變 data 中定義的變數（響應式變數）時，會執行 beforeUpdate/updated 鉤子函數
當切換組件（當前組件未緩存）時，會執行 beforeDestory/destroyed 鉤子函數
初始化和銷毀時的生命鉤子函數均只會執行一次， beforeUpdate/updated 可多次執行

僅當子組件完成掛載後，父組件才會掛載
當子組件完成掛載後，父組件會主動執行一次beforeUpdate/updated鉤子函數（僅首次）
父子組件在data變化中是分別監控的，但是在更新props中的數據是關聯的
銷毀父組件時，先將子組件銷毀後才會銷毀父組件

組件的初始化（mounted之前）分開進行，掛載是從上到下依次進行
當沒有數據關聯時，兄弟組件之間的更新和銷毀是互不關聯的

mixin中的生命周期與引入該組件的生命周期是僅僅關聯的，且mixin的生命周期優先執行

1、什麼是vue生命周期？
答： Vue 實例從創建到銷毀的過程，就是生命周期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。
2、vue生命周期的作用是什麼？
答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
3、vue生命周期總共有幾個階段？
答：它可以總共分為8個階段：創建前/後、載入前/後、更新前/後、銷毀前/銷毀後。
5、DOM 渲染在哪個周期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。

vue實現數據雙向綁定主要是：採用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個屬性的 setter，getter ，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty() 將它們轉為 getter/setter 。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定 將MVVM作為數據綁定的入口，整合 Observer ，Compile和 Watcher 三者，通過 Observer 來監聽自己的 model 的數據變化，通過 Compile 來解析編譯模板指令（vue中是用來解析 {{}}），最終利用 watcher 搭起observer和 Compile 之間的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（ input ）—>數據 model 變更雙向綁定效果。

js實現簡單的雙向綁定：

1、父組件與子組件傳值
父組件傳給子組件：子組件通過 props 方法接受數據；
子組件傳給父組件： $emit 方法傳遞參數
2、非父子組件間的數據傳遞，兄弟組件傳值 eventBus ，就是創建一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。

hash模式：在瀏覽器中符號「#」，#以及#後面的字元稱之為hash，用 window.location.hash 讀取。特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重載入頁面。
history模式：history採用HTML5的新特性；且提供了兩個新方法： pushState()， replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。

需求一：
在一個列表頁中，第一次進入的時候，請求獲取數據。
點擊某個列表項，跳到詳情頁，再從詳情頁後退回到列表頁時，不刷新。
也就是說從其他頁面進到列表頁，需要刷新獲取數據，從詳情頁返回到列表頁時不要刷新。
解決方案
在 App.vue設置：

假設列表頁為 list.vue ，詳情頁為 detail.vue ，這兩個都是子組件。
我們在 keep-alive 添加列表頁的名字，緩存列表頁。
然後在列表頁的 created 函數里添加ajax請求，這樣只有第一次進入到列表頁的時候才會請求數據，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。
這樣就可以解決問題了。

需求二：
在需求一的基礎上，再加一個要求：可以在詳情頁中刪除對應的列表項，這時返回到列表頁時需要刷新重新獲取數據。
我們可以在路由配置文件上對 detail.vue 增加一個 meta 屬性。

這個 meta 屬性，可以在詳情頁中通過 this.$route.meta.isRefresh 來讀取和設置。
設置完這個屬性，還要在 App.vue 文件里設置 watch 一下 $route 屬性。

這樣就不需要在列表頁的 created 函數里用 ajax 來請求數據了，統一放在 App.vue 里來處理。
觸發請求數據有兩個條件：
從其他頁面（除了詳情頁）進來列表時，需要請求數據。
從詳情頁返回到列表頁時，如果詳情頁 meta 屬性中的 isRefresh 為 true ，也需求重新請求數據。
當我們在詳情頁中刪除了對應的列表項時，就可以將詳情頁 meta 屬性中的 isRefresh 設為 true 。這時再返回到列表頁，頁面會重新刷新。

1、css只在當前組件起作用
答：在 style 標簽中寫入 scoped 即可 例如： <style scoped></style>
2、v-if 和 v-show 區別
答： v-if 按照條件是否渲染， v-show 是 display 的 block 或 none ；
3、 $route 和 $router 的區別
答： $route 是「路由信息對象」，包括 path，params，hash，query，fullPath，matched，name 等路由信息參數。而 $router 是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

『伍』 v-pre有什麼實際用處，一般用在哪裡

v-pre的官網解釋如下：

跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節點會加快編譯。

意思是，使用該指令的html標簽，即使寫了{{msg}}插值表達式，裡面的內容也不會被vue編譯，即頁面仍然顯示的是『{{msg}}』這個字元串，msg不會被替換成實際的值。

知道了它的作用，也就知道了用途，在你不需要vue處理其子節點內容的時候使用，也就是如果你只是想把vue代碼展示出來，而不是被vue解析的時候用。一般情況下用的比較少，其使用場景很小。

如有疑問，歡迎追問！

『陸』 vue.config.proctiontip = false什麼意思

設置 Vue.config.proctionTip = false 來關閉生產模式下給出的提示。

代碼設計的原則包括唯一確定性、標准化和通用性、可擴充性與穩定性、便於識別與記憶、力求短小與格式統一以及容易修改等。源代碼是代碼的分支，某種意義上來說，源代碼相當於代碼。

現代程序語言中，源代碼可以書籍或磁帶形式出現，但最為常用格式是文本文件，這種典型格式的目的是為了編譯出計算機程序。計算機源代碼最終目的是將人類可讀文本翻譯成為計算機可執行的二進制指令，這種過程叫編譯，它由通過編譯器完成。

(6)vue編譯作用擴展閱讀

1、計算機代碼

源代碼（也稱源程序），是指一系列人類可讀的計算機語言指令。

源代碼是相對目標代碼和可執行代碼而言的。 源代碼就是用匯編語言和高級語言寫出來的地代碼。目標代碼是指源代碼經過編譯程序產生的能被cpu直接識別二進制代碼。可執行代碼就是將目標代碼連接後形成的可執行文件，當然也是二進制的。

在現代程序語言中，源代碼可以是以書籍或者磁帶的形式出現，但最為常用的格式是文本文件，這種典型格式的目的是為了編譯出計算機程序。計算機源代碼的最終目的是將人類可讀的文本翻譯成為計算機可以執行的二進制指令，這種過程叫做編譯，通過編譯器完成。

2、作用

源代碼主要功用有如下2種作用：

生成目標代碼，即計算機可以識別的代碼。

對軟體進行說明，即對軟體的編寫進行說明。為數不少的初學者，甚至少數有經驗的程序員都忽視軟體說明的編寫，因為這部分雖然不會在生成的程序中直接顯示，也不參與編譯。但是說明對軟體的學習、分享、維護和軟體復用都有巨大的好處。

因此，書寫軟體說明在業界被認為是能創造優秀程序的良好習慣，一些公司也硬性規定必須書寫。

需要指出的是，源代碼的修改不能改變已經生成的目標代碼。如果需要目標代碼做出相應的修改，必須重新編譯。

『柒』 vue原理是什麼

原理是：vue在編譯的時候通過在DOM元素以及css樣式上加上唯一標記，實現樣式私有化，不污染全局樣式。

如：編譯為；對應的樣式。my-class編譯為。my-class[data-v-56e7f951]。

state中保存著共享數據；

修改state中的狀態只能提交mutations中的方法，且方法必須是同步的；

需要非同步方法時，寫在actions中，提交mutations，由mutations修改state狀態。

(7)vue編譯作用擴展閱讀：

vue在web開發、網站製作中的優勢

1、據綁定：vue會根據對應的元素，進行設置元素數據，通過輸入框，以及get獲取數據等多種方式進行數據的實時綁定，進行網頁及應用的數據渲染 。

2、組件式開發：通過vue的模塊封裝，它可以將一個web開發中設計的各種模塊進行拆分，變成單獨的組件，然後通過數據綁定，調用對應模版組件，同時傳入參數，即可完成對整個項目的開發。

3、簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。

『捌』 vue中，父組件可以向子組件傳遞一個組件嗎

可以的，首先，父組件傳入一個`render`函數，用於描述要動態生成的子組件。相關代碼如下：
const columns = [{
title: '操作',
key: 'operation',
render: (text, record, index) => `<s-button icon="search" @click="view(${index})"></s-button>`
}]

然後，對應的`table`組件中，對相應的`render`使用`$compile`進行渲染，並插入到相應的位置。這里需要注意的是編譯作用域，需要使用父組件來編譯，否則無法綁定父組件的事件。相關代碼如下：
if (render) {
const $td = $tr.children[j]
const value = this.dataSource[i]

const template = render(value[dataIndex], value, i)
const $cell = document.createElement('div')

$cell.innerHTML = template
this.$parent.$compile($cell)

$td.appendChild($cell)
}

『玖』 什麼是vue

Vue.js是一個構建數據驅動的 web 界面的漸進式框架，是一個JavaScript MVVM庫。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。

『拾』 vue中如何編譯代碼使相同的模塊共用一樣的數據

Vue.js很簡單。正因為如此簡單，人們常常認為其適合於小項目。雖然真正的Vue.js核心知識只是一個視圖層庫，實際上有一組工具，將使您能夠使用Vue.js構建完整的大規模SPA（單頁應用程序）。 SPA應用可以在不完全重新載入網頁，產生一個更流暢的用戶體驗到的用戶交互響應。還有好的副作用，SPA還鼓勵後端專注於展示數據端點，這使得整體架構更加分離，並且對於其他類型的客戶端可能是可重用的。 從開發人員的角度來看，SPA和傳統的後端呈現應用程序之間的主要區別是，我們必須將客戶端視為具有自己架構的應用程序。通常，我們需要處理路由，數據獲取和持久性，查看渲染和必要的構建設置，以便於模塊化代碼庫。