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

記錄一些小技巧和踩過的坑

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

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

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

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

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

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

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

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

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

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

寫在外部的是全局過濾器

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

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

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

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

想問一下這個用豎線分隔開是什么意思

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

vm.$watch

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

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

今天并列使用的時候遇到的巨坑：

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

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

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

也可以在離開頁面的時候手動銷毀改組件：

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

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

vue.js 能否設(shè)置某個組件不被keep-alive?
vue2.0 keep-alive最佳實(shí)踐
Vue如何做到前進(jìn)刷新數(shù)據(jù),后退不刷新數(shù)據(jù)呢?
組件緩存問題
Vue路由開啟keep-alive時的注意點(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的時候，子組件也被render到了dom里面：

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

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

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

調(diào)用：

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

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

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

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

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

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

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

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

使用的是vue2.0，如何動態(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ù)綁定：
首先說說v-model的用法：
model.vue

modelChild.vue

無論改變父組件還是子組件的輸入框，value和msg的值都會改變，兩個輸入框的值也就同時改變了。

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

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

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

這兩句就是全局注冊了這兩個組件,

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);//注冊全局組件
  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("提示信息")

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

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

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

使用變異方法

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

我的解決辦法是：

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

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

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

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

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

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

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

//
 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

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

  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)

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