### 創建VUE實例有點類似構造函數var一個值再new ``` var vm = new Vue({ //content }) ``` ### vue應用通過`new Vue` 創建 根vue實例注意要大寫V，一個vue應用是由可選可嵌套的組件構成拿office文檔舉例 ``` 根實例 └─ TodoList 例子盒子 ├─ TodoItem 盒子的小項目 │ ├─ DeleteTodoButton 小項目中的刪除鍵 │ └─ EditTodoButton 小項目中的編輯鍵 └─ TodoListFooter 盒子的底部 ├─ ClearTodosButton 清除todos └─ TodoListStatistics 統計todo ``` ### 數據與方法 當一個 Vue 實例被創建時，它將`data`對象中的所有的屬性加入到 Vue 的**響應式系統**中。當這些屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。 例如：  當這些數據改變時，視圖會進行重渲染。值得注意的是只有當實例被創建時`data`中存在的屬性才是**響應式**的。也就是說如果你添加一個新的屬性，比如：  和單例模式的data一樣你知道你后面會使用到一些值所以可以在data中設置好 ### `Object.freeze()` 它可以阻止更新內容讓系統無法跟蹤 ``` var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) ``` 那么使用到{ foo }的標簽將不會更新 ### 關于$data帶有前綴 他們是一些有用的實例屬性及方法他們帶有$以便與用戶自定義屬性區分開來 具體參考 [傳送門再此]([https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7](https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7)) ## 生命鉤子的理解 以下來CSDN自閏土大叔的講解 > 當面試官問：“談談你對vue的生命周期的理解”，聽到這句話你是不是心里暗自竊喜：這也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 這幾個鉤子函數么，創建=>掛載=>更新=>銷毀，So easy ！！！ > 生命周期圖  不能隨意使用箭頭函數因為箭頭函數的this指向的是最頂層的而不是實例vm > 不要在選項屬性或回調上使用[箭頭函數](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，比如`created: () => console.log(this.a)`或`vm.$watch('a', newValue => this.myMethod())`。因為箭頭函數并沒有`this`，`this`會作為變量一直向上級詞法作用域查找，直至找到位置，經常導致`Uncaught TypeError: Cannot read property of undefined`或`Uncaught TypeError: this.myMethod is not a function`之類的錯誤。 >