vue細枝末節總結

下面總結一下我們在使用vue過程中，經常會踩到坑卻會被忽略的問題：

1、vue data中宣告了某個屬性，有些時候卻發現該屬性沒有發生響應式變更

問題描述：在data中宣告了某個屬性，後面給該屬性賦值，正常邏輯下與該屬性繫結的ui會發生響應。但是由於**編寫失誤，會造成ui不發生響應的情況。

發生這個問題需要了解vue的響應式原理，vue使用object.defineproperty進行響應式操作。初始化data資料的時候，vue會遞迴地遍歷宣告過得data屬性，對該屬性的每乙個子屬性都應用object.property發放進行響應式繫結。如果當這個屬性或者屬性中的某乙個子屬性發生記憶體引用的改變或者基本資料型別的變更時。就會觸發對應的響應式函式，在對應的響應式函式中可以修改ui，最終達到響應式效果。

問題是，當我們第一次修改了整個屬性的記憶體指向時，當新的記憶體中不存在最初宣告的子屬性時，與子屬性發生繫結的ui就無法再次發生響應。這就是問題所在。

vue官方給出了定義單個屬性的方式，元件內的用法如下：

//
...methods: 
}//...

需要注意的是：vue中只有被宣告的屬性發生引用改變或者基本資料型別的變動時，才能出發響應式操作。例項如下：

//
...data: 
}//...

2、watch 和事件的執行先後順序

在vue中，對同乙個屬性使用 watch 和 input 事件進行監聽變化。我們通過例項會發現，input事件的觸發是在 watch之前發生的。示例如下：


//js
data: ,
methods: 
},watch: 
}

3、computed 屬性發生賦值操作

vue的計算屬性，我們常用的其實是一種簡寫形式，如下：

data: ,
computed: 
}

其實上面是一種簡寫形式，我們補全其完整形式，如下：

data: ,
computed: 
}}

上面兩段**的作用是完全一樣的，通常我們採用上面的寫法。但是下面的寫法有獨特的應用場景，如果我們需要對計算屬性進行賦值操作，或者是對計算屬性進行賦值操作時的控制，我們可以對該計算屬性進行set函式的自定義。如下：

data: ,
computed: ,
set (newval) }},
methods: 
}

4、v-model 是 v-bind:value 和 v-on:input 的語法糖，有時候需要拆開使用

在vue1.x版本中可以對 v-model使用過濾器，而在vue2.x版本中取消了這個功能，我們要實現這個功能可以通過將 v-model 拆分為 v-bind:value 和 v-on:input 的形式來完成這個功能：

5、自定義元件需要使用v-model指令

自定義元件上使用的原理也是利用了 v-model的本質，將v-model拆分為 v-bind:value 和 v-on:input 的形式，具體示例如下：

//
註冊元件
vue.component('my-com', 
},props: ['value'],
watch: ,
model (newval, oldval) }})
//template

6、watch的函式形式

created () )
}

被watch的屬性可以是乙個函式的返回值，在函式執行時會求解返回的表示式的值

7、vue元件中的data需要使用函式返回值的形式的解釋

data () 
}

原因：我們使用元件的目的是為了充分地復用，也就是說宣告的元件是會被很多父元件所引用的，在js中物件型別的資料是引用型別，為了防止在多個父元件中修改同乙個data 所指向的記憶體空間，我們必須給每乙個父元件所引用的元件乙個單獨的data物件。而函式的返回值恰恰可以做到這點。

vue細枝末節總結

C 細枝末節

python 細枝末節

svc arp協議的細枝末節

vue細枝末節總結

C 細枝末節

python 細枝末節

svc arp協議的細枝末節

相關推薦