Vue 常用API整理 1
Vue 常用 API 整理 1 - 元件屬性與方法
1. 單檔案元件說明
.vue檔案是一個自定義的檔案型別，用類HTML語法描述一個Vue元件。每個.vue檔案包含三種類型的頂級語言塊
<template>
<!--
HTML 程式碼，
每個 .vue 檔案對多包含一個<template>
內容將會被提取為字串，將編譯並用作Vue元件的template選項
-->
</template>
<script 專案中通過安裝
vue-loader來解析這種檔案，它會提取每個語言快，經過相應的 loader 處理，最後組成一個 CommonJs 模組，輸出一個 Vue元件物件如果習慣於將 結構、表現、行為分離，可以分割
.vue檔案為多個檔案，通過src引用
<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.css" 2. 建立Vue例項
每個 Vue 應用都是他通過 Vue 函式建立一個新的 Vue 例項開始的，建立例項時，可以傳入一個選項物件，這些選項物件用來配置你想要的行為
var vm = new Vue({
data: {},
})在大型專案中，一個應用只需要一個 他通過
new Vue()建立的根例項，其他部分通過巢狀元件來完成
3. 例項屬性、元件的屬性
Vue 例項暴露了一些有用的例項屬性與方法，他們在建立例項時，寫在配置物件中，建立例項後可以通過
新增字首$後的屬性名呼叫，以便與使用者定義的屬性區分
vm.$data => data
vm.$props => props
vm.$el => el
...1. data
例項或者、元件的資料物件，資料型別為物件或者函式（必須返回值為物件），元件的 data 只能是含有物件返回值的函式
Vue 例項代理了 data 物件上的所有屬性
// 建立 Vue 例項
const vm = new Vue({
data: {
count: 1
}
});
// vm.$data 可以訪問 data 例項上的屬性
console.log(vm);
console.log(vm.count === vm.$data.count); // true
// 元件
const Component = Vue.extend({
data () {
return {
num: 20
};
}
}); data 中資料（建立時存在的屬性）是響應式的，資料改變時，檢視會重繪
const vm = new Vue({
data: {
count: 1
}
});
// 以下兩種改變的 data 都是響應式的
vm.$data.count = 2;
vm.count = 3;
// 如果是建立時不存在 data 中的屬性，則不會有響應式
vm.num = 4;
對比 : 類似於 react 元件中定義的
this.state儲存元件的狀態，元件狀態改變後觸發元件更新
2. computed
計算屬性，Vue 的模板中允許使用 javascript 的表示式進行簡單計算，但是對於需要複雜的計算的屬性，需要使用
computed將邏輯提取出來，便於管理維護計算屬性的繫結與 data 中的普通屬性一致，他返回一個值，如果這個值的計算依賴於 其他具有 響應式 的屬性（props|data），那麼 Vue 會在它所依賴的屬性改變時，更新這個計算屬性
export default {
data () {
return {
text: 'home-basic-container'
};
},
computed: {
computedText() {
return this.text.split('-').reverse().pop();
}
},
}以上宣告的 computed 計算屬性（資料型別為函式）實際將會作為物件 getter 函式（預設），我們也可以顯式的設定他的 setter 函式
data () {
return {
text: 'home-basic-container'
};
},
computed: {
computedText: {
get () {
return this.text.split('-').reverse().pop();
},
set (newVal) {
this.text = newVal.toUpperCase();
}
}
},
methods: {
handleClick() {
// 如果沒有設定 setter 會報錯 [Vue warn]: Computed property "computedText" was assigned to but it has no setter.
this.computedText = 'onClick';
// 更改 computedText 後 this.text 也相應的改變
console.log(this.text, this.computedText); // ONCLICK ONCLICK
}
}
對比：react 中使用 jsx 語法，複雜的計算可以提取出函式來處理，更加靈活，而在 vue 中，使用了 computed 計算屬性，將賦值和計算分離
3. props
props 可以是陣列或者物件，用於接收來自父元件的資料，如果是物件型別，可以用來配置型別檢驗，設定預設值等高階功能 。
真實傳入 props 是在父元件中呼叫子元件時，但是在子元件中需要顯式的用 props 選項宣告它預期的資料，更多驗證規則
非 Prop 特性，指的是 直接傳入元件，元件中不宣告相應的 prop，這種方式定義的props，在子元件中不方便使用，但是會直接新增到 子元件的根元素上
<template>
<div class="home-container" @click="handleClick" >
<HomeBasic propText="this is props" test-props="111"></HomeBasic>
</div>
</template> export default {
name: 'HomeBasic',
data () {
return {};
},
props: {
// 沒有 宣告 test-props 屬性
propText: {
type: String,
default: '',
required: true
}
},
methods: {
handleClick() {
// 通過 this.$attrs 可以獲取 父元件進來的繫結
console.log(this.$attrs);
// {propText: "this is props", test-props: "111"}
}
}
};對比：與 react 中 props 類似，都是在父元件中寫作子元件的屬性，但是 vue 中需要顯式的列出，需要的 props
4. methods
methods 與其他屬性一樣將被混入到 Vue 例項中，可以通過 vm 例項訪問這些方法，或者在指令表示式中使用，方法中的 this 自動繫結為 Vue 例項（非 => 函式）
<div class="home-basic-container" @click="handleClick">
this is {{text}}
</div> methods: {
handleClick(e) {
// 通過 this 呼叫
console.log(e);
this.change();
},
change() {
this.text = 'onClick';
console.log(this.text);
}
}對比：相比於 react 將所有函式寫在配置在最外層，vue 將元件的生命週期函式與普通函式分開，使得邏輯更清晰
5. watch
觀察 Vue 例項變化的一個表示式或者計算屬性，值為一個接受舊值和新值的函式，或者方法名，Vue 例項會在 例項化時期呼叫
可以用於，監聽某個狀態變化，變化後做出相應的響應或者操作
export default {
name: 'HomeBasic',
data () {
return {
text: 'home-basic-container'
};
},
methods: {
handleClick() {
this.text = 'onClick';
console.log(this.text);
}
watchTextChange(newVal, oldVal) {
console.log(newVal, oldVal);
}
},
watch: { // 一下是三種 書寫格式
text(newVal, oldVal) {
console.log(newVal, oldVal);
},
text: 'watchTextChange',
text: { // 可以用物件來進行配置
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
deep: true
}
}
};對比：react 中沒有專門對應的Api 但是在元件的 componentWillReceiveProps 等生命週期中還是可以進行類似操作的。
6. el
只有在 new 建立的例項中才會使用，提供一個在頁面上已存在的 DOM 元素，作為Vue的掛載目標，可以是 css 選擇器，也可以是 html 例項
const vm = new Vue({
el: '#app'
});
vm.$el; // <div id="app"></div>對比：react 中註冊應用，也會用到這樣一個掛載目標
7. template
一個字串模板作為Vue例項的標識所用，模板將會替換掛載的元素，掛載元素的內容都將被忽略，除非模板的內容有分發插槽
如果 Vue 選項中包含渲染函式，模板將會被忽略
使用
.vue單檔案元件，<temptate></template>標籤中的內容會被渲染為 vue例項的 tempalte 屬性對比：這個屬性對應 react 元件中的 render 方法。
8. render
template 的 替代方案，在這裡允許使用 jsx 語法，建立元件， render 函式由兩個引數 createElement, context
對比：對應 react 中的 render 函式，但是又有些不同， 具體檢視這裡
9. components
包含 Vue 例項可用元件的雜湊表，元件可以擴充套件 HTML 元素，封裝可重用的程式碼
註冊元件需要在初始化例項之前註冊
<div class="home-basic-container" @click="handleClick">
<golbal-component></golbal-component>
<local-component></local-component>
</div> // 全域性註冊
Vue.component('golbal-component', {
template: '<div>this is golbal-component</div>'
});
// 區域性註冊
const localComponent = {
template: '<div>this is localComponent</div>'
};
// 建立例項
new Vue({
el: '#app',
components: {
localComponent, // 區域性註冊，寫在模板中可以是 小寫 + ‘-’ 的格式 <local-component />
// golbal-component // 全域性註冊不用引入
}
});10. extends
允許宣告擴充套件另一個元件
import HomeBasic from './HomeBasic';
export default {
extends: HomeBasic,
methods: {
change() { // 覆蓋掉 HomeBasic 元件中的 change 函式
this.text = 'on extend click';
console.log(this.text);
},
}
};嘗試在
.vue單檔案元件中繼承另外一個單檔案元件，只能繼承到另一個元件的<script>，<template>和<style>還需要手動新增引用，如果這個元件定義在一個.js檔案中，那麼他所繼承的就是一個完整的元件。對比：react 中元件間可以在建立時
class NewComponent extends OldComponent {}這樣來繼承
11. mixins
mixins（混合） 是一種分發 Vue 元件中可複用功能的非常靈活的方式，混合物件可以包含任意元件選項
- 混合物件中如果有生命週期的鉤子函式則會在 元件自身鉤子之前呼叫
- 混合物件中值為物件的選項 如 methods components，將會被合併為同一個物件，鍵名衝突時以元件中定義的為準
- 如果有多個混合物件，且有鍵名衝突，則 優先順序為 元件中鍵值對 > mixins屬性中靠後的Mixin中的鍵值對 > mixins屬性中靠前的Mixin中的鍵值對
const mixin1 = {
created() {
console.log('mixin created');
},
methods: {
change() {
console.log('mixin change');
},
log() {
console.log('mixin1 log');
}
}
};
const mixin2 = {
methods: {
log() {
console.log('mixin2 log');
}
}
};
export default {
name: 'HomeBasic',
mixins: [mixin1, mixin2],
created() {
console.log('self created');
},
methods: {
handleClick() {
this.change();
this.log();
},
change() {
console.log('self change');
}
}
};
// mixin created
// self created
// self change
// mixin2 log對比：react 中原含有 mixin 後放棄，改為使用高階元件實現同樣功能
12. name
只有元件中有用，主要用於 元件自身遞迴呼叫以及方便除錯