vue2.x入坑總結(jié)—回顧對(duì)比angularJS/React

從感性的角度講，我是不屑于用VUE，覺(jué)得react套件用起來(lái)更順手，但是vue現(xiàn)在越來(lái)火，所以也不得入vue(雜燴湯)的坑。vue/anguarJS/React，三者對(duì)關(guān)系現(xiàn)在就是：

https://www.zhoulujun.cn/uploadfile/images/2018/0626/20180626214906428779269.jpg

自己ps了下，覺(jué)得深有道理，騷年們自己體悟，然后再問(wèn)軍哥^_^

不過(guò)回歸真題，看vue還是先了解下https://cdn.zhoulujun.cn/vue.jpg(太大，自己打開(kāi)）

vue生命周期及相關(guān)主題

組件實(shí)例周期

vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的，在生命周期的不同階段調(diào)用對(duì)應(yīng)的鉤子函數(shù)可以實(shí)現(xiàn)組件數(shù)據(jù)管理和DOM渲染兩大重要功能。學(xué)習(xí)實(shí)例的生命周期，能幫助我們理解vue實(shí)例的運(yùn)行機(jī)制，更好地利用鉤子函數(shù)完成我們的業(yè)務(wù)代碼。

create 和 mounted 相關(guān) 的函數(shù)有：

beforecreated》created》beforeMount》mounted》beforeDestroy

• beforecreated：el 和 data 并未初始化,  案例：可以在這加個(gè)loading事件 及獲取路由參數(shù)，但是this.(data｜c(diǎn)omputed｜methods）參數(shù)均為undefind（無(wú)法訪問(wèn)到 el 屬性和 data 屬性等）

• 在beforeCreate和created之間：在這個(gè)生命周期之間，進(jìn)行初始化事件，進(jìn)行數(shù)據(jù)的觀測(cè)，可以看到在created的時(shí)候數(shù)據(jù)已經(jīng)和data屬性進(jìn)行綁定（放在data中的屬性當(dāng)值發(fā)生改變的同時(shí)，視圖也會(huì)改變）
  

• created:組件實(shí)例創(chuàng)建完成,屬性已綁定,但 DOM 還未生成,$el 屬性還不存在(this.$refs.XXX===undfined)。案例：在這結(jié)束loading，還做一些初始化，如根據(jù)父組件props計(jì)算當(dāng)前組件數(shù)據(jù)

1. created和beforeMount之間：首先會(huì)判斷對(duì)象是否有el選項(xiàng)。如果有的話就繼續(xù)向下編譯，如果沒(méi)有el選項(xiàng)，則停止編譯，也就意味著停止了生命周期，直到在該vue實(shí)例上調(diào)用vm.$mount(el)。再次判斷template參數(shù)選項(xiàng)的有無(wú)（因?yàn)関ue需要通過(guò)el找到對(duì)應(yīng)的outer template）：

   （1）如果vue實(shí)例對(duì)象中有template參數(shù)選項(xiàng)，則將其作為模板編譯成render函數(shù)。

   （2）如果沒(méi)有template選項(xiàng)，則將外部HTML作為模板編譯。

   （3）可以看到template中的模板優(yōu)先級(jí)要高于outer HTML的優(yōu)先級(jí)。

   如果沒(méi)有template,則通過(guò)render傳人的createElement編譯

   綜合排名優(yōu)先級(jí)：render函數(shù)選項(xiàng) > template選項(xiàng) > outer HTML.

   這里沒(méi)有看懂，可以看一下官方文檔 獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建

• beforeMount：完成了 el 和 data 初始化 ?？樱喝绻苯邮褂脅{msg}} 在生命周期beforeMount期間，此刻的msg數(shù)據(jù)尚未編譯至{{msg}}中，用戶能看到一瞬間的{{msg}}  v-cloak

• beforeMount和mounted之間：給vue實(shí)例對(duì)象添加$el成員，并且替換掉掛在的DOM元素
  

• mounted ：完成掛載    案例： 在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情

• beforeUpdate：可以監(jiān)聽(tīng)到data的變化但是view層沒(méi)有被重新渲染，view層的數(shù)據(jù)沒(méi)有變化

• beforeUpdate和update之間：當(dāng)vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對(duì)應(yīng)組件的重新渲染（重新渲染虛擬 dom,并通過(guò) diff 算法對(duì)比 vnode 節(jié)點(diǎn)差異更新真實(shí) dom (virtual DOM re-render and patch)），先后調(diào)用beforeUpdate和updated鉤子函數(shù)（beforeUpdate：可以監(jiān)聽(tīng)到data的變化但是view層沒(méi)有被重新渲染，view層的數(shù)據(jù)沒(méi)有變化，updated： view層才被重新渲染，數(shù)據(jù)更新。此處可回顧下react對(duì)更新函數(shù)。 
  

• updated：候 view層才被重新渲染，數(shù)據(jù)更新
  

• beforeDestroy    組件銷毀之前，案例：你確認(rèn)刪除XX嗎？第二個(gè)：比如走馬燈文字，路由跳轉(zhuǎn)之后，因?yàn)榻M件已經(jīng)銷毀了，但是setInterval還沒(méi)有銷毀，還在繼續(xù)后臺(tái)調(diào)用，控制臺(tái)會(huì)不斷報(bào)錯(cuò)，如果運(yùn)算量大的話，無(wú)法及時(shí)清除，會(huì)導(dǎo)致嚴(yán)重的頁(yè)面卡頓。解決辦法：在組件生命周期beforeDestroy停止setInterval

• destroyed ：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容 。實(shí)例銷毀后雖然 dom 和屬性方法都還存在,但改變他們都將不再生效!

這這里順便回顧下react生命周期

• getDefaultProps()+getInitialState() es5≈ es6 contruct()

  函數(shù)初始化。定時(shí)init state，也可訪問(wèn)props。 這個(gè)階段，相當(dāng)于 vue的create 函數(shù)該做的事情。

• componentWillMount()

  組件初始化時(shí)只調(diào)用，以后組件更新不調(diào)用，整個(gè)生命周期只調(diào)用一次，在客戶端也在服務(wù)端，此時(shí)可以修改state。這個(gè)階段應(yīng)該相當(dāng)于 vue的 beforeMount()

• render()

  react最重要的步驟，創(chuàng)建虛擬dom，進(jìn)行diff算法，更新dom樹(shù)都在此進(jìn)行。此時(shí)就不能更改state了。 這個(gè)相當(dāng)于 vue  mounted

• componentDidMount()()

  組件渲染之后調(diào)用，只調(diào)用一次，只在客戶端。這個(gè)階段，一般的異步數(shù)據(jù)放在這個(gè)函數(shù)內(nèi)處理

• componentWillReceiveProps(nextProps)

  組件初始化時(shí)不調(diào)用，組件接受新的props時(shí)調(diào)用。

• shouldComponentUpdate(nextProps, nextState)

  react性能優(yōu)化非常重要的一環(huán)。組件接受新的state或者props時(shí)調(diào)用，我們可以設(shè)置在此對(duì)比前后兩個(gè)props和state是否相同，如果相同則返回false阻止更新，因?yàn)橄嗤膶傩誀顟B(tài)一定會(huì)生成相同的dom樹(shù)，這樣就不需要?jiǎng)?chuàng)造新的dom樹(shù)和舊的dom樹(shù)進(jìn)行diff算法對(duì)比，節(jié)省大量性能，尤其是在dom結(jié)構(gòu)復(fù)雜的時(shí)候。但是state依然會(huì)保持更新。

  這這里，是vue PK react 的重點(diǎn)。

  Vue宣稱可以更快地計(jì)算出Virtual DOM的差異，這是由于它在渲染過(guò)程中，會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹(shù)。

  而對(duì)于React而言，每當(dāng)應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會(huì)重新渲染。當(dāng)然，這可以通過(guò)shouldComponentUpdate這個(gè)生命周期方法來(lái)進(jìn)行控制，但Vue將此視為默認(rèn)的優(yōu)化。

  小結(jié)：如果你的應(yīng)用中，交互復(fù)雜，需要處理大量的UI變化，那么使用Virtual DOM是一個(gè)好主意。如果你更新元素并不頻繁，那么Virtual DOM并不一定適用，性能很可能還不如直接操控DOM。

• componentWillUpdata(nextProps, nextState)

  組件初始化時(shí)不調(diào)用，只有在組件將要更新時(shí)才調(diào)用，此時(shí)可以修改state。這個(gè)一般沒(méi)有生命卵用。可能toast一下。 大致相當(dāng)于vue的beforeUpdate

• componentDidUpdate()

  組件初始化時(shí)不調(diào)用，組件更新完成后調(diào)用，此時(shí)可以獲取dom節(jié)點(diǎn)。

• componentWillUnmount()

  組件將要卸載時(shí)調(diào)用，一些事件監(jiān)聽(tīng)和定時(shí)器需要在此時(shí)清除。相當(dāng)于vue的beforeDestroy

相比來(lái)講，覺(jué)得react的生命周期更加清爽。建議參看：重談react優(yōu)勢(shì)——react技術(shù)棧回顧

路由鉤子

路由是項(xiàng)目等重點(diǎn)，很多事情可以在路由里面處理好。路由和store等規(guī)劃項(xiàng)目基礎(chǔ)架構(gòu)核心，沒(méi)有好的規(guī)劃，工程就是一坨屎。

全局路由鉤子

作用于所有路由切換，一般在main.js里面定義

• beforeEach：一般在這個(gè)勾子的回調(diào)中，對(duì)路由進(jìn)行攔截。比如，未登錄的用戶，直接進(jìn)入了需要登錄才可見(jiàn)的頁(yè)面，那么可以用next(false)來(lái)攔截，使其跳回原頁(yè)面等，值得注意的是，如果沒(méi)有調(diào)用next方法，那么頁(yè)面將卡在那。

  next的四種用法

1. next() 跳入下一個(gè)頁(yè)面

2. next('/path') 改變路由的跳轉(zhuǎn)方向，使其跳到另一個(gè)路由

3. next(false)  返回原來(lái)的頁(yè)面

4. next((vm)=>{})  僅在beforeRouteEnter中可用，vm是組件實(shí)例。

• afterEach ：在所有路由跳轉(zhuǎn)結(jié)束的時(shí)候調(diào)用，和beforeEach是類似的，但是它沒(méi)有next方法，這里比如做修改標(biāo)簽標(biāo)題： document.title = to.meta.title等工作。

組件路由勾子

和全局勾子不同的是，它僅僅作用于某個(gè)組件，一般在.vue文件中去定義。

beforeRouteEnter

這個(gè)是一個(gè)很不同的勾子。因?yàn)閎eforeRouterEnter在組件創(chuàng)建之前調(diào)用，所以它無(wú)法直接用this來(lái)訪問(wèn)組件實(shí)例。

為了彌補(bǔ)這一點(diǎn)，vue-router開(kāi)發(fā)人員，給他的next方法加了特技，可以傳一個(gè)回調(diào)，回調(diào)的第一個(gè)參數(shù)即是組件實(shí)例。

一般我們可以利用這點(diǎn)，對(duì)實(shí)例上的數(shù)據(jù)進(jìn)行修改，調(diào)用實(shí)例上的方法。

我們可以在這個(gè)方法去請(qǐng)求數(shù)據(jù)，在數(shù)據(jù)獲取到之后，再調(diào)用next就能保證你進(jìn)頁(yè)面的時(shí)候，數(shù)據(jù)已經(jīng)獲取到了。沒(méi)錯(cuò)，這里next有阻塞的效果。你沒(méi)調(diào)用的話，就會(huì)一直卡在那

beforeRouteLeave

在離開(kāi)路由時(shí)調(diào)用?？梢杂胻his來(lái)訪問(wèn)組件實(shí)例。但是next中不能傳回調(diào)。

beforeRouteUpdate：

這個(gè)方法是vue-router2.2版本加上的。因?yàn)樵瓉?lái)的版本中，如果一個(gè)在兩個(gè)子路由之間跳轉(zhuǎn)，是不觸發(fā)beforeRouteLeave的。這會(huì)導(dǎo)致某些重置操作，沒(méi)地方觸發(fā)。在之前，我們都是用watch $route來(lái)hack的。但是通過(guò)這個(gè)勾子，我們有了更好的方式。

指令周期

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。

inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。

實(shí)際上是插入vnode的時(shí)候調(diào)用。

update：被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過(guò)比較更新前后的綁定值，可以忽略不必要的模板更新。

慎用，如果在指令里綁定事件，并且用這個(gè)周期的，記得把事件注銷

componentUpdated：被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。

unbind：只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。

一個(gè)頁(yè)面跳轉(zhuǎn)，發(fā)生的事情

1. 路由勾子 (beforeEach、beforeRouteEnter、afterEach)

2. 根組件 (beforeCreate、created、beforeMount)

3. 組件 (beforeCreate、created、beforeMount)

4. 指令 (bind、inserted)

5. 組件 mounted

6. 根組件 mounted

7. beforeRouteEnter的next的回調(diào)

8. nextTick

結(jié)論：

路由勾子執(zhí)行周期非常早，甚至在根實(shí)例的渲染之前

具體的順序 router.beforeEach > beforeRouteEnter > router.afterEach

tip:在進(jìn)行路由攔截的時(shí)候要避免使用實(shí)例內(nèi)部的方法或?qū)傩?/span>。

在開(kāi)發(fā)項(xiàng)目時(shí)候，我們腦門一拍把，具體攔截的程序，寫在了根實(shí)例的方法上了，到beforeEach去調(diào)用。結(jié)果導(dǎo)致整個(gè)攔截的周期，推遲到實(shí)例渲染的之后。

因此對(duì)于一些路由組件的beforeRouteEnter里的請(qǐng)求并無(wú)法攔截，頁(yè)面看上去好像已經(jīng)攔截下來(lái)了。

實(shí)際上請(qǐng)求依然發(fā)了出去，beforeRouteEnter內(nèi)的函數(shù)依然執(zhí)行了。

指令的綁定在組件mounted之前，組件的beforeMount之后

不得不提的, beforeRouteEnter的next勾子

beforeRouteEnter的執(zhí)行順序是如此靠前，而其中next的回調(diào)勾子的函數(shù)，執(zhí)行則非?？亢?，在mounted之后！！

我們通常是在beforeRouteEnter中加載一些首屏用數(shù)據(jù)，待數(shù)據(jù)收到后，再調(diào)用next勾子，通過(guò)回調(diào)的參數(shù)vm將數(shù)據(jù)綁定到實(shí)例上。

因此，請(qǐng)注意next的勾子是非?？亢蟮?。

nextTick：越早注冊(cè)的nextTick觸發(fā)越早

上文講了這么多的router，順勢(shì)總結(jié)下：

router-link屬性

:to ：相當(dāng)于a標(biāo)簽中的"herf"屬性，后面跟跳轉(zhuǎn)鏈接所用

replace：replace在routre-link標(biāo)簽中添加后，頁(yè)面切換時(shí)不會(huì)留下歷史記錄

tag：具有tag屬性的router-link會(huì)被渲染成相應(yīng)的標(biāo)簽

active-class：這個(gè)屬性是設(shè)置激活鏈接時(shí)class屬性，也就是當(dāng)前頁(yè)面所有與當(dāng)前地址所匹配的的鏈接都會(huì)被添加class屬性

exact：開(kāi)啟router-link的嚴(yán)格模式

用了vue-router,證明項(xiàng)目工程還是蠻大的，建議使用vuex來(lái)做全局?jǐn)?shù)據(jù)管理（可能用redux習(xí)慣了吧！）

Vuex下Store的模塊化拆

vuex的store天生自帶modules概念，同時(shí)也需要thunk中間件，action處理異步數(shù)據(jù)。下面copy一點(diǎn)我項(xiàng)目code demo：

const store = new Vuex.Store({
  modules: {
    authForm: authFormStore,
    BankAdd:BankAddFormStore
  }
});

下面是store的示范

const authFormStore = {
  state: {
    name: ""
  },
  mutations: {
    update: function (state, obj) { //我原來(lái)也是寫了N多個(gè)update函數(shù)，圖樣圖森破啊
      state[obj.name] = obj.value;
    },
  },
  action: {
    setData: function (context, obj) {
      //TODO
      Vue.http.post("api", params, {emulateJSON: true}).then(function (res) {
        // 處理業(yè)務(wù)
        // 調(diào)用上面setAgree方法更新點(diǎn)贊數(shù)
        context.commit(obj.name, obj.value);
      }, function () {
      })
    },
  },
  getters: {
    getNews(state){
      //TODO  return new value
    }
  }
}

在vue組件mapState

computed: {
  memberType: function () {
    let memberType = this.$route.params.memberType;
    this.initWeChat(window.location.href, memberType);
    return memberType;
  },
  ...mapState({
    authForm: state => state.authForm,
    epCertType: state => state.authForm.epCertType
  })
},

這里有坑：表單的v-model屬性值是Vuex的state時(shí)，如果時(shí)嚴(yán)格模式，因?yàn)橛脩糨斎霑r(shí)，v-model會(huì)試圖修改v-model的值，由于修改并非mutation執(zhí)行的,嚴(yán)格模式下會(huì)拋出錯(cuò)誤。

針對(duì)這種情況，有兩個(gè)處理方法:一個(gè)是雙向綁定的計(jì)算屬性，一個(gè)是給表單綁定value，然后偵聽(tīng)input或change事件，在事件中調(diào)用action。

computed:{
    message:{
      get(){
        return this.$store.obj.message
      },
      set(value){
        this.$store.commit('updateMessage',value)
      }
    }
}

第二種方法

computed:{
 ...mapState({
  message: state => state.obj.message
 })
},
methods:{
 updateMessage(e){
  this.$store.commit('updateMessage',e.target.value)
 }
}
mutations:{ //store mutation函數(shù)
 updateMessage(state,message){
  state.obj.message=message
 }
}

 Vue.js 最核心的功能有兩個(gè)，一是響應(yīng)式的數(shù)據(jù)綁定系統(tǒng)，二是組件系統(tǒng)

所謂雙向綁定，指的是vue實(shí)例中的data與其渲染的DOM元素的內(nèi)容保持一致，無(wú)論誰(shuí)被改變，另一方會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。這是通過(guò)設(shè)置屬性訪問(wèn)器實(shí)現(xiàn)的。

關(guān)于vue\angluar\react的數(shù)據(jù)綁定：雙向綁定和單向數(shù)據(jù)流

Vue 的依賴追蹤是【原理上不支持雙向綁定，v-model 只是通過(guò)監(jiān)聽(tīng) DOM 事件實(shí)現(xiàn)的語(yǔ)法糖】

vue的依賴追蹤是通過(guò) Object.defineProperty 把data對(duì)象的屬性全部轉(zhuǎn)為 getter/setter來(lái)實(shí)現(xiàn)的；當(dāng)改變數(shù)據(jù)的某個(gè)屬性值時(shí)，會(huì)觸發(fā)set函數(shù),獲取該屬性值的時(shí)候會(huì)觸發(fā)get函數(shù)，通過(guò)這個(gè)特性來(lái)實(shí)現(xiàn)改變數(shù)據(jù)時(shí)改變視圖；也就是說(shuō)只有當(dāng)數(shù)據(jù)改變時(shí)才會(huì)觸發(fā)視圖的改變，反過(guò)來(lái)在操作視圖時(shí)，只能通過(guò)DOM事件來(lái)改變數(shù)據(jù)，再由此來(lái)改變視圖，以此來(lái)實(shí)現(xiàn)雙向綁定

雙向綁定是在同一個(gè)組件內(nèi)，將數(shù)據(jù)和視圖綁定起來(lái)，和父子組件之間的通信并無(wú)什么關(guān)聯(lián)；

組件之間的通信采用單向數(shù)據(jù)流是為了組件間更好的解耦，在開(kāi)發(fā)中可能有多個(gè)子組件依賴于父組件的某個(gè)數(shù)據(jù)，假如子組件可以修改父組件數(shù)據(jù)的話，一個(gè)子組件變化會(huì)引發(fā)所有依賴這個(gè)數(shù)據(jù)的子組件發(fā)生變化，所以vue不推薦子組件修改父組件的數(shù)據(jù)，直接修改props會(huì)拋出警告

這里推薦閱讀《Vue.js雙向綁定的實(shí)現(xiàn)原理》

react沒(méi)有數(shù)據(jù)雙向綁定

react是單向數(shù)據(jù)流：對(duì)應(yīng)任何可變數(shù)據(jù)理應(yīng)只有一個(gè)單一“數(shù)據(jù)源”，數(shù)據(jù)源狀態(tài)提升至父組件中

react中通過(guò)將state（Model層）與View層數(shù)據(jù)進(jìn)行雙向綁定達(dá)數(shù)據(jù)的實(shí)時(shí)更新變化，具體來(lái)說(shuō)就是在View層直接寫JS代碼Model層中的數(shù)據(jù)拿過(guò)來(lái)渲染，一旦像表單操作、觸發(fā)事件、ajax請(qǐng)求等觸發(fā)數(shù)據(jù)變化，則進(jìn)行雙同步

angular也是雙向數(shù)據(jù)綁定（一次做完所有數(shù)據(jù)變更，然后整體應(yīng)用到界面上）

安利下：再談angularJS數(shù)據(jù)綁定機(jī)制及背后原理—angularJS常見(jiàn)問(wèn)題總結(jié)

三者中，我還是更推崇react＋redux模式（自上而下的數(shù)據(jù)流，業(yè)務(wù)聚焦于數(shù)據(jù)樹(shù)設(shè)計(jì)）

這里面不得不提的就是，vuejs對(duì)data中數(shù)組的原生方法進(jìn)行了封裝，所以在改變數(shù)組時(shí)能夠觸發(fā)視圖更新。這個(gè)我在寫日期控件對(duì)時(shí)候遇到很多坑,比如：

1. 通過(guò)索引直接修改數(shù)組的元素，例如vm.items[0] = {title: 'title'}

2. 無(wú)法直接修改數(shù)組的長(zhǎng)度，例如vm.items.length = 0
   

解決方案： 對(duì)于第一種vue提供了set方法vm.items.set(0,{title: ‘title’}) 或vm.$set(‘items[0]’,{title: ‘title’})。另外一個(gè)列表渲染的時(shí)候的有一個(gè)性能的小技巧： 如果數(shù)組中本身自帶一個(gè)唯一的標(biāo)識(shí) id ，那么在渲染的時(shí)候，通過(guò)trace-by給數(shù)組設(shè)定唯一的標(biāo)識(shí)，這樣vuejs在渲染過(guò)程中會(huì)盡量重復(fù)原有對(duì)象的作用域和dom元素。

關(guān)于用“箭頭函數(shù)精簡(jiǎn)你的 Vue 模塊”(建議點(diǎn)擊閱讀)，精簡(jiǎn)出來(lái)就是：

methods: {
  method(){//todo}  //不用： method:()=>{//todo}   method:function(){//todo}
}

參考文章：

Vue2.0 探索之路——生命周期和鉤子函數(shù)的一些理解

詳解vue生命周期

vue生命周期

vue生命周期探究

vue安裝，router-link的一些屬性，用法，tag active-class，to,replace,exex等等

Vuex下Store的模塊化拆分實(shí)踐

Vue.js與React的全面對(duì)比

Vue.js 2.0源碼解析之前端渲染篇

用箭頭函數(shù)精簡(jiǎn)你的 Vue 模塊 – dotdev

轉(zhuǎn)載請(qǐng)注明來(lái)源，vue2.x入坑總結(jié)-回顧對(duì)比angularJS/React - vue入坑總結(jié) - 周陸軍的個(gè)人網(wǎng)站，：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8125.html。不妥之處，望告之，謝謝！