[Vue] new Vue 的實體

new Vue()

var vm = new Vue({ // 參數 })

• vm: viewModel的意思，概念源自於MVVM架構。

參數

• data

var data = {

    title: 'Hello World'

}

var vm = new Vue({

    data: data

})

Vue 會把變數 data和變數 vm雙向綁定

data.title === vue.title // true

data.title = '改值時vm.title也會改';

vm.title = '改值時data.title也會改';

結論: data 和 vm 共用記憶體空間

DOM渲染注意事項

1.

透過

var vm = new Vue({

    data: data    

})

新增的屬性，都會被監聽，變更時會渲染到畫面上

2.

new Vue() 之後才新增的屬性，都不會被監聽

e.g.

vm.newProperty = 'test'; // newProperty 不會被監聽

3.

根據1.2.的特性，未來才會用到的屬性，就需要在一開始設置初始值

e.g.

var data = {

    futureProperty:''

}

4.

Object.freeze() 可以使物件變成唯讀，不被監聽

e.g.

Object.freeze(data); // 意即data不會被監聽，不會更新到畫面上

Vue提供的屬性、方法

vue提供的屬性方法前面會有前綴符號 $

e.g.

• vm.$data

vm的data

• vm.$el

vm的DOM

• vm.$watch('property',function(newValue, oldValue){ // callback })

可監聽某個property

Vue提供的hook

在 Vue 的生命週期過程中，提供的不同的 hook 給使用者，全景未來說明

e.g.

new Vue({

    created: function(){
        console.log(this.property);

    }

})

source code