vue和mpvue

一、mixins的理解

    vue中提供了一種混合機制--mixins，用來更高效的實現組件內容的復用。最開始我一度認為這個和組件好像沒啥區別。。后來發現錯了。下面我們來看看mixins和普通情況下引入組件有什么區別？

     組件在引用之后相當於在父組件內開辟了一塊單獨的空間，來根據父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。

     而mixins則是在引入組件之后，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合並。相當於在引入后，父組件的各種屬性方法都被擴充了。

     單純組件引用：

          父組件 + 子組件 >>> 父組件 + 子組件

     mixins：

          父組件 + 子組件 >>> new父組件

 

     值得注意的是，在使用mixins時，父組件和子組件同時擁有着子組件內的各種屬性方法，但這並不意味着他們同時共享、同時處理這些變量，兩者之間除了合並，是不會進行任何通信的。

// App.vue
<template>
    <!-- ... -->
</template>
<script>
    import {mixin} from "./base.js";    // 導入混合對象

    export default {
        mixins: [mixin],    // 記得一定要添加 mixins 屬性，要求賦值一個數組，意味着可以使用多個混合對象
        // ...
        created:function(){
            console.log('組件鈎子被調用')
            this.foo();
            this.conflicting();
        },
        method: {
            conflicting(){
                console.log("from self");
            }
        }
    }
</script>   

    混合 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。 
  混合對象可以包含任意組件選項。 
  當組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。

  混合對象的使用主要是在項目中提取出常用的公共方法，提高代碼的重用率。

//可以把小程序分享代碼抽離出來 vue組件中import引入 mixins聲明
export default {
  onShareAppMessage () {
    return {
      title: '小程序分享',
      path: '/pages/index/main'
    }
  }
}

 

二、Vue的計算屬性：computed

1.在computed屬性對象中定義計算屬性的方法，在頁面中使用{{方法名}}來顯示計算的結果。

2.通過getter\setter實現對屬性數據的顯示和監視，計算屬性存在緩存，多次讀取只執行一次getter計算。

<div id="demo">
        姓：<input type="text" placeholder="firstName" v-model="firstName"><br>
        名：<input type="text" placeholder="lastName" v-model="lastName"><br>
        姓名1(單向):<input type="text" placeholder="FullName1" v-model="fullName1"><br>
        姓名2(雙向):<input type="text" placeholder="FullName2" v-model="fullName2"><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const demo = new Vue({
        el : '#demo',
        data : {
            firstName : 'A',
            lastName : 'B',
            fullName2 : 'A B'
        },
        computed : {//計算屬性相當於data里的屬性
            //什么時候執行：初始化顯示/ 相關的data屬性發生變化
            fullName1(){//計算屬性中的get方法，方法的返回值就是屬性值
                return this.firstName + ' ' + this.lastName
            },
 
            fullName3 : {
                get(){//回調函數 當需要讀取當前屬性值是執行，根據相關數據計算並返回當前屬性的值
                    return this.firstName + ' ' + this.lastName
                },
                set(val){//監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據
                    //val就是fullName3的最新屬性值
                    console.log(val)
                    const names = val.split(' ');
                    console.log(names)
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
 
    })
 
 
</script>

改變姓和名時，對應的姓名1和姓名2會發生改變。

改變姓名1時，姓和名、姓名2都不會改變。

改變姓名2時，對應的姓和名，以及姓名1也會改變。

三、關於 $emit 的用法

1、父組件可以使用 props 把數據傳給子組件。
2、子組件可以使用 $emit 觸發父組件的自定義事件。

vm.$emit( event, arg ) //觸發當前實例上的事件

vm.$on( event, fn );//監聽event事件后運行 fn； 

例如：子組件：

<template>
  <div class="train-city">
    <h3>父組件傳給子組件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大連`)'>點擊此處將‘大連’發射給父組件</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用來接收父組件傳給子組件的數據
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件觸發后，自動觸發showCityName事件
      }
    }
  }
</script>

父組件：

<template>
    <div>
        <div>父組件的toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//觸發子組件城市選擇-選擇城市的事件
        this.toCity = data.cityname;//改變了父組件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

 

四、在使用vux這個ui庫的時候，有許多自定義組件Flexbox、FlexboxItem。。。。。，在純彈窗類組件比如 Alert Popup XDialog 等組件上使用 v-transfer-dom 實現自動移動到 body 下

https://doc.vux.li/zh-CN/directives/v-transfer-dom.html

//注冊局部指令
import { TransferDom } from 'vux'

export default {
  directives: {
    TransferDom
  }
}



//注冊全局指令
import { TransferDom } from 'vux'

Vue.directive('transfer-dom', TransferDom)


//在模板中使用

<div v-transfer-dom> <popup v-model="show"></popup> <div>

 

五、mounted和methods的區別

首先講一下vue的生命周期

beforecreate : 舉個栗子：可以在這加個loading事件 

created ：在這結束loading，還做一些初始化，實現函數自執行   （data數據已經初始化 但是 dom結構渲染完成 組件沒有加載）

mounted ： 在這發起后端請求，拿回數據，配合路由鈎子做一些事情  （dom渲染完成 組件掛載完成 ）

beforeDestroy： 你確認刪除XX嗎？（簡單來說  就是組件還存在）

 destroyed ：當前組件已被刪除，清空相關內容  （組件已經銷毀 ）

 

所以說  mounted 是生命周期方法之一，會在對應生命周期時執行。

而   methods 是Vue實例對象上綁定的方法，供當前Vue組件作用域內使用，未調用不會執行。

六、vue中永遠不要把 v-if 和 v-for 同時用在同一個元素上

一般我們在兩種常見的情況下會傾向於這樣做：

• 為了過濾一個列表中的項目 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users替換為一個計算屬性 (比如 activeUsers)，讓其返回過濾后的列表。

• 為了避免渲染本應該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 (比如 ul, ol)。

//錯的栗子
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>


//正確的，使用計算屬性
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

我們將會獲得如下好處：

• 過濾后的列表只會在 users 數組發生相關變化時才被重新運算，過濾更高效。
• 使用 v-for="user in activeUsers" 之后，我們在渲染的時候只遍歷活躍用戶，渲染更高效。
• 解藕渲染層的邏輯，可維護性 (對邏輯的更改和擴展) 更強。

同理：

<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

//更新為

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

通過將 v-if 移動到容器元素，我們不會再對列表中的每個用戶檢查 shouldShowUsers。取而代之的是，我們只檢查它一次，且不會在 shouldShowUsers 為否的時候運算 v-for。