Vue一些知識點總結

引言：平時在專案開發過程中會用到一些知識點，自己覺得有些用，便整理下來供以後自己去回顧。

1.混入（mixins）

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

    var myMixin = {
        data: function () {
            return {
              message: 'hello',
              foo: 'abc'
            }
        },
        created: function () {
            this.hello()
         },
        methods: {
            hello: function () {
              console.log('hello from mixin!')
            },
            getName:function(name){
                console.log("我在迷信中名字是："+name);
            },
            getAge:function(age){
                console.log("我今年"+age+"歲了")
            }
        }
    }  
    //在vue中進行使用
    var vm=new Vue({
      mixins: [mixin],
      data: function () {
        return {
          message: 'goodbye',
          bar: 'def'
        }
      },
      created: function () {
        console.log("created:"+JSON.stringify(this.$data))
      },
      methods:{
          getName:function(name){
              console.log("我在vue中的名字為:"+name);
          }
      }
    })
複製程式碼

同名鉤子函式將混合為一個陣列，因此都將被呼叫。另外，混合物件的鉤子將在元件自身鉤子之前呼叫。因而在鉤子函式created()中的輸出為：

'created:{ "message": "goodbye", "foo": "abc", "bar": "def" }' 第二行；

在值為物件的這些Vue屬性中，例如 methods, components 和 directives，將被混合為同一個物件。當mixin對講和Vue例項兩個物件中鍵名衝突時，取Vue例項物件的鍵值對。因此在呼叫methods中的方法時 vm.getName("黎明")；//我在vue中的名字為：黎明。 同時呼叫時vm.getAge(20);//我今年20歲了。會將Vue例項中沒有的，mixin中有的新增到Vue例項中去。

其實mixin有點跟jQuery中的$.extend()和es6的object.assign()方法在功能上有些相似。

2.Vue.nextTick()

在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的 DOM。

new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    isShow:false
  },
  methods: {
    changeState() {
      this.isShow = !this.isShow;
      this.$nextTick(() => {
        //this.isShow改變後要執行的程式碼
      })
    }
  }
})
複製程式碼

3.Vue.set( target, key, value )

target：要更改的資料來源(可以是物件或者陣列)
key：要更改的具體資料
value ：重新賦的值

向響應式物件中新增一個屬性，並確保這個新屬性同樣是響應式的，且觸發檢視更新。它必須用於向響應式物件上新增新屬性，因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = 'hi')

        <div id="app">
        <input v-model="arr[0].name" />
		<ul>
			<li v-for="(item,index) in arr" :key="index">
				{{index}}——{{item.name}}
			</li>
		</ul>
		<button @click="changeArr">使用傳統js方法修改陣列</button>
			<button @click="changeArrBySet">使用Vue.set方法修改陣列</button>
	</div>
	<script type="text/javascript">
		window.onload=function(){
			new Vue({
				el:"#app",
				data:{
					arr:[{name:"張三",age:20},{name:"李四",age:26},{name:"王五",age:20}]
				},
				methods:{
					changeArr(){
						this.arr[0]={name:"張大",age:40};
						console.log("使用傳統js方法修改陣列");
					},
					changeArrBySet(){
                	    this.$set(this.arr,0,{name:"張大",age:40});
                	    console.log("使用傳統js方法修改陣列");
					}
				}
			})
		}
	</script>
複製程式碼

從上面的輸出結果我們可以看出，我們呼叫使用this.arr[0]={name:"張大",age:40};來修改資料元素時並沒有改變檢視中的元素。 而我們通過使用this.$set(this.arr,0,{name:"張大",age:40});能夠實時修改檢視元素。 總結：通過陣列的變異方法（Vue陣列變異方法）我們可以動態控制資料的增減，但是我們卻無法做到對某一條資料的修改,修改資料我們可以使用Vue.set()方法。

4.Vue.extend()

使用基礎 Vue 構造器，建立一個“子類”。引數是一個包含元件選項的物件。data 選項是特例，需要注意 - 在 Vue.extend() 中它必須是函式。
這裡就我個人理解其實就是在定義元件，知識我們在框架中是直接定義.vue檔案。使用這種情況比較多的是在頁面中單獨引入vue.js檔案，然後定義在頁面中定義元件用的。在框架中開發中這種全域性方法用的比較少。

<div id="app">
    <todo :todo-data="dataList"></todo>
</div>
// 構建一個子元件
var todoItem = Vue.extend({
    template: ` <li> {{ text }} </li> `,
    props: {
        text: {
            type: String,
            default: ''
        }
    }
})

// 構建一個父元件
var todoWarp = Vue.extend({
    template: `
        <ul>
            <todo-item 
                v-for="(item, index) in todoData"
                v-text="item.text"
            ></todo-item>
        </ul>
    `,
    props: {
      todoData: {
          type: Array,
          default: []
      }
    },
    // 區域性註冊子元件
    components: {
        todoItem: todoItem
    }
})

// 註冊到全域性
Vue.component('todo', todoWarp)；

new Vue({
el: '#app',
data: {
    dataList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '乳酪' },
        { id: 2, text: '隨便其它什麼人吃的東西' }
    ]
}}) 
複製程式碼

通過Vue.extend()方法構造的元件必須通過 Vue.component('todo', todoWarp)註冊到全域性，才可以在頁面中使用該元件。也可以在元件構造器中 components: { todoItem: todoItem }來將通過Vue.extend()構造的元件進行區域性註冊，作為其他元件的子元件。

Vue.extend()返回的是一個建構函式，因此還可以這樣使用。

<div id="mount-point"></div>
// 建立構造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 建立 Profile 例項，並掛載到一個元素上。
new Profile().$mount('#mount-point')

<div id="mount-point"></div>將會被渲染成<p>Walter White aka Heisenberg</p>
複製程式碼

5.delimiters

delimiters的作用是改變我們插值的符號。Vue預設的插值是雙大括號{{}}。但有時我們會有需求更改這個插值的形式。

     delimiters:['${','}']
複製程式碼

現在我們的插值形式就變成了${}。代替了{{ }}。