摘要：記錄一些小技巧和踩過(guò)的坑由于本篇文章內(nèi)容太多，導(dǎo)致編輯器有點(diǎn)卡，所以新開(kāi)辟了一篇實(shí)踐二，后續(xù)再這里更新。組件的生命周期函數(shù)是在標(biāo)簽里的數(shù)據(jù)發(fā)生變化時(shí)候觸發(fā)數(shù)據(jù)可能更新了，但是沒(méi)有綁定到上面的話，不會(huì)調(diào)用鉤子函數(shù)。

記錄一些小技巧和踩過(guò)的坑

由于本篇文章內(nèi)容太多，導(dǎo)致SF編輯器有點(diǎn)卡，所以新開(kāi)辟了一篇 vue2實(shí)踐（二），后續(xù)再這里更新。

首先冒號(hào)是v-bind的縮寫(xiě)，不帶冒號(hào)后面是字符串，帶了冒號(hào)就是數(shù)據(jù)綁定，引號(hào)里面的內(nèi)容是變量或者表達(dá)式,
組件內(nèi)不能修改props的值，同時(shí)修改的值也不會(huì)同步到組件外層，即調(diào)用組件方不知道組件內(nèi)部當(dāng)前的狀態(tài)是什么

vue 組件props傳遞時(shí)，為什么有時(shí)候需要加冒號(hào)，有時(shí)候不需要？
如何在Vue2中實(shí)現(xiàn)組件props雙向綁定

如果計(jì)算屬性是對(duì)象的話，可以設(shè)置他的屬性。

數(shù)據(jù)可能更新了，但是沒(méi)有綁定到dom上面的話，不會(huì)調(diào)用update鉤子函數(shù)。

所以在這個(gè)時(shí)候應(yīng)該用Object.assign()重新生成新的對(duì)象。第一級(jí)屬性值更新的話，data是更新的！

  style = {
              color: "rgb(66, 180, 232)"
       };
  //下面渲染不出來(lái)
    style = {
              color: "rgb(66, 180, 232)";
       };

vue2.0 的時(shí)候把過(guò)濾器移除了，現(xiàn)在2.10又加了上去，

定義filter過(guò)濾器：
寫(xiě)在實(shí)例Vue內(nèi)部的是局部過(guò)濾器，

new Vue({
  filters:{
  formatMoney: function (value){
      return "$"+value.toFixed(2);
   }
 }
})

寫(xiě)在外部的是全局過(guò)濾器

Vue.filter("money", function (vaule, type) {
    return "￥" + vaule.toFixed(2) + type;
})

組件內(nèi)調(diào)用：

//1.x的寫(xiě)法，2直接wrap("before","after")調(diào)用
Vue.filter("wrap", function (value, begin, end) {
  return begin + value + end
})

補(bǔ)充下：一個(gè)豎線 | 在js中是二進(jìn)制運(yùn)算

想問(wèn)一下這個(gè)用豎線分隔開(kāi)是什么意思

注意：在變異（不是替換）對(duì)象或數(shù)組時(shí)，舊值將與新值相同，因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象/數(shù)組。Vue 不會(huì)保留變異之前值的副本。

vm.$watch

有時(shí)候，你可能想在某個(gè)組件的根元素上監(jiān)聽(tīng)一個(gè)原生事件。可以使用 .native 修飾 v-on 。例如：

如果在同一標(biāo)簽使用，v-if就是用來(lái)過(guò)濾v-for里面的數(shù)據(jù)的，先走if的話用template套在外面

今天并列使用的時(shí)候遇到的巨坑：

結(jié)果topics只有三條數(shù)據(jù)，但是渲染出9條數(shù)據(jù)，官網(wǎng)說(shuō)的很清楚：v-for with v-if

即使設(shè)置了keep-alive組件的beforeUpdate和updated鉤子函數(shù)還是會(huì)調(diào)用的。

activated和unactivated鉤子是在keep-alive組件里面被調(diào)用的，不是第一次進(jìn)入keep-alive組件的話，調(diào)用順序是：
beforeEach->beforeRouteEnter->activated->beforeUpdate->beforeRouteEnter的next函數(shù)

也可以在離開(kāi)頁(yè)面的時(shí)候手動(dòng)銷(xiāo)毀改組件：

 beforeRouteLeave(to, from, next) {
    if (to.path === "/examcentre") {
        this.$destroy();
    }
    next();
 }
//或者
  deactivated: function () {
    console.log(4)
    this.$destroy();
  },

有時(shí)候根據(jù)需求（比如該組件是復(fù)用的）需要在再次進(jìn)入該頁(yè)面的時(shí)候重新從后臺(tái)獲取數(shù)據(jù)，那么可以在activated鉤子函數(shù)中請(qǐng)求數(shù)據(jù)來(lái)update頁(yè)面。

vue.js 能否設(shè)置某個(gè)組件不被keep-alive?
vue2.0 keep-alive最佳實(shí)踐
Vue如何做到前進(jìn)刷新數(shù)據(jù),后退不刷新數(shù)據(jù)呢?
組件緩存問(wèn)題
Vue路由開(kāi)啟keep-alive時(shí)的注意點(diǎn)
vue.js+vue-router+webpack keep-alive用法

所以要想清除vuex state里面的數(shù)據(jù)的話，可以放在beforeRouteLeave里面做處理。

 this.$store.commit("SET_PAPERATTRIBUTE", {}); 

mint-ui 中的Toast MessageBox Indicator 調(diào)用的方式是Toast("提示信息");或者在全局引入mint-ui然后再組件里this.$toast("提示信息"),這種方式和我們普通的引入組件的方式都不同，通常我們是在模板里直接將組件放到模板里面，這就意味著父組件在render的時(shí)候，子組件也被render到了dom里面：

this.$toast("提示信息")這種是在函數(shù)中調(diào)用，肯定也是要render到dom里面的，改咋辦呢？查看了mint-ui的實(shí)現(xiàn)方式：document.body.appendChild(instance.$el);
目錄：

TopicDetailPopup.vue文件就是普通的vue寫(xiě)法，
index.js:

這里考慮到每次彈出層不能都去創(chuàng)建新的組件，我們只需要將組件內(nèi)的數(shù)據(jù)更新就可以了，dom也不需要?jiǎng)h除，然后再創(chuàng)建，就用到了單例模式，這邊的instance是在父組件沒(méi)銷(xiāo)毀之前都是存在的，每次只是更新了組件的數(shù)據(jù)，為啥沒(méi)被銷(xiāo)毀呢，這邊形成了一個(gè)閉包：

調(diào)用：

import TopicDetailPopup from "../topicDetailPopup/index.js"
TopicDetailPopup.open({
                            detail: res.data
                     });

但是這個(gè)地方出現(xiàn)個(gè)問(wèn)題this.$store現(xiàn)在為undefined，應(yīng)該是因?yàn)檫@個(gè)組件是直接new實(shí)例化的，而不是通過(guò)根組件嵌套的，
main.js

new Vue({
    router: router,
    store,
    render: h => h(App)
}).$mount("#app");

store注冊(cè)在根組件里面，而彈窗組件沒(méi)有和根組件關(guān)聯(lián)，所以拿不到store。

要是能將彈窗組件插入其他組件問(wèn)題就能解決了，貌似現(xiàn)在API沒(méi)有提供這樣的接口，vue2動(dòng)態(tài)添加組件的話可以用render函數(shù)，可以我現(xiàn)在的彈窗組件是模板的形式，也可以動(dòng)態(tài)插入到父組件，且需要在components里面引用，這樣又回到了模板語(yǔ)法了。

彈窗的弊端：
vue-devtools 沒(méi)法檢測(cè)到組件，也沒(méi)法檢測(cè)到vuex，對(duì)于webapp來(lái)說(shuō)返回鍵沒(méi)法使用，關(guān)閉不了當(dāng)前的彈窗，造成上面的問(wèn)題都是由于沒(méi)用使用router。
對(duì)于安卓手機(jī)返回鍵沒(méi)法使用可以采用曲線救國(guó)的方式，禁用返回鍵，js沒(méi)法直接操作安卓返回鍵，但是可以使用beforeRouteLeave，使得返回鍵沒(méi)有效果，

 beforeRouteLeave(to, from, next) {
        if (this.popupVisible) {//彈窗顯示的話，路由沒(méi)法跳轉(zhuǎn)
            next(false);
        } else {
            next(true);
        }
 }

彈窗的好處：
在當(dāng)前頁(yè)面直接彈出，這樣可以保存當(dāng)前頁(yè)面的數(shù)據(jù)和滾動(dòng)條的位置，還有就是組件復(fù)用的話，直接關(guān)閉彈窗，不需要根據(jù)不同的頁(yè)面去回退或者前進(jìn)到特定的頁(yè)面。

使用的是vue2.0，如何動(dòng)態(tài)添加組件。例如實(shí)現(xiàn)點(diǎn)擊A按鈕添加aTest組件，點(diǎn)擊B按鈕添加bTest組件。

v-model通常用于input的雙向數(shù)據(jù)綁定 ，也可以實(shí)現(xiàn)子組件到父組件數(shù)據(jù)的雙向數(shù)據(jù)綁定：
首先說(shuō)說(shuō)v-model的用法：
model.vue

modelChild.vue

無(wú)論改變父組件還是子組件的輸入框，value和msg的值都會(huì)改變，兩個(gè)輸入框的值也就同時(shí)改變了。

:model和v-model的區(qū)別
:model是v-bind:model的縮寫(xiě),這種只是將父組件的數(shù)據(jù)傳遞到了子組件，并沒(méi)有實(shí)現(xiàn)子組件和父組件數(shù)據(jù)的雙向綁定。當(dāng)然引用類(lèi)型除外，子組件改變引用類(lèi)型的數(shù)據(jù)的話，父組件也會(huì)改變的。

查看vue-router源碼的時(shí)候發(fā)現(xiàn)install.js里面兩句：

Vue.component("router-view", View)
Vue.component("router-link", Link)

這兩句就是全局注冊(cè)了這兩個(gè)組件,

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

這三步后，在組件里直接使用 而不用先import再使用。

在mint-ui里也是相同的做法：
src/index.js

const install = function(Vue) {
  if (install.installed) return;
  Vue.component(Header.name, Header);//注冊(cè)全局組件
  Vue.component(Button.name, Button);
  Vue.use(InfiniteScroll);//使用指令插件
  Vue.use(Lazyload, {
    loading: require("./assets/loading-spin.svg"),
    try: 3
  });//使用指令插件或lazy-component
  Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
  Vue.$toast = Vue.prototype.$toast = Toast;
  Vue.$indicator = Vue.prototype.$indicator = Indicator;
};

后面的Vue.$toast = Vue.prototype.$toast = Toast;使得我們可以在組件中直接調(diào)用this.$toast("提示信息")

之前在寫(xiě)react的時(shí)候是不可以這么做的，今天查看了popup.vue的時(shí)候發(fā)現(xiàn)vue是可以這么干的，直接渲染到了組件的根元素上面。用在組件上

 props: {
    fixed: Boolean,
    value: {}
  }

今天在concat兩個(gè)數(shù)組的時(shí)候發(fā)現(xiàn)數(shù)據(jù)更新了，頁(yè)面并沒(méi)有刷新，debug看了下數(shù)據(jù)，concat的數(shù)據(jù)沒(méi)有g(shù)et set屬性訪問(wèn)器，導(dǎo)致后來(lái)push的數(shù)據(jù)也沒(méi)有屬性訪問(wèn)器。之前沒(méi)有細(xì)看文檔。搜了下原來(lái)push是變異方法，concat不是。
解決辦法有二：

使用變異方法

使用vue component的$set函數(shù)
看一些小伙伴的回答是data的$set方法，至少vue2是沒(méi)有的。具體可查看文檔列表渲染

我的解決辦法是：

Array.prototype.push.apply(arr, item);

今天在模板.vue文件里加入render函數(shù)發(fā)現(xiàn)并不會(huì)執(zhí)行render函數(shù)，原來(lái)是vue-loader會(huì)將template轉(zhuǎn)成render函數(shù)，所以只能二選一。.vue文件如何使用render函數(shù)渲染組件

在pc和手機(jī)端都可以實(shí)現(xiàn)只能輸入數(shù)字，可是手機(jī)端彈出的軟鍵盤(pán)里面沒(méi)有完成或者搜索按鈕，搜了下，現(xiàn)在的HTML5 number的情況下并沒(méi)有支持搜索按鈕，type="text"是有的。所以曲線救國(guó)，控制表單只能輸入數(shù)字。
起初的想法是先把在

handleInput(e){
this.val=e.target.value.replace(/[^d]/g,"");
}

但是這種并不會(huì)實(shí)時(shí)刷新表單的數(shù)據(jù)，下面就會(huì)起作用

e.target.value=e.target.value.replace(/[^d]/g,"");

優(yōu)雅點(diǎn)的寫(xiě)法，用自定義指令：

//
 directives: {
        numberOnly: {
            bind: function(el) {
                el.handler = function() {
                    el.value = el.value.replace(/D+/, "")
                }
                el.addEventListener("input", el.handler)
            },
            unbind: function(el) {
                el.removeEventListener("input", el.handler)
            }
        }
    },

vue的input中，如何限制只能輸入number

由于彈出層是單例模式，所以打開(kāi)彈出層只會(huì)執(zhí)行一次mounted鉤子函數(shù)，我去監(jiān)聽(tīng)

  visible(val) {
            if (val) {
                this.$refs.textbox.focus();//這樣并不能使文本框獲取焦點(diǎn)
            } else {
                this.detail = null;
                this.$refs.textbox.value = "";
            }
        }

解決辦法也是使用自定義指令

  focus: {
            update(el) {
                el.focus();
            }
  }

vue如何實(shí)現(xiàn)點(diǎn)擊button 使input獲取焦點(diǎn)

平時(shí)在寫(xiě)組件里面的樣式加上scoped，避免樣式的全局污染，而從后臺(tái)返回的HTML無(wú)效的，解決辦法就是在組件里再加一對(duì)style標(biāo)簽，將樣式寫(xiě)到這里。