vue學習筆記01

vue3 帶來的變化

• vue3 的發佈時間 2020/09/19。
• 優點：更好的性能、更小的包體積、更好的 TypeScript 集成、更優秀的 API 設計。
• options API->CompositionAPI，由選項 API 到組合 API。

學習方式：

1. 官方文檔
2. 看書學習，書的質量要高，你不知道的 javascript
3. 學習開源項目，比如 TJ ，Core 和 express 的作者
4. 視頻課程

vue 的本質是一個 javascript 封裝的庫

vue 的使用

1. CDN 引入
   CDN 是中文內容分發網絡的簡稱，
   

2. 下載
   下載打包好的 vue.js 文件也可以

聲明式和命令式

1. 彙編語言屬於命令式編程，主要思想式關注計算機的執行步驟，即一步步的告訴計算機應該怎麼做。
2. vue.js 屬於聲明式編程，主要思想是告訴計算機應該做什麼，而不指定具體要怎麼做
3. 除此之外還有函數式編程，主要特點就是函數第一位，類似於聲明式編程，函數可以作爲參數傳遞給另一個函數，函數也可以作爲返回值，例如 javascrpt 閉包就屬於函數式編程。

MVVM 模型

MVVM 是Model-View-ViewModle的簡稱，是一種基於前端開發的架構模式，其核心是提供對 View 和 ViewModel 的雙向數據綁定，這使得 ViewModel 的狀態改變可以自動傳遞給 View，這就是雙向數據綁定。
除此之外還有MVC架構模式，常用於 javaweb。

template 模板

template 的使用方式

1. 第一種方式，直接在 template:``中寫
   

2. 第二種，創建 type = 'x-template' 和帶 id 屬性的 script 標籤
   

3. 推薦第三種，創建 template 帶 id 的標籤
   

methods 屬性

methods 是一個對象，可以通過關鍵字 this 來直接訪問 data 中的屬性

data 屬性

平時使用的時候 data 爲什麼是函數而不是對象？
根實例對象 data 既可以是對象也可以是函數（跟實例是單例），不會產生數據污染。組件實例 data 必須是函數，目的是爲了防止多個組件實例對象之間公用一個 data，產生數據污染。採用函數的形式，initData 調用時會將其作爲工廠函數都會返回全新的 data 對象。

Vue 的源碼

1. vue3 源碼下載https://github.com/vuejs/core.git

2. 下載方式：推薦使用 git clone 方式

3. 安裝依賴：pnpm install

4. 對項目執行打包操作：pnpm dev,會在 dist 目錄生成 vue.global.js 文件

5. 修改腳本：添加--sourcemap
   
   不添加--sourecemap調試的文件來源是 vue.global.js，這個是打包好的文件，所有的文件都在一個 js 文件中，不好觀察，添加了--sourcemap後可以在調試的時候看到函數進入到的具體那個文件，比如說 createApp 就是在runtime-dom/src/index.ts定義的
   
   同樣的，想要詳細閱讀就可以到我們源碼的這個目錄的runtime-dom/src/index.ts的第66行來進行閱讀。

6. 怎麼調試?
   可以在example目錄建立一個文件夾創建 html 文件引入打包生成的vue.global.js文件，代碼中添加debugger來進行調試