本文是vue原始碼貢獻值chris fritz在公共場合的一場分享，覺得分享裡面有不少東西值得借鑑，雖然有些內容我在工作中也是這麼做的，還是把大神的ppt在這裡翻譯一下，希望給朋友帶來一些幫助。
一、善用watch的immediate屬性
這一點我在專案中也是這麼寫的。例如有請求需要再也沒初始化的時候就執行一次，然後監聽他的變化，很多人這麼寫：
created(),
watch:
}
watch:
}
一般情況下，我們元件如下寫：
import basebutton from './basebutton'
import baseicon from './baseicon'
import baseinput from './baseinput'
export default
}//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提公升思維能力
第一步，引入、
第二步註冊、
第三步才是正式的使用，
這也是最常見和通用的寫法。但是這種寫法經典歸經典，好多元件，要引入多次，註冊多次，感覺很煩。
我們可以借助一下webpack，使用 require.context() 方法來建立自己的（模組）上下文，從而實現自動動態require元件。
思路是：在src資料夾下面main.js中，借助webpack動態將需要的基礎元件統統打包進來。
**如下：
import vue from 'vue'
import upperfirst from 'lodash/upperfirst'
import camelcase from 'lodash/camelcase'
// require in a base component context
const requirecomponent = require.context(
『./components', false, /base-[\w-]+\.vue$/)
requirecomponent.keys().foreach(filename => )
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提公升思維能力
對於vuex，我們輸出store如下寫：
import auth from './modules/auth'
import posts from './modules/posts'
import comments from './modules/comments'
// ...
export default new vuex.store(
})
精簡的做法和上面類似，也是運用 require.context()讀取檔案，**如下：
import camelcase from 'lodash/camelcase'
const requiremodule = require.context('.', false, /\.js$/)
const modules = {}
requiremodule.keys().foreach(filename =>
})export default modules
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提公升思維能力
import modules from './modules'
export default new vuex.store()
這一點，關於vue的引入，我之前在 vue專案重構技術要點和總結 中也提及過，可以通過require方式或者import()方式動態載入元件。
五、router key元件重新整理
下面這個場景真的是傷透了很多程式設計師的心…先預設大家用的是vue-router來實現路由的控制。 假設我們在寫乙個部落格**，需求是從/post-haorooms/a，跳轉到/post-haorooms/b。然後我們驚人的發現，頁面跳轉後資料竟然沒更新？！原因是vue-router"智慧型地"發現這是同乙個元件，然後它就決定要復用這個元件，所以你在created函式裡寫的方法壓根就沒執行。通常的解決方案是監聽$route的變化來初始化資料，如下：
data()
}, watch:
},methods: ,
getpost(id)
}
data()
},created () ,
methods ()
}
場景如下：
(emitted value instead of an instance of error)error compiling template:
-component template should contain exactly one root element. if you are using v-if on multiple elements, use v-else-if to chain them instead.
模板中div只能有乙個，不能如上面那麼平行2個div。
例如如下**：
}
我們可以用render函式來渲染
functional: true,
render(h, )
)}//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提公升思維能力
當我們寫元件的時候，通常我們都需要從父元件傳遞一系列的props到子元件，同時父元件監聽子元件emit過來的一系列事件。舉例子：
//父元件
//子元件}
computed:
}}
$attrs包含了父作用域中不作為 prop 被識別 (且獲取) 的特性繫結 (class 和 style 除外)。當乙個元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結，並且可以通過 v-bind="$attrs" 傳入內部元件。
$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件***。它可以通過 v-on="$listeners" 傳入內部元件。
你可能不知道的東西
元素可以分為塊級元素，行內元素以及行內塊級元素。行內元素的margin或者padding只有margin left和margin right以及padding left和padding right有效果，margin top margin bottom padding top padding bot...
你可能不知道的const
眾所周知，使用 const 宣告的變數必須同時初始化為某個值。一經宣告，在其生命週期的任何時候都不能再重新賦予新值 const a syntaxerror 常量宣告時沒有初始化 const b 3 console.log b 3 b 4 typeerror 給常量賦值const 宣告只應用到頂級原語...
你可能不知道的python logging機制
先來看幾個例子,先想一下執行結果，答案稍後揭曉 例一 mylogger logging.getlogger mylogger mylogger.info mylogger info mylogger.warning mylogger warning 例二 mylogger logging.getlo...