### 創建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`之類的錯誤。
>
- 前言
- 你真的懂This嗎?
- 對象和對象構造函數
- 工廠功能和模塊模式
- API的使用
- async and await
- 關于async的很棒的一篇文章
- 掘金:關于forEach,map,fiter循環操作
- Node.js 實例與基礎
- 原創: Express 學習使用筆記
- 零碎知識點方法
- 關于滾動吸頂的方法
- Vue學習筆記
- Vue向導
- vuex是啥?
- vue代碼風格指南
- 關于vue的初體驗
- 超詳細解毒Vue
- Vue實例
- 模版語言
- 組件基礎
- 條件渲染、列表渲染、Class與style綁定
- Todolist的制作超詳細
- vue-router
- Vue基礎2.0x 筆記
- 搭建vuepress
- JavaScript之ES6
- 箭頭函數
- 這就是This