1.vue優(yōu)點抬探?
輕量級框架:只關(guān)注視圖層子巾,是一個構(gòu)建數(shù)據(jù)的視圖集合,大小只有幾十 kb 小压;
簡單易學(xué):國人開發(fā)线梗,中文文檔,不存在語言障礙 怠益,易于理解和學(xué)習(xí)仪搔;
雙向數(shù)據(jù)綁定:保留了 angular 的特點,在數(shù)據(jù)操作方面更為簡單蜻牢;
組件化:保留了 react 的優(yōu)點烤咧,實現(xiàn)了 html 的封裝和重用,在構(gòu)建單頁面應(yīng)用方面有著獨特的優(yōu)勢抢呆;
視圖煮嫌,數(shù)據(jù),結(jié)構(gòu)分離:使數(shù)據(jù)的更改更為簡單抱虐,不需要進行邏輯代碼的修改昌阿,只需要操作數(shù)據(jù)就能完成相關(guān)操作;
虛擬DOM:dom 操作是非常耗費性能的, 不再使用原生的 dom 操作節(jié)點宝泵,極大解放 dom 操作好啰,但具體操作的還是 dom 不過是換了另一種方式;
運行速度更快:相比較與 react 而言儿奶,同樣是操作虛擬 dom 框往,就性能而言, vue 存在很大的優(yōu)勢闯捎。
2.vue父組件向子組件傳遞數(shù)據(jù)椰弊?
答:通過 props
3.子組件像父組件傳遞事件?
答:$emit 方法
4.v-show 和 v-if指令的共同點和不同點瓤鼻?
共同點: 都能控制元素的顯示和隱藏秉版;
不同點:
實現(xiàn)本質(zhì)方法不同,v-show 本質(zhì)就是通過控制 css 中的 display 設(shè)置為 none 茬祷,控制隱藏清焕,只會編譯一次;v-if 是動態(tài)的向 DOM 樹內(nèi)添加或者刪除 DOM 元素祭犯,若初始值為 false 秸妥,就不會編譯了。而且 v-if 不停的銷毀和創(chuàng)建比較消耗性能沃粗≈嗑澹總結(jié):如果要頻繁切換某節(jié)點,使用 v-show (切換開銷比較小最盅,初始開銷較大)突雪。如果不需要頻繁切換某節(jié)點使用 v-if(初始渲染開銷較小,切換開銷比較大)涡贱。
5. 如何讓CSS只在當(dāng)前組件中起作用?
答:在組件中的 style 前面加上 scoped
6. <keep-alive></keep-alive> 的作用是什么?
答: keep-alive 是 Vue 內(nèi)置的一個組件咏删,可以使被包含的組件保留狀態(tài),或避免重新渲染问词。
7.如何獲取dom?
答:ref="domName" 用法:this.$refs.domName
8.說出幾種vue當(dāng)中的指令和它的用法饵婆?
答:v-model 雙向數(shù)據(jù)綁定;
v-for 循環(huán)戏售;
v-if v-show 顯示與隱藏侨核;
v-on 事件;v-once : 只綁定一次灌灾。
9. vue-loader是什么搓译?使用它的用途有哪些?
答:vue 文件的一個加載器锋喜,將 template/js/style 轉(zhuǎn)換成 js 模塊些己。
用途:js 可以寫 es6 豌鸡、 style樣式可以 scss 或 less 、 template 可以加 jade 等
10.為什么使用key?
答:需要使用 key 來給每個節(jié)點做一個唯一標識段标, Diff 算法就可以正確的識別此節(jié)點涯冠。作用主要是為了高效的更新虛擬 DOM。
11.axios及安裝?
答:請求后臺資源的模塊逼庞。npm install axios —save 裝好蛇更, js中使用 import 進來,然后 .get 或 .post 赛糟。返回在 .then 函數(shù)中如果成功派任,失敗則是在 .catch 函數(shù)中。
12.v-modal的使用
答:v-model 用于表單數(shù)據(jù)的雙向綁定璧南,其實它就是一個語法糖掌逛,這個背后就做了兩個操作:v-bind 綁定一個 value 屬性;v-on 指令給當(dāng)前元素綁定 input 事件司倚。
13.請說出vue.cli項目中src目錄每個文件夾和文件的用法豆混?
答:assets 文件夾是放靜態(tài)資源;components 是放組件动知;router 是定義路由相關(guān)的配置; app.vue 是一個應(yīng)用主組件皿伺;main.js 是入口文件。
14.分別簡述computed和watch的使用場景
答:
computed : 當(dāng)一個屬性受多個屬性影響的時候就需要用到 computed 拍柒,最典型的栗子:購物車商品結(jié)算的時候
watch : 當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時候就需要用 watch ,栗子:搜索數(shù)據(jù)
15.v-on可以監(jiān)聽多個方法嗎屈暗?
答:可以拆讯,栗子:<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。
16.$nextTick的使用
答:當(dāng)你修改了data 的值然后馬上獲取這個 dom 元素的值养叛,是不能獲取到更新后的值种呐, 你需要使用 $nextTick 這個回調(diào),讓修改后的 data 值渲染更新到 dom 元素之后在獲取弃甥,才能成功爽室。
17.vue組件中data為什么必須是一個函數(shù)?
答:因為 JavaScript 的特性所導(dǎo)致淆攻,在 component 中阔墩,data 必須以函數(shù)的形式存在,不可以是對象瓶珊。組建中的 data 寫成一個函數(shù)啸箫,數(shù)據(jù)以函數(shù)返回值的形式定義,這樣每次復(fù)用組件的時候伞芹,都會返回一份新的 data 忘苛,相當(dāng)于每個組件實例都有自己私有的數(shù)據(jù)空間蝉娜,它們只負責(zé)各自維護的數(shù)據(jù),不會造成混亂扎唾。而單純的寫成對象形式召川,就是所有的組件實例共用了一個 data ,這樣改一個全都改了胸遇。
18.漸進式框架的理解
答:主張最少荧呐;可以根據(jù)不同的需求選擇不同的層級;
19.Vue中雙向數(shù)據(jù)綁定是如何實現(xiàn)的狐榔?
答:vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實現(xiàn)的坛增, 也就是說數(shù)據(jù)和視圖同步,數(shù)據(jù)發(fā)生變化薄腻,視圖跟著變化收捣,視圖變化,數(shù)據(jù)也隨之發(fā)生改變庵楷;核心:關(guān)于VUE雙向數(shù)據(jù)綁定罢艾,其核心是 Object.defineProperty() 方法。
20.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點
答:單頁面應(yīng)用(SPA)尽纽,通俗一點說就是指只有一個主頁面的應(yīng)用咐蚯,瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內(nèi)容都包含在這個所謂的主頁面中弄贿。但在寫的時候春锋,還是會分開寫(頁面片段),然后在交互的時候由路由程序動態(tài)載入差凹,單頁面的頁面跳轉(zhuǎn)期奔,僅刷新局部資源。多應(yīng)用于pc端危尿。
多頁面(MPA)呐萌,就是指一個應(yīng)用中有多個頁面,頁面跳轉(zhuǎn)時是整頁刷新
單頁面的優(yōu)點:用戶體驗好谊娇,快肺孤,內(nèi)容的改變不需要重新加載整個頁面,基于這一點spa對服務(wù)器壓力較屑没丁赠堵;前后端分離;頁面效果會比較炫酷(比如切換頁面內(nèi)容時的專場動畫)法褥。
單頁面缺點:不利于seo顾腊;導(dǎo)航不可用,如果一定要導(dǎo)航需要自行實現(xiàn)前進挖胃、后退杂靶。(由于是單頁面不能用瀏覽器的前進后退功能梆惯,所以需要自己建立堆棧管理);初次加載時耗時多吗垮;頁面復(fù)雜度提高很多垛吗。
21.v-if和v-for的優(yōu)先級
答:當(dāng) v-if 與 v-for 一起使用時,v-for 具有比 v-if 更高的優(yōu)先級烁登,這意味著 v-if 將分別重復(fù)運行于每個 v-for 循環(huán)中怯屉。所以,不推薦 v-if 和 v-for 同時使用饵沧。如果 v-if 和 v-for 一起用的話锨络,vue中的的會自動提示 v-if 應(yīng)該放到外層去。
22.assets和static的區(qū)別
答:相同點: assets 和 static 兩個都是存放靜態(tài)資源文件狼牺。項目中所需要的資源文件圖片羡儿,字體圖標,樣式文件等都可以放在這兩個文件下是钥,這是相同點
不相同點:assets 中存放的靜態(tài)資源文件在項目打包時掠归,也就是運行 npm run build 時會將 assets 中放置的靜態(tài)資源文件進行打包上傳,所謂打包簡單點可以理解為壓縮體積悄泥,代碼格式化虏冻。而壓縮后的靜態(tài)資源文件最終也都會放置在 static 文件中跟著 index.html 一同上傳至服務(wù)器。static 中放置的靜態(tài)資源文件就不會要走打包壓縮格式化等流程弹囚,而是直接進入打包好的目錄厨相,直接上傳至服務(wù)器。因為避免了壓縮直接進行上傳鸥鹉,在打包時會提高一定的效率蛮穿,但是 static 中的資源文件由于沒有進行壓縮等操作,所以文件的體積也就相對于 assets 中打包后的文件提交較大點宋舷。在服務(wù)器中就會占據(jù)更大的空間绪撵。
建議: 將項目中 template需要的樣式文件js文件等都可以放置在 assets 中瓢姻,走打包這一流程祝蝠。減少體積。而項目中引入的第三方的資源文件如iconfoont.css 等文件可以放置在 static 中幻碱,因為這些引入的第三方文件已經(jīng)經(jīng)過處理绎狭,我們不再需要處理,直接上傳褥傍。
23.vue常用的修飾符
.stop:等同于 JavaScript 中的 event.stopPropagation() 儡嘶,防止事件冒泡;
.prevent :等同于 JavaScript 中的 event.preventDefault() 恍风,防止執(zhí)行預(yù)設(shè)的行為(如果事件可取消蹦狂,則取消該事件誓篱,而不停止事件的進一步傳播);
.capture :與事件冒泡的方向相反凯楔,事件捕獲由外到內(nèi)窜骄;
.self :只會觸發(fā)自己范圍內(nèi)的事件,不包含子元素摆屯;
.once :只會觸發(fā)一次邻遏。
24.vue的兩個核心點
數(shù)據(jù)驅(qū)動、組件系統(tǒng)
數(shù)據(jù)驅(qū)動: ViewModel虐骑,保證數(shù)據(jù)和視圖的一致性准验。
組件系統(tǒng): 應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的。
25.vue和jQuery的區(qū)別
jQuery是使用選擇器( ("lable").val(); ,它還是依賴DOM元素的值盏缤。Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了砰蠢。對數(shù)據(jù)進行操作不再需要引用相應(yīng)的DOM對象,可以說數(shù)據(jù)和View是分離的唉铜,他們通過Vue對象這個vm實現(xiàn)相互的綁定台舱。這就是傳說中的MVVM。
26. 引進組件的步驟
答: 在template中引入組件潭流;在script的第一行用import引入路徑竞惋;用component中寫上組件名稱。
27.delete和Vue.delete刪除數(shù)組的區(qū)別
答:delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變灰嫉。Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值拆宛。
28.SPA首屏加載慢如何解決
答:安裝動態(tài)懶加載所需插件;使用CDN資源讼撒。
29.Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別
答:使用 location.href= /url 來跳轉(zhuǎn)浑厚,簡單方便,但是刷新了頁面根盒;使用 history.pushState( /url ) 钳幅,無刷新頁面,靜態(tài)跳轉(zhuǎn)炎滞;引進 router 敢艰,然后使用 router.push( /url ) 來跳轉(zhuǎn),使用了 diff 算法册赛,實現(xiàn)了按需加載钠导,減少了 dom 的消耗震嫉。其實使用 router 跳轉(zhuǎn)和使用 history.pushState() 沒什么差別的,因為vue-router就是用了 history.pushState() 牡属,尤其是在history模式下责掏。
30. vue slot
答:簡單來說,假如父組件需要在子組件內(nèi)放一些DOM湃望,那么這些DOM是顯示换衬、不顯示、在哪個地方顯示证芭、如何顯示瞳浦,就是slot分發(fā)負責(zé)的活。
31.你們vue項目是打包了一個js文件废士,一個css文件叫潦,還是有多個文件?
答:根據(jù)vue-cli腳手架規(guī)范官硝,一個js文件矗蕊,一個CSS文件。
32.Vue里面router-link在電腦上有用氢架,在安卓上沒反應(yīng)怎么解決傻咖?
答:Vue路由在Android機上有問題,babel問題岖研,安裝babel polypill插件解決卿操。
33.Vue2中注冊在router-link上事件無效解決方法
答:使用 @click.native 。原因:router-link會阻止click事件孙援,.native指直接監(jiān)聽一個原生事件害淤。
34.RouterLink在IE和Firefox中不起作用(路由不跳轉(zhuǎn))的問題
答: 方法一:只用a標簽,不適用button標簽拓售;方法二:使用button標簽和Router.navigate方法
35.axios的特點有哪些
答:
從瀏覽器中創(chuàng)建XMLHttpRequests窥摄;
node.js創(chuàng)建http請求;
支持Promise API础淤;
攔截請求和響應(yīng)崭放;
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù);
取消請求值骇;
自動換成json莹菱。
axios中的發(fā)送字段的參數(shù)是data跟params兩個移国,兩者的區(qū)別在于params是跟請求地址一起發(fā)送的吱瘩,data的作為一個請求體進行發(fā)送
params一般適用于get請求,data一般適用于post put 請求迹缀。
36.請說下封裝 vue 組件的過程使碾?
答:
建立組件的模板蜜徽,先把架子搭起來,寫寫樣式票摇,考慮好組件的基本邏輯拘鞋。(os:思考1小時,碼碼10分鐘矢门,程序猿的準則盆色。)
準備好組件的數(shù)據(jù)輸入。即分析好邏輯祟剔,定好 props 里面的數(shù)據(jù)隔躲、類型。
準備好組件的數(shù)據(jù)輸出物延。即根據(jù)組件邏輯宣旱,做好要暴露出來的方法。
封裝完畢了叛薯,直接調(diào)用即可
37.params和query的區(qū)別
答:用法:query要用path來引入浑吟,params要用name來引入,接收參數(shù)都是類似的耗溜,分別是 this.route.params.name 组力。url地址顯示:query更加類似于我們ajax中g(shù)et傳參,params則類似于post抖拴,說的再簡單一點忿项,前者在瀏覽器地址欄中顯示參數(shù),后者則不顯示
注意點:query刷新不會丟失query里面的數(shù)據(jù) params刷新 會 丟失 params里面的數(shù)據(jù)城舞。
38.vue初始化頁面閃動問題
答:使用vue開發(fā)時轩触,在vue初始化之前,由于 div 是不歸 vue 管的家夺,所以我們寫的代碼在還沒有解析的情況下會容易出現(xiàn)花屏現(xiàn)象脱柱,看到類似于 {{message}} 的字樣,雖然一般情況下這個時間很短暫拉馋,但是我們還是有必要讓解決這個問題的榨为。首先:在css里加上 [v-cloak] { display: none; } 。如果沒有徹底解決問題煌茴,則在根元素加上 style="display: none;" :style="{display: block }"
39.vue更新數(shù)組時觸發(fā)視圖更新的方法
答:push()随闺;pop();shift()蔓腐;unshift()矩乐;splice();sort();reverse()
40.vue常用的UI組件庫
答:Mint UI散罕,element分歇,VUX
41.vue修改打包后靜態(tài)資源路徑的修改
答:cli2 版本:將 config/index.js 里的 assetsPublicPath 的值改為 ./ 。
build: {
// ...
assetsPublicPath: ./ ,
// ...
}
cli3版本:在根目錄下新建vue.config.js 文件欧漱,然后加上以下內(nèi)容:(如果已經(jīng)有此文件就直接修改)
module.exports = {
publicPath: , // 相對于 HTML 頁面(目錄相同)
}
生命周期函數(shù)面試題篇
42.什么是 vue 生命周期职抡?有什么作用?
答:每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如误甚,需要設(shè)置數(shù)據(jù)監(jiān)聽缚甩、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等窑邦。同時在這個過程中也會運行一些叫做 生命周期鉤子 的函數(shù)蹄胰,這給了用戶在不同階段添加自己的代碼的機會。(ps:生命周期鉤子就是生命周期函數(shù))例如奕翔,如果要通過某些插件操作DOM節(jié)點裕寨,如想在頁面渲染完后彈出廣告窗, 那我們最早可在mounted 中進行派继。
43.第一次頁面加載會觸發(fā)哪幾個鉤子宾袜?
答:beforeCreate, created驾窟, beforeMount庆猫, mounted
44.簡述每個周期具體適合哪些場景
答:
beforeCreate: 在new一個vue實例后,只有一些默認的生命周期鉤子和默認事件绅络,其他的東西都還沒創(chuàng)建月培。在beforeCreate生命周期執(zhí)行的時候,data和methods中的數(shù)據(jù)都還沒有初始化恩急。不能在這個階段使用data中的數(shù)據(jù)和methods中的方法
create: data 和 methods都已經(jīng)被初始化好了杉畜,如果要調(diào)用 methods 中的方法,或者操作 data 中的數(shù)據(jù)衷恭,最早可以在這個階段中操作
beforeMount: 執(zhí)行到這個鉤子的時候此叠,在內(nèi)存中已經(jīng)編譯好了模板了,但是還沒有掛載到頁面中随珠,此時灭袁,頁面還是舊的
mounted: 執(zhí)行到這個鉤子的時候,就表示Vue實例已經(jīng)初始化完成了窗看。此時組件脫離了創(chuàng)建階段茸歧,進入到了運行階段。如果我們想要通過插件操作頁面上的DOM節(jié)點显沈,最早可以在和這個階段中進行
beforeUpdate: 當(dāng)執(zhí)行這個鉤子時软瞎,頁面中的顯示的數(shù)據(jù)還是舊的,data中的數(shù)據(jù)是更新后的, 頁面還沒有和最新的數(shù)據(jù)保持同步
updated: 頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了铜涉,都是最新的
beforeDestory: Vue實例從運行階段進入到了銷毀階段,這個時候上所有的 data 和 methods 遂唧, 指令芙代, 過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀
destroyed: 這個時候上所有的 data 和 methods 盖彭, 指令纹烹, 過濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷毀了召边。
45.created和mounted的區(qū)別
答:created:在模板渲染成html前調(diào)用铺呵,即通常初始化某些屬性值,然后再渲染成視圖隧熙。mounted:在模板渲染成html后調(diào)用片挂,通常是初始化頁面完成后,再對html的dom節(jié)點進行一些需要的操作贞盯。
46.vue獲取數(shù)據(jù)在哪個周期函數(shù)
答:一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.
47.請詳細說下你對vue生命周期的理解音念?
答:總共分為8個階段創(chuàng)建前/后,載入前/后躏敢,更新前/后闷愤,銷毀前/后。
創(chuàng)建前/后: 在beforeCreated階段件余,vue實例的掛載元素 el 還沒有。
載入前/后: 在beforeMount階段端壳,vue實例的 $el 和data都初始化了坟漱,但還是掛載之前為虛擬的dom節(jié)點,data.message還未替換更哄。在mounted階段芋齿,vue實例掛載完成,data.message成功渲染成翩。
更新前/后: 當(dāng)data變化時觅捆,會觸發(fā)beforeUpdate和updated方法。
銷毀前/后: 在執(zhí)行destroy方法后麻敌,對data的改變不會再觸發(fā)周期函數(shù)栅炒,說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定,但是dom結(jié)構(gòu)依然存在。
vue 路由面試題篇
48.mvvm 框架是什么赢赊?
答:vue是實現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架乙漓,當(dāng)視圖改變更新模型層,當(dāng)模型層改變更新視圖層释移。在vue中叭披,使用了雙向綁定技術(shù),就是View的變化能實時讓Model發(fā)生變化玩讳,而Model的變化也能實時更新到View涩蜘。
49.vue-router 是什么?它有哪些組件
答:vue用來寫路由一個插件。router-link熏纯、router-view
50.active-class 是哪個組件的屬性叁执?
答:vue-router模塊的router-link組件誊辉。children數(shù)組來定義子路由
51.怎么定義 vue-router 的動態(tài)路由? 怎么獲取傳過來的值宇驾?
答:在router目錄下的index.js文件中涮阔,對path屬性加上/:id。使用router對象的params.id秩贰。
52.vue-router 有哪幾種導(dǎo)航鉤子?
答:三種贩猎,
第一種: 是全局導(dǎo)航鉤子:router.beforeEach(to,from,next),作用:跳轉(zhuǎn)前進行判斷攔截萍膛。
第二種: 組件內(nèi)的鉤子
第三種: 單獨路由獨享組件
53. $route
和 $router
的區(qū)別
答:router.push 方法。返回上一個歷史history用 $router.to(-1)
$route 為當(dāng)前router跳轉(zhuǎn)對象蝗罗。里面可以獲取當(dāng)前路由的name,path,query,parmas等艇棕。
54.vue-router的兩種模式
答: hash模式: 即地址欄 URL 中的 # 符號;
history模式: window.history對象打印出來可以看到里邊提供的方法和記錄長度串塑。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法沼琉。(需要特定瀏覽器支持)。
55.vue-router實現(xiàn)路由懶加載( 動態(tài)加載路由 )
答:三種方式
第一種: vue異步組件技術(shù) ==== 異步加載桩匪,vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實現(xiàn)按需加載 .但是,這種情況下一個組件生成一個js文件打瘪。
第二種: 路由懶加載(使用import)。
第三種: webpack提供的require.ensure()傻昙,vue-router配置路由闺骚,使用webpack的require.ensure技術(shù),也可以實現(xiàn)按需加載妆档。這種情況下僻爽,多個路由指定相同的chunkName,會合并打包成一個js文件贾惦。
vuex常見面試題篇
56.vuex是什么胸梆?怎么使用敦捧?哪種功能場景使用它?
答:vue框架中狀態(tài)管理碰镜。在main.js引入store兢卵,注入。
新建了一個目錄store.js绪颖,….. export 秽荤。
場景有:單頁應(yīng)用中,組件之間的狀態(tài)菠发。音樂播放王滤、登錄狀態(tài)贺嫂、加入購物車
57.vuex有哪幾種屬性滓鸠?
答:有五種,分別是 State第喳、 Getter糜俗、Mutation 、Action曲饱、 Module
state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)
getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)
mutations => 提交更改數(shù)據(jù)的方法悠抹,同步!
actions => 像一個裝飾器扩淀,包裹mutations楔敌,使之可以異步。
modules => 模塊化Vuex
58.Vue.js中ajax請求代碼應(yīng)該寫在組件的methods中還是vuex的actions中驻谆?
答:如果請求來的數(shù)據(jù)是不是要被其他組件公用卵凑,僅僅在請求的組件內(nèi)使用,就不需要放入vuex 的state里胜臊。
如果被其他地方復(fù)用勺卢,這個很大幾率上是需要的,如果需要象对,請將請求放入action里黑忱,方便復(fù)用。