vue 1.0.3 中 $set 函數是動態改變或添加一個 data 中的屬性值時 屬性 key 不可以使用純數字。
例如：
var app = new Vue({
el:"#app",
data:{
test:{
k1:'v1',
k2:'v2'
}
},
methods:{
changeTestValue:function{
// 動態改變 test 中某一屬性的值
var key = 'test.k1'; // 改變 test 屬性中的 k1 的值
this.$set(key,'changev1'); // 此處執行沒有問題
// 改變 整個 test 的值可以使用
this.$set('test',{k1:'change-demo-v1',k2:'change-demo-v2'}); // 此處執行沒有問題
// 動態給 test 增加一個屬性 k3
this.$set('test.k3','test-add-value3'); // 此處執行沒有問題
// 此處有坑 當你的 屬性為全數字的時候，則 函數無效，不報錯，但是也添加不上值。
// 例如
this.$set('test.123','test-add-123'); // 此處執行不報錯，但是也沒有效果。
// 所以在使用老版本vue的時候盡量避免 屬性 key 未純數字，或其他特殊字符。
}
}
});
除了這個坑以外還有另外一個坑，不過沒有具體試驗，
watch 監聽某一值得變化，好像有點問題， 實際結果是只要 data 中的任意一個值發生變化都會被捕捉到。
最后還是使用 vue 2.x 以上版本吧，bug 少很多。
另外 $set 函數在2.x 中使用方式有所變化。
this.$set(target,key,obj);
target 對象類型，是需要賦值或修改的對象，
key 是字符串類型， 是 target 對象的屬性
obj 可以是字符串，可以是對象類型，是 你要修改的或增加的值
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
簡單介紹
多個頁面和 servlet 組成了一個基于 Java 的 web 應用程序。JSP 使用轉發和重定向兩種方式將控制權從一個 servlet 傳遞到另一個 servlet 或者 JSP。
轉發（Forward）方法： 將請求從一個 servlet 轉發到 web 應用程序中的另一個資源，這個資源可以是一個 servlet、JSP 頁面、或者 HTML 文件。
重定向（Redirect）方法： 方法將請求重定向到另一個 web 應用程序。使用轉發（ Forward ）方法無法完成此操作。如果一個重定向命中了同一個 web 應用程序的不同資源，那么它使用的 URL 將與原始請求的 URL 不同。如果你不想響應一個請求，你可以將請求重定向到一個不同的 URL，然后瀏覽器將會將你的新請求重定向到你提供的新的 URL。這篇文章詳細解釋了兩種方式的不同之處。
什么是轉發（Forward）
在基于 web 的系統或者應用程序中，通常需要在不同的資源或 JSP 之間轉移控制權。例如：你如希望從電子商務網站下單，則需要先進行注冊，然后才可以繼續。如果你還未在他們的系統中注冊，那么購物車界面可能會將控制權轉移到負責注冊過程的 JSP 表單。轉發（ Forward ）方法即是用于此目的。它用于將請求從一個 JSP 轉發到統一上下文中的另一個資源。
什么是重定向（Redirect）
此方法也用于轉發 HTTP 請求，但與轉發（ Forward ）不同的是：它是一個兩步過程，其中重定向發生在客戶端到不同的應用程序。Redirect 方法將用戶重定向到新的 URL?？蛻舳说臑g覽器會自動對來自服務器中的重定向表頭中指定的 URL 發出新的請求。它需要與客戶機進行往返通訊，因此相對來說會比轉發（ Forward ）方法慢些。
轉發（Forward）與重定向（Redirect）區別
轉發（Forward）與重定向（Redirect）的描述
Forward() 方法用于將請求從一個 JSP 轉發到另一個 JSP，或從一個 JSP 轉發到另一個 servlet，或從一個 JSP 轉發到 web 應用程序的另一個資源?？刂剖窃谌萜鞯膬炔總鬟f的，瀏覽器/客戶機不參與此過程。Forward( )方法在 RequestDispatcher 中聲明。
Sendredirect () 方法在 HttPServletResponse 中聲明，用于將客戶端請求重定向到不同服務器或上下文中可用的不同 URL。 通過重定向，您可以將瀏覽器重定向到完全不同的應用程序。
客戶端是否參與轉發（Forward）和重定向（Redirect）
這兩種方法之間的一個關鍵區別是 web 容器在 Forward() 情況中處理了所有的內部進程，而且 URL 在客戶端的瀏覽器中不會改變，因此客戶端/瀏覽器不會參與其中，從而使它們完全不知道動作已經發生。
而在 Sendredirect () 的情況中，該方法設置適合的頭部信息和正文內容以將請求重定向到不同的 URL 中，瀏覽器付負責將新的請求發送到客戶端可見的 URL。
執行控制
當在請求時執行 Forward() 方法，當前的請求會被轉發到另一個 JSP 頁面，對當前 JSP 的處理也會被終止。請求可能會被轉發到另一個用 Java 編程語言編寫的 servlet，或者一個靜態的 HTML 頁面。
一個 SendRedirect() 請求只是簡單告知瀏覽器轉到另一個 URL，將執行控制發送到 web 應用程序之外。它使用一個兩步的過程來指示瀏覽器的 URL 發出另一個將控制轉發到另一個客戶端的請求。
速度
Forward () 在服務器內運行，執行速度比 SendRedirect () 快。
重定向必須通過瀏覽器，然后等待瀏覽器發出新的 HTTP 請求。 一個重定向使得服務器發送 HTTP 響應狀態代碼 302 和一個包含新的 URL 的位置頭到瀏覽器，并且在瀏覽器收到狀態代碼 302 之后，它對位置頭中的 URL 發出一個新的請求。 這需要與客戶機進行往返通信，這使得它比 Forward () 相對慢一些。
轉發（Forward）和重定向（Redirect）比較圖表
轉發（Forward） 重定向（Redirect）
用于將請求從一個 JSP 轉發到另一個 JSP，或從一個 JSP 轉發到另一個 servlet，或從一個 JSP 轉發到 web 應用程序的另一個資源。 用于將客戶端請求重定向到不同服務器或上下文中可用的不同 URL。
Forward( )方法在 RequestDispatcher 中聲明。 Sendredirect () 方法在 HttPServletResponse 中聲明
不涉及客戶端/瀏覽器，web 容器在內部處理該過程。 當客戶端將 URL 作為一個新的請求后，控制權將會轉移至客戶端或瀏覽器。
當一個組件執行業務邏輯并與另一個組件共享結果時，它最有效。 當客戶端應從一個頁面重定向到另一頁面時，此方法效果最佳。
它在服務器內運行，并且比重定向執行得更快。 它比轉發慢，因為它需要與客戶端進行往返通信。
使用時，原來的 URL 請求不變。 原始的 URL 請求會改變。
兩種資源都必須屬于同一上下文。 將請求重定向到不屬于當前上下文的其它 URL。
轉發（Forward）和重定向（Redirect）總結
學習轉發方法和重定向方法之間的區別是 Java 開發人員最重要的部分之一。 雖然控制器可以在處理請求結束時執行轉發（Forward）或重定向（Redirect）方法，但它們有自己的一組用途。
大多數情況下，您會使用 Forward () 方法，因為它比 SendRedirect () 稍微快一點，而后者實際上需要與客戶機進行往返通信，使其比 Forward() 更慢。 通過重定向，你可以將瀏覽器導向到另一個應用程序。 這是轉發無法做到的。
簡而言之，當一個組件必須執行業務邏輯并與另一個組件共享結果時，轉發（Forward）工作效果最好，而當客戶端應該從一個頁面重定向到另一個頁面時，重定向（Redirect）工作效果最好。
以上內容翻譯自：
Difference Between Forward and Redirect。
能力有限，還望斧正。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
vue-cli3發布自2018年8月，距離現在還不是特別久，最好搭建項目剛好用到，所以寫下這篇文章，記錄一下踩坑經歷。
vue的作者說過，vue-cli的本質是模
版的拉取，太多的配置導致了模版的難以維護，所以重構后的版本提供了插件的功能，一個插件對應一個功能，這樣避免了多個模版，也使得cli維護性得到提高，這也是本篇文章的核心介紹內容。
我對cli3的理解是，一方面擴展了cli2的核心能力 ，一方面封裝了webpack邏輯和配置。在過去要去做一個cli，通常需要閱讀cli2的代碼，cli2的核心模塊分別是 generator,prompts,template，git-repo,并用同樣的方法去做一個cli，這樣其實成本不小，cli3的插件就是提供了這樣一種能力，你用他的規則，去做一個npm包，并發到倉庫，就可以獲得這種能力。
首先，先介紹一下vue-cli3，他的發布帶了哪些新功能呢？我總結一下，大概有以下5點：
1.功能豐富。這點相信大家都很好理解，他實在太好用了，模版里包含了大多數業界比較新的功能，可以一鍵集成typescripts等類型定義工具, eslint/tslint等語法檢驗工具，風格規范，prettier，husky等格式化工具，還有postcss、pwa、vue-cli-server等等。
2.提高封裝性和擴展性。這點指的是vue-cli-server，在過去webpack的邏輯和配置在項目里獨立維護，各個項目之間就像孤島，vue-cli-server就像一個紐帶，連接起了各個項目，為項目升級webpack提供便利性，并且通過一份配置，提供個性化配置。
這里順帶扯一下vue.config.js, 這個東西就是用來個性化配置webpack的，他提供了很多的配置項，具體可以看官方文檔：
https://cli.vuejs.org/zh/config/
我們挑幾個常用的來講：
configureWebpack，這個幾乎是用的比較多的，簡單的方法，可以通過配置的方式配置，如下所示：
-
module.exports = {
-
configureWebpack: {
-
plugins: [
-
new MyAwesomeWebpackPlugin()
-
]
-
}
-
}復制代碼
這份配置，最終會被合并到原來的配置里，不會覆蓋。
復雜的方法，可以往這個字段傳一個函數，如下所示：
-
module.exports = {
-
configureWebpack: config => {
-
if (process.env.NODE_ENV === 'production') {
-
// 為生產環境修改配置...
-
} else {
-
// 為開發環境修改配置...
-
}
-
}
-
}復制代碼
這樣就可以在一個函數里做一些簡單的邏輯，config是webpack config，你可以直接修改config對象，也可以返回一個對象，這個對象最終也會被合并會webpack對象。
第三種方式，是通過webpack-chain來鏈式調用，代碼如下所示：
-
module.exports = {
-
chainWebpack: config => {
-
config.module
-
.rule('vue')
-
.use('vue-loader')
-
.loader('vue-loader')
-
.tap(options => {
-
// 修改它的選項...
-
return options
-
})
-
}
-
}復制代碼
3.提供圖形化管理界面，最所周知，gui易懂，cli，vue在降低學習門檻這方面，已經是非常好了。
通過vue ui指令，可以查看編譯各個模塊的情況，模塊依賴情況，插件的情況，非常便于管理。
4.便捷性。vue-cli-server不僅支持項目的編譯，也支持單文件的編譯，具體的方法可以看官網介紹。
5.提供了cli的核心能力，也就是問詢，模版渲染，文件生成這幾大核心功能。具體的示意圖可以看如下：
以上是cli2的核心模塊，需要引用hbs,inquirer.js,metalsmit等基本模塊，cli3的插件機制基本幫我們封裝好了，我們只需要根據插件的規范，就可以獲取這種能力。
由于有的讀者可能對cli2的流程比較陌生，所以我想簡單描述一下cli2的工作流程，如下圖所示：
首先，cli2提供init指令，執行這個指令，會去遠程拿模版文件，并拉到本地用戶目錄的.vue-template的文件夾，然后通過meta里問題，去問你，然后生成最終模版到你執行命令的目錄。
說完vue-cli2，我們來看看vue-cli3的插件是怎么樣的？
首先根據插件的位置，我們分成了cli插件，和service插件。cli的插件有完整的開發目錄，所能做的事情也比較多一點，service插件是一份js文件，導出一個函數。
cli插件的目錄如下所示：
具體的用發可以在官網了解到：
https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#cli-%E6%8F%92%E4%BB%B6
那么他們是怎么工作的呢？
cli的代碼主要在@vue/cli 下面，他的大概的流程如下圖所示：
@vue/cli/bin/vue.js:
-
program
-
.command('add <plugin> [pluginOptions]')
-
.description('install a plugin and invoke its generator in an already created project')
-
.option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
-
.allowUnknownOption()
-
.action((plugin) => {
-
require('../lib/add')(plugin, minimist(process.argv.slice(3)))
-
})
-
-
program
-
.command('invoke <plugin> [pluginOptions]')
-
.description('invoke the generator of a plugin in an already created project')
-
.option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
-
.allowUnknownOption()
-
.action((plugin) => {
-
require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))
-
})復制代碼
首先，執行vue指令，會執行@vue/cli/bin/vue.js，這里定義了vue add , vue invoke，vue build，vue serve，等指令，可以看出，add指令其實是包含invoke指令的，add指令主要是安裝一個包，并且觸發generator.js，invoke主要是觸發generator.js。
然后再來看@vue/cli/lib/add.js，
-
const packageManager = loadOptions().packageManager || (hasProjectYarn(context) ? 'yarn' : 'npm')
-
await installPackage(context, packageManager, options.registry, packageName)復制代碼
-
const generatorPath = resolveModule(`${packageName}/generator`, context)
-
if (generatorPath) {
-
invoke(pluginName, options, context)
-
} else {
-
log(`Plugin ${packageName} does not have a generator to invoke`)
-
}復制代碼
add.js主要安裝包，然后執行invoke模塊，我們再看看invoke模塊做了什么。
@vue/cli/lib/invoke.js
-
const generator = new Generator(context, {
-
pkg,
-
plugins: [plugin],
-
files: await readFiles(context),
-
completeCbs: createCompleteCbs,
-
invoking: true
-
})復制代碼
invoke里主要實例化generator類，然后把你的插件當成參數傳給類，generator類算是vue-cli的核心類了。
@vue/cli/lib/generator.js
-
plugins.forEach(({ id, apply, options }) => {
-
const api = new GeneratorAPI(id, this, options, rootOptions)
-
apply(api, options, rootOptions, invoking)
-
})復制代碼
這個類主要負責執行你的插件，然后把generatorapi作為參數傳入插件的generator.js導出的函數。
具體的vue-cli插件的開發是怎么樣的呢，我寫了一個demo，用在模擬多項目的ci模版管理，通常每個項目都有一份.gitlab-ci.yml模版，所以我們一般可以抽出一個公共的ci模版來管理，這里我用cli插件來管理，真正的項目可能不具備可行性，這里我只是用來寫一個例子。
目錄結構大概如上所示，執行vue add foo后，就會出現propmts對話框，然后選擇答案后，就會根據配置生成模版到你的根目錄下。
_gitlab-ci.yml ,根據問題選擇是否用私有npm倉庫：
-
script:
-
<%_ if (options.config === 'npm') { _%>
-
- nrm add companynpm http://xxx.y.cn:XXXXX/
-
- nrm use companynpm
-
<%_ } _%>復制代碼
prompts.js,主要一些問題的設計：
-
module.exports = [
-
{
-
name: 'config',
-
type: 'list',
-
message: `是否需要切換內部源:`,
-
choices: [
-
{
-
name: '需要',
-
value: 'npm',
-
short: ''
-
},
-
{
-
name: '不需要',
-
value: 'npm',
-
short: ''
-
}
-
]
-
}
-
]復制代碼
generator.js 這個模塊很簡單，直接渲染模版
-
module.exports = (api, options, rootOptions) => {
-
// 復制并用 ejs 渲染 `./template` 內所有的文件
-
api.render('./template')
-
}復制代碼
service插件主要放在項目本地，是一份js代碼，然后導出一個函數，通過package.json配置指向這個js文件的路徑，
service主要依賴的代碼在@vue/cli-service里，首先先執行@vue/cli-service/bin/vue-cli-service.js文件，
-
const Service = require('../lib/Service')
-
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
-
-
.....
-
-
service.run(command, args, rawArgv).catch(err => {
-
error(err)
-
process.exit(1)
-
})復制代碼
該文件實例化Service類，這個類是service插件的核心類，然后再執行run方法。
再來看看@vue/cli-service/lib/Service.js的代碼：
首先構造函數執行resolvePlugin，把官方提供的插件和項目里的插件都加載進來，
-
constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
-
this.plugins = this.resolvePlugins(plugins, useBuiltIn)
-
}復制代碼
resolvePlugin這個函數主要在這里引入本地的插件：
-
resolvePlugins (inlinePlugins, useBuiltIn) {
-
// Local plugins
-
if (this.pkg.vuePlugins && this.pkg.vuePlugins.service) {
-
const files = this.pkg.vuePlugins.service
-
if (!Array.isArray(files)) {
-
throw new Error(`Invalid type for option 'vuePlugins.service', expected 'array' but got ${typeof files}.`)
-
}
-
plugins = plugins.concat(files.map(file => ({
-
id: `local:${file}`,
-
apply: loadModule(file, this.pkgContext)
-
})))
-
}
-
-
return plugins
-
}復制代碼
run方法又會執行init方法，在該方法內部執行插件：
-
init (mode = process.env.VUE_CLI_MODE) {
-
// apply plugins.
-
this.plugins.forEach(({ id, apply }) => {
-
apply(new PluginAPI(id, this), this.projectOptions)
-
}
-
}復制代碼
那么service插件要如何來實踐，我們來看如下的例子：
首先在package.json配置一下，指向本地的插件my-service.js
-
"vuePlugins": {
-
"service": [
-
"my-service.js"
-
]
-
}復制代碼
my-service.js的代碼如下所示：
-
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-
const webpack = require('webpack');
-
-
module.exports = (api, projectOptions) => {
-
api.registerCommand(
-
'analyze',
-
{
-
description: 'start analyze server',
-
},
-
(args) => {
-
// 注冊 `vue-cli-service analyze`
-
let options = projectOptions.pluginOptions.demoOptions
-
console.log(options);
-
// resolve webpack config
-
const webpackConfig = api.resolveWebpackConfig();
-
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
-
-
-
webpack(webpackConfig,(err,stats)=>{
-
if(!err) console.log('打包成功')
-
})
-
},
-
);
-
};復制代碼
該插件主要擴展vue-cli-service的指令，加了analyze指令，這個指令主要會向webpack的配置增加一個BundleAnalyzerPlugin的插件，用來分析包的大小，當然，這里也是沒有太大的現實可行性的，vue-cli 提供了vue ui的Gui界面讓你看到打包后各個模塊的大小，或者cli的命令，vue-cli-service build --report，也能生一個報告，效果也是一樣。
至此，vue-cli和service插件的使用和實現都介紹完了，如果有哪里寫的不到位，希望各位大神能提出指正
一、生命周期鉤子的差別
vue1.0的生命周期如下：
vue2.0的生命周期如下：
用一張表格來做對比：
二、代碼片段
在vue1.0中可以在template編寫時出現：
<template>
<div>第一行</div>
<div>第二行</div>
</template>
在vue2.0中在template編寫時，必須只有一個根元素，否則會報錯。
<template>
<div id='root'>
<div>這是第一行</div>
<div>這是第二行</div>
</div>
</template>
三、for循環遍歷數組、對象時的參數順序的變更，遍歷數組之前是（index,value），現在是（value,index）；對象的之前是（key,value），現在是（value,key）.
移除了$index和$key兩個隱式聲明變量，以便在v-for中顯式聲明。
之前的track-by已經替換為key來代替
v-for的循環范圍也發生了改變，之前v-for='item in 10'，范圍為0-9，現在是：1-10。
四、Props 的參數
1、如果需要檢查 prop 的值，創建一個內部的 computed 值，而不再在 props 內部去定義coerce。
之前是：
props: {
username: {
type: String,
coerce: function (value) {
return value
.toLowerCase()
.replace(/\s+/, '-')
}
}
}
現在改成用computed來代替：
props: {
username: String,
},
computed: {
normalizedUsername: function () {
return this.username
.toLowerCase()
.replace(/\s+/, '-')
}
}
這樣有一些好處：
可以對保持原始 prop 值的操作權限。
通過給予驗證后的值一個不同的命名，強制開發者使用顯式申明。
2、twoWay參數的移除，v-bind 的 .once和.sync 修飾符 移除
Props 現在只能單向傳遞。為了對父組件產生反向影響，子組件需要顯式地傳遞一個事件而不是依賴于隱式地雙向綁定。
3、
五、計算屬性
cache: false 棄用，在 Vue 未來的大版本中，計算屬性的緩存驗證將會被移除。把不緩存的計算屬性轉換為方法可以得到和之前相同的結果。
六、Built-In 指令
v-bind 真/假值 變更；在2.0中使用 v-bind 時，只有 null, undefined，和 false 被看作是假。這意味著，0 和空字符串將被作為真值渲染。比如 v-bind:draggable="''" 將被渲染為 draggable="true"；
用 v-on 監聽原生事件 變更，現在在組件上使用 v-on 只會監聽自定義事件 (組件用 $emit 觸發的事件)。如果要監聽根元素的原生事件，可以使用 .native 修飾符；
帶有 debounce 的 v-model移除；
使用 lazy 或者 number 參數的 v-model ，替換；
使用內聯 value的v-model 移除；
v-model with v-for Iterated Primitive Values 移除；
帶有 !important 的v-bind:style 移除；
v-el 和v-ref 替換，簡單起見，v-el 和 v-ref 合并為一個 ref 屬性了，可以在組件實例中通過 $refs 來調用；
v-show后面使用v-else 移除。
七、自定義指令
自定義指令 簡化；
八、過渡
transition 參數 替換，Vue 的過渡系統有了徹底的改變，現在通過使用 <transition> 和 <transition-group> 來包裹元素實現過渡效果，而不再使用 transition 屬性；
可復用的過渡 Vue.transition 替換，在新的過渡系統中，可以通過模板復用過渡效果；
過渡的 stagger 參數 移除。
九、事件
events 選項 移除，事件處理器現在在created鉤子中被注冊；
events 選項 移除Vue.directive('on').keyCodes 替換，新的簡明配置 keyCodes 的方式是通過 Vue.config.keyCodes；
$dispatch 和 $broadcast 替換，可使用Vuex。
十、過濾器
插入文本之外的過濾器 移除；
過濾器參數符號 變更 現在過濾器參數形式可以更好地與 js 函數調用方式一致，因此不用再用空格分隔參數，現在用圓括號括起來并用逗號分隔。
內置文本過濾器 移除，替換 json 過濾器；替換 capitalize 過濾器；替換 uppercase 過濾器；替換 lowercase 過濾器；替換 pluralize 過濾器。
雙向過濾器 替換。
十一、插槽
重名的插槽 移除；
通過具名 <slot> 插入的片段不再保持 slot 的參數。請用一個包裹元素來控制樣式
十二、特殊屬性
keep-alive 屬性替換，不再是一個特殊屬性，而是一個包裹組件。
十三、計算插值
屬性內部的計算插值 移除；
HTML計算插值 移除，取代的是v-html指令；
單次綁定替換成v-once。
十四、響應
vm.$watch 換成 update生命周期鉤子；
Array.prototype.$set棄用，用Vue.set代替
Array.prototype.$remove 移除 用 Array.prototype.splice 替代；
Vue.set 和 Vue.delete 移除；
替換vm.$data 移除；
vm.$get 移除，可以直接取回響應數據。
十五、圍繞DOM的實例方法
vm.$appendTo 移除；
vm.$before 移除；
vm.$after 移除；
vm.$remove 移除。
十六、底層實例方法
vm.$eval 移除；
vm.$interpolate 移除；
vm.$log 移除
十七、實例DOM選項
replace: false 移除，現在組件總是會替換掉他們被綁定的元素。為了模仿，可以用一個將要替換元素類似的元素將根組件包裹起來。
十八、全局配置
Vue.config.debug移除，因為警告信息將默認在堆棧信息里輸出；
Vue.config.async移除，異步操作現在需要渲染性能的支持；
Vue.config.delimiters移除，可以在使用自定義分隔符時避免影響第三方模板；
Vue.config.unsafeDelimiters移除，HTML的插值替換為v-html。
十九、全局API
帶el的Vue.extend移除；
Vue.elementDirective移除；
Vue.partial移除。
談一談vue3.0和2.0的不同及其改變，還有vue3.0腳手架的搭建
步驟：
先卸載vue2.0的腳手架：npm uninstall vue-cli -g，全局卸載
安裝vue3.0的腳手架： npm install -g @vue/cli，全局安裝
入口：https://blog.csdn.net/jb_7113/article/details/89928402 基礎一
https://blog.csdn.net/jb_7113/article/details/89948215 基礎二
————————————————
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
概述
Vue 2.x 及以前的高階組件的組織形式或多或少都會面臨一些問題，特別是在需要處理重復邏輯的項目中，一旦開發者組織項目結構組織得不好，組件代碼極有可能被人詬病為“膠水代碼”。而在 Vue 2.x 及之前的版本，解決此類問題的辦法大致是下面的方案：
mixin
函數式組件
slots
筆者維護的項目也需要處理大量復用邏輯，在這之前，筆者一直嘗試使用mixin的方式來實現組件的復用。有些問題也一直會對開發者和維護者造成困惑，如一個組件同時mixin多個組件，很難分清對應的屬性或方法寫在哪個mixin里。其次，mixin的命名空間沖突也可能造成問題。難以保證不同的mixin不用到同一個屬性名。為此，官方團隊提出函數式寫法的意見征求稿，也就是RFC：Function-based component API。使用函數式的寫法，可以做到更靈活地復用組件，開發者在組織高階組件時，不必在組件組織上考慮復用，可以更好地把精力集中在功能本身的開發上。
注：本文只是筆者使用vue-function-api提前體驗 Vue Function API ，而這個 API 只是 Vue 3.0 的 RFC，而并非與最終 Vue 3.x API 一致。發布后可能有不一致的地方。
在 Vue 2.x 中使用
要想提前在Vue 2.x中體驗 Vue Function API ，需要引入vue-function-api，基本引入方式如下：
import Vue from 'vue';
import { plugin as VueFunctionApiPlugin } from 'vue-function-api';
Vue.use(VueFunctionApiPlugin);
基本組件示例
先來看一個基本的例子：
<template>
<div>
<span>count is {{ count }}</span>
<span>plusOne is {{ plusOne }}</span>
<button @click="increment">count++</button>
</div>
</template>
<script>
import Vue from 'vue';
import { value, computed, watch, onMounted } from 'vue-function-api';
export default {
setup(props, context) {
// reactive state
const count = value(0);
// computed state
const plusOne = computed(() => count.value + 1);
// method
const increment = () => {
count.value++;
};
// watch
watch(
() => count.value 2,
val => {
console.log(`count 2 is ${val});<br /> }<br /> );<br /> // lifecycle<br /> onMounted(() => {<br /> console.log(mounted);<br /> });<br /> // expose bindings on render context<br /> return {<br /> count,<br /> plusOne,<br /> increment,<br /> };<br /> },<br /> };<br /> </script><br /> 詳解<br /> setup<br /> setup函數是Vue Function API 構建的函數式寫法的主邏輯，當組件被創建時，就會被調用，函數接受兩個參數，分別是父級組件傳入的props和當前組件的上下文context?？聪旅孢@個例子，可以知道在context中可以獲取到下列屬性值<br /> <br /> const MyComponent = {<br /> props: {<br /> name: String<br /> },<br /> setup(props, context) {<br /> console.log(props.name);<br /> // context.attrs<br /> // context.slots<br /> // context.refs<br /> // context.emit<br /> // context.parent<br /> // context.root<br /> }<br /> }<br /> value & state<br /> value函數創建一個包裝對象，它包含一個響應式屬性value：<br /> <br /> <br /> <br /> 那么為何要使用value呢，因為在JavaScript中，基本類型并沒有引用，為了保證屬性是響應式的，只能借助包裝對象來實現，這樣做的好處是組件狀態會以引用的方式保存下來，從而可以被在setup中調用的不同的模塊的函數以參數的形式傳遞，既能復用邏輯，又能方便地實現響應式。<br /> <br /> 直接獲取包裝對象的值必須使用.value，但是，如果包裝對象作為另一個響應式對象的屬性，Vue內部會通過proxy來自動展開包裝對象。同時，在模板渲染的上下文中，也會被自動展開。<br /> <br /> import { state, value } from 'vue-function-api';<br /> const MyComponent = {<br /> setup() {<br /> const count = value(0);<br /> const obj = state({<br /> count,<br /> });<br /> console.log(obj.count) // 作為另一個響應式對象的屬性，會被自動展開<br /> <br /> obj.count++ // 作為另一個響應式對象的屬性，會被自動展開<br /> count.value++ // 直接獲取響應式對象，必須使用.value<br /> <br /> return {<br /> count,<br /> };<br /> },<br /> template:<button @click="count++">{{ count }}</button>,<br /> };<br /> 如果某一個狀態不需要在不同函數中被響應式修改，可以通過state創建響應式對象，這個state創建的響應式對象并不是包裝對象，不需要使用.value來取值。<br /> <br /> watch & computed<br /> watch和computed的基本概念與 Vue 2.x 的watch和computed一致，watch可以用于追蹤狀態變化來執行一些后續操作，computed用于計算屬性，用于依賴屬性發生變化進行重新計算。<br /> <br /> computed返回一個只讀的包裝對象，和普通包裝對象一樣可以被setup函數返回，這樣就可以在模板上下文中使用computed屬性?？梢越邮軆蓚€參數，第一個參數返回當前的計算屬性值，當傳遞第二個參數時，computed是可寫的。<br /> <br /> import { value, computed } from 'vue-function-api';<br /> <br /> const count = value(0);<br /> const countPlusOne = computed(() => count.value + 1);<br /> <br /> console.log(countPlusOne.value); // 1<br /> <br /> count.value++;<br /> console.log(countPlusOne.value); // 2<br /> <br /> // 可寫的計算屬性值<br /> const writableComputed = computed(<br /> // read<br /> () => count.value + 1,<br /> // write<br /> val => {<br /> count.value = val - 1;<br /> },<br /> );<br /> watch第一個參數和computed類似，返回被監聽的包裝對象屬性值，不過另外需要傳遞兩個參數：第二個參數是回調函數，當數據源發生變化時觸發回調函數，第三個參數是options。其默認行為與 Vue 2.x 有所不同：<br /> <br /> lazy：是否會在組件創建時就調用一次回調函數，與 Vue 2.x 相反，lazy默認是false，默認會在組件創建時調用一次。<br /> deep：與 Vue 2.x 的 deep 一致<br /> flush：有三個可選值，分別為 'post'（在渲染后，即nextTick后才調用回調函數），'pre'（在渲染前，即nextTick前調用回調函數），'sync'（同步觸發）。默認值為'post'。<br /> // double 是一個計算包裝對象<br /> const double = computed(() => count.value * 2);<br /> <br /> watch(double, value => {<br /> console.log('double the count is: ', value);<br /> }); // -> double the count is: 0<br /> <br /> count.value++; // -> double the count is: 2<br /> 當watch多個被包裝對象屬性時，參數均可以通過數組的方式進行傳遞，同時，與 Vue 2.x 的vm.$watch一樣，watch返回取消監聽的函數：<br /> <br /> const stop = watch(<br /> [valueA, () => valueB.value],<br /> ([a, b], [prevA, prevB]) => {<br /> console.log(a is: ${a});<br /> console.log(b is: $);<br /> }<br /> );<br /> <br /> stop();<br /> 注意：在RFC：Function-based component API初稿中，有提到effect-cleanup，是用于清理一些特殊情況的副作用的，目前已經在提案中被取消了。<br /> <br /> 生命周期<br /> 所有現有的生命周期都有對應的鉤子函數，通過onXXX的形式創建，但有一點不同的是，destoryed鉤子函數需要使用unmounted代替：<br /> <br /> import { onMounted, onUpdated, onUnmounted } from 'vue-function-api';<br /> <br /> const MyComponent = {<br /> setup() {<br /> onMounted(() => {<br /> console.log('mounted!');<br /> });<br /> onUpdated(() => {<br /> console.log('updated!');<br /> });<br /> // destroyed 調整為 unmounted<br /> onUnmounted(() => {<br /> console.log('unmounted!');<br /> });<br /> },<br /> };<br /> 一些思考<br /> 上面的詳解部分，主要抽取的是 Vue Function API 的常見部分，并非RFC：Function-based component API的全部，例如其中的依賴注入，TypeScript類型推導等優勢，在這里，由于篇幅有限，想要了解更多的朋友，可以點開RFC：Function-based component API查看。個人也在Function-based component API討論區看到了更多地一些意見：<br /> <br /> 由于底層設計，在setup取不到組件實例this的問題，這個問題在筆者嘗試體驗時也遇到了，期待正式發布的 Vue 3.x 能夠改進這個問題。<br /> <br /> 對于基本類型的值必須使用包裝對象的問題：在 RFC 討論區，為了同時保證TypeScript類型推導、復用性和保留Vue的數據監聽，包裝屬性必須使用.value來取值是討論最激烈的<br /> <br /> 關于包裝對象value和state方法命名不清晰可能導致開發者誤導等問題，已經在Amendment proposal to Function-based Component API這個提議中展開了討論：<br /> <br /> setup() {<br /> const state = reactive({<br /> count: 0,<br /> });<br /> <br /> const double = computed(() => state.count * 2);<br /> <br /> function increment() {<br /> state.count++;<br /> }<br /> <br /> return {<br /> ...toBindings(state), // retains reactivity on mutations made tostate`
double,
increment,
};
}
引入reactive API 和 binding API，其中reactive API 類似于 state API ， binding API 類似于 value API。
之前使用的方法名state在 Vue 2.x 中可能被用作組件狀態對象，導致變量命名空間的沖突問題，團隊認為將state API 更名為 reactive 更為優雅。開發者能夠寫出const state = ... ，然后通過state.xxxx這種方式來獲取組件狀態，這樣也相對而言自然一些。
value方法用于封裝基本類型時，確實會出現不夠優雅的.value的情況，開發者可能會在直接對包裝對象取值時忘記使用.value，修正方案提出的 reactive API，其含義是創建響應式對象，初始化狀態state就使用reactive創建，可保留每項屬性的getter和setter，這么做既滿足類型推導，也可以保留響應式引用，從而可在不同模塊中共享狀態值的引用。
但reactive可能導致下面的問題，需要引入binding API。 解決，如使用reactive創建的響應式對象，對其使用拓展運算符...時，則會丟失對象的getter和setter，提供toBindings方法能夠保留狀態的響應式。
當然，目前 Vue Function API 還處在討論階段，Vue 3.0 還處在開發階段，還是期待下半年 Vue 3.0 的初版問世吧，希望能給我們帶來更多的驚喜。
一.視頻學習網站
1.慕課網（我的最愛，里面有很多免費的視頻）
2.騰訊課堂
。。。
當然還有很多其他的視頻學習網站，但我覺得就這兩個就夠質夠量了。
二.前端免費模板下載
1.html5tricks
有很多有趣的小程序
2.源碼之家
各類模板灰常之多，不過也有很多廣告
3.代碼家園
整個網站看起來舒服，廣告很少
4.模板之家
廣告較多
5.魔客吧
有些要money
6.站長之家
。。。
模板網站就推薦這些吧，差不多夠用了。當然，我們下載這些模板的目的不是為了抄襲，而是為了參考學習。（手動滑稽：) ）
三.圖片圖標logo素材
1.標志在線
免費設計logo
2.阿里巴巴矢量圖標
圖標特別多，而且基本上都是免費的
3.iconmonstr
免費圖標下載
4.懶人圖庫
素材很多，不知道要不要錢
5.loading.io
看名字就知道是下什么的了吧
6.preloaders
進度條下載，有些要錢還是dollar，不過也有很多免費的
。。。
好吧，就這些。
四.其他
1.JS格式化
如果你的編輯器不支持格式化js代碼的話可以試試
2.css代碼兼容
css代碼復制上去，自動會幫你生成兼容的css代碼，是不是很厲害！不過兼容IE幾我也不太清楚，你們自己去看看吧
3.配色
這是給你網站配色的，有興趣的可以了解下
4.html、css、js壓縮，js多文件合并
es6代碼需先轉es5再壓縮，當然，也可以使用fis3構建壓縮html，css，js；fis3還可以將圖片轉成webp格式（ios有兼容問題）
5.圖片壓縮
基本上是無損壓縮，效果很不錯
6.圖片轉換
轉webp格式圖片
7.雪碧圖 （似乎訪問不了了）
選中雪碧圖中的圖片，自動生成css代碼。如：background: url('imgs/example.png') no-repeat -433px -51px;width: 33px;height: 33px;
8.html在線編輯工具
可以在線運行html代碼
9.rgb,rgba,十六進制等顏色相互轉換
10.HTML特殊字符編碼對照表
11.改圖寶
修改圖片尺寸，生成二維碼，生成印章，圖片加水印...
。。。
最后，再推薦一些比較好的書
《css世界》、《ES6標準入門》阮一峰、《JavaScript權威指南》、《JavaScript高級程序設計》（紅皮書）、《你不知道的JavaScript 上中下冊》
————————————————
<div class="table_box"> <el-button type="primary" class="submit_btn" @click="addTable">添加</el-button> <!-- 如果不想展示錯誤提示信息,可以加上show-message參數 --> <el-form :model="productRuleForm" ref="productRuleForm" :rules="productRuleForm.rules" :show-message="false"> <el-table :data="productRuleForm.tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <template slot-scope="scope"> <!-- prop的規則: 在普通的form表單中是一個對象,prop是對象的屬性. 表格是由多個對象組成的數組,在寫prop是需要根據索引給值.這里的tableData就相當于對象的屬性 !--> <!-- rules也要單獨給 --> <el-form-item :prop="'tableData.' + scope.$index + '.date'" :rules='productRuleForm.rules.date'> <el-date-picker v-model="scope.row.date" value-format="yyyy-MM-dd" placeholder="選擇日期"> </el-date-picker> </el-form-item> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules='productRuleForm.rules.name'> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="phone" label="電話"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.phone'" :rules='productRuleForm.rules.phone'> <el-input v-model="scope.row.phone"></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="address" label="地址"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.address'" :rules='productRuleForm.rules.address'> <el-input v-model="scope.row.address"></el-input> </el-form-item> </template> </el-table-column> </el-table> </el-form> <el-button type="primary" class="submit_btn" @click="submit">提交</el-button> </div>
js:
data () { return { productRuleForm: { tableData: [{ date: '', name: '', phone: '', address: '' }], rules: { date: [{ required: true, message: '請選擇日期', trigger: 'change' }], name: [{ required: true, message: '請輸入姓名', trigger: 'blur' }], phone: [{ required: true, message: '請輸入電話號碼', trigger: 'blur' }], address: [{ required: true, message: '請輸入地址', trigger: 'blur' }] } } } }, methods: { // 添加一行 addTable () { this.productRuleForm.tableData.push({ date: '', name: '', phone: '', address: '' }) }, // 提交數據 submit () { this.$refs['productRuleForm'].validate((valid) => { if (valid) { } }) }}
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
<template>
<div class="app-container" style="overflow: auto;">
<el-table
:data="list"
size="small"
element-loading-text="Loading"
border
highlight-current-row
>
<el-table-column label="會員賬號">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="login">
<el-input v-show="true" v-model="scope.row.login" placeholder="請輸入會員賬號"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="真實姓名">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="real_name">
<el-input v-show="true" v-model="scope.row.real_name" placeholder="請輸入真實姓名"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="會員昵稱">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="nickname">
<el-input v-show="true" v-model="scope.row.nickname" placeholder="請輸入會員昵稱"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="會員手機">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="mobile">
<el-input v-show="true" v-model="scope.row.mobile" placeholder="請輸入手機號碼"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-form ref="scope.row" :model="scope.row">
<el-form-item>
<el-button @click="handleSubmit(scope.$index,scope.row)">重試</el-button>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { retry } from '@/api/table'
import { validateName } from '@/utils/validate'
import { validateMobile } from '@/utils/validate'
export default {
data() {
// validator
const validateNameInput = (rule, value, callback) => {
if (!value) {
return callback(new Error('此項必填！'))
} else {
callback()
}
}
const validateMobileInput = (rule, value, callback) => {
if (!value) {
return callback(new Error('手機號碼必填！'))
} else if (!validateMobile(value)) {
return callback(new Error('請填寫正確的手機號碼格式！'))
} else {
callback()
}
}
return {
list: [],
// input框失焦校驗
rules: {
nickname: [{ validator: validateNameInput, trigger: 'blur' }],
real_name: [{ validator: validateNameInput, trigger: 'blur' }],
mobile: [{ validator: validateMobileInput, trigger: 'blur' }],
login: [{ validator: validateNameInput, trigger: 'blur' }]
}
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
const errorData = JSON.parse(this.$route.query.errorData)
this.list = JSON.parse(errorData)
},
handleSubmit(index, row) {
// 提交校驗
if (validateName(row.login) && validateName(row.real_name) && validateName(row.nickname) && validateMobile(row.mobile)) {
//數據提交和錯誤catch
}
}
}
</script>
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
1.Method與計算屬性computed的區別
區別在于method每次都執行函數，而computed基于依賴緩存，只要相關值不變，那么就不必再執行函數。
下面，注意Date不是響應式依賴：
computed: {
now: function () {
return Date.now()
}
}
所以使用計算屬性
2.v-if與v-show
v-if 是真實的條件渲染，因為它會確保條件塊在切換當中適當地銷毀與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。
相比之下， v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。
一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。
令，v-show不支持template語法。
3.v-for
可以v-for="item in items"也可以of
還有可選第二參數作為前項的索引：
<li v-for="(item, index) in items">
也可以用模板渲染父節點或模板，來渲染多個子塊。
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: [
{FirstName: 'John'},
{LastName: 'Doe'},
{Age: 30}
]
}
})
寫成這樣，輸出：
{ "FirstName": "John" }
{ "LastName": "Doe" }
{ "Age": 30 }
將object從數組變為如下：
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
那么輸出：
John
Doe
30
此時直接指向的是值了。
還有三參數：v-for="(value, key, index) in object"
還可以用整數，輸出10個數字：
<div id="haha">
<span v-for="n in 10">{{ n }}</span>
</div>
var t=1,n=0;
new Vue({
el: '#haha',
data: {
object: {
n:n+t
}
}
})
很好的例子
4.一些數組方法
push()：在末尾添加一個或多個元素，并返回新長度
pop()：刪除并返回最后一個元素
shift()：刪除并返回第一個元素
unshift()：數組開頭添加一個或多個元素，并返回新長度
splice()：刪除或替換元素，返回被刪除元素。splice（index，number，new ele），用new ele 替換index開始的number個元素
sort()
reverse()
5.類似v-on:click(含參)的注意點
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
methods: {
warn: function (message, event) {
// 現在我們可以訪問原生事件對象
if (event) event.preventDefault()
alert(message)
}
}
如上，可以傳入原生DOM對象。
阻止冒泡還有其他方法，即在v-on上使用事件修飾符。常見事件修飾符有：
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- 只會觸發一次點擊 -->
<a v-on:click.once="doThis"></a>
有事件修飾符，還有鍵盤修飾符。
<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
又新增了按鍵修飾符，和組合鍵修飾：
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
6.神奇的v-model
神奇之處在于會根據控件形式自動選取方法更新元素。
例子
<div id="che">
<select v-model="sele" multiple>
<option v-for="op in ops" v-bind:value="op.index">{{op.va}}</option>
</select>
<span>{{sele}}</span>
</div>
new Vue({
el: '#che',
data: {
sele: [],
ops:[
{index:1,va:"s"},
{index:2,va:"ss"},
{index:3,va:"ssr"}
]
}
})
若option里綁定value，則會將value值按所選中的放在數組sele開頭。
若沒有綁定value，會將{{op.va}}當做value。若寫為{{op.index}}則將index當做value。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn