一、vue中的響應式屬性
Vue中的數據實現響應式綁定
1、對象實現響應式:
是在初始化的時候利用definePrototype的定義set和get過濾器,在進行組件模板編譯時實現water的監聽蒐集依賴項,當數據發生變化時在set中通過調用dep.notify進行發佈通知,實現視圖的更新。
2、數組實現響應式:
對於數組則是通過繼承重寫數組的方法splice、pop、push、shift、unshift、sort、reverse、等可以修改原數組的方式實現響應式的,但是通過length以及直接利用item[index]方式修改數組是不能實現響應式的改變dom(這種兩種方式涉及到數組的內部實現)。在數據更新後爲了避免過於頻繁的進行dom的操作,在vue中會將更新的dom進行批量操作,而不是直接有數據更新就刷新dom,vue將需要更新的dom壓入異步隊列記性批量操作,提高性能。
下面具體的實現,實現原理大致如下:
模仿的雙向數據綁定的代碼見我的博客雙向數據綁定
在vue的data中定義的屬性才具有響應式的效果,通過vue.name或者this.name形式定義的全局變量雖然可以在template中使用,但是其不是響應式的。同時在data中定義的對象obj,如果後面給對象定義新的屬性也不是響應式的,除非通過vue提供的方法set設置,具體如下:
new vue({
data(){
return {
obj:{}
}
},
methods:{
this.obj.name="hs"//非響應屬性
this.$set(this.obj,'name','hs')//name屬性將會是響應式的
}
})
如果data中定義的有數組元素同時在computed中也要注意具體如下面介紹。
二、computed定義的計算屬性
1、在vue中$option.data中定義的數據是都是響應式的,在初始化生命週期的時候就已經實現了數據雙向綁定,通常在view中只是用一個表達式語句,當綁定時的邏輯比較複雜是可以通過計算屬性的方式實現。但是在computed中定義的屬性只具有get方法,所以當在程序中改變屬性的時候並不能實現視圖的動態響應。可以通過顯示的定義set的方式實現視圖的刷新。
JS代碼
const app = new Vue({
data:function () {
return {
model:'hello',
name:'world',
}
},
computed:{
model1:
{
get: function(){
return this.model;
},set:function (val) {
return this.model=val;
}
}
},
methods:{
con:function () {
this.model1="hello world"//動態修改model1屬性時,視圖也會跟着跟新
console.log(this.model1);
}
},
/* watch:{
'model1':function (val) {
console.log(val)
}
}*/
}).$mount('#app')
2、如果在computed中定義的屬性依賴於data中定義的屬性,當data中的屬性動態變化時,視圖中綁定的computed的值也會跟着變化
const app = new Vue({
/* router:router,*/
data:function () {
return {
model:'hello',
name:'world',
}
},
computed:{
model1:
{
get: function(){
return a;
},set:function (val) {
a=val;
}
}
},
methods:{
con:function () {
this.model1="hello world"
console.log(this.model1);
}
},
/* watch:{
'model1':function (val) {
console.log(val)
}
}*/
}).$mount('#app')
通過以上兩種方式實現的computed的動態雙向綁定實質是通過中間的層data的屬性,computed中依賴的屬性如果不是data中的屬性則也不能實現動態的綁定 ,即當上面的get,set中的this.model換成一個全局的屬性時,也不能實現動態的更新。所以實質上在vue中最爲原始的響應式數據實際是在data中定義的,如果computed中定義的屬性依賴於data中的屬性時,其實質是其依賴data中的屬性在訪問時觸發data中的getter方法,從而會註冊監聽器,所以當依賴屬性變化時,computed中的屬性也會跟着變化。但是在computed中定義的不具有依賴項的屬性是直接掛在在vue實例上的屬性其是不具有響應式的特點的。
3、watch監聽data中屬性的變化,可以實現和computed的同樣的效果,當時當監聽的屬性依賴多個屬性時,利用computed更爲方便,如下:
(1)使用watch監聽
<div id="demo">{{fullName}}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
}
(2)利用computed監聽,更爲簡潔,同時computed會將結果進行緩存,當結果沒有發生變化時,不會觸發相應回調
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})