引言:vue2中需要掌握的知識
- 基礎知識
- 創建實例
- 模板語法/JSX語法
- 指令
- data及數據劫持
- methods / computed / watch / filters
- 事件監聽和修飾符
- 條件渲染
- 循環渲染
- 表單處理和修飾符
- class/style樣式處理
- …
- 創建實例
- 組件開發
- 局部組件
- 全局組件
- 組件命名
- 屬性處理
- 自定義事件和EventBus
- 插槽和作用域插槽
- 動態組件和異步組件
- …
- 局部組件
- 高級應用
- 混入 Mixins
- 插件開發 Vue.use()
- 自定義指令 Vue.directive
- 過渡動畫 transition
- keep-alive
- 單元測試
- …
- 混入 Mixins
- 生態圈
- vue/cli
- vuex
- vue-router
- axios
- devTools
- element-ui/vant/cubeui
- …
- vue/cli
- 成神之路
- 手寫 vue / vuex / vue-router …
- 組件庫封裝
- 權限管控
- 服務器SSR渲染
- 大型實戰開發
- …
- 手寫 vue / vuex / vue-router …
Vue2之部分學習方法
- 看官方文檔或者vue視頻
- Vue.js 2 官方文檔
- vue的文檔應該是比較詳細的api了。建議把官網頭部:學習->文檔(例如:教程,api,風格文檔) ,生態系統 -> 工具(例如:Devtools,Vue CLI,Vue loader) / 核心插件(例如:Vue Router,Vuex,Vue 服務端渲染)的文章都看幾遍,總會有意外的收穫。 - CSDN或者掘金或者其他網站的相關文章(vue相關生態的基礎文章,進階文章)
-Vue相關基礎文章 - GitHub上pull下Vue相關項目(如果不會找可以去CSDN或者掘金或者其他網站搜索。或者加一些前端羣,會有大佬自己寫的或者推薦->適合你的),多敲敲結合api理解。
- 加相關前端羣,瀏覽前端相關網站,一直要強制自己接觸最底層和最新知識,然後慢慢提升自己。
vue3核心知識與實戰開發
1. vue3新特性全面剖析
【掃盲】一款框架誕生需要的階段
- 開發
- alpha版:內部測試版 α
- beta版:公開測試版 β
- rc版:Release Candidate(候選版本)
- stable版:穩定版
vue目前穩定的版本:2.6.x,後續出 2.7.x 版本(加入部分vue3內容),維護18個月之後,除安全漏洞更新之外,其餘的不再繼續更新~~
vue3.0在使用中兼容vue2.0的信息
Vue.js 3.0 Beta 相關知識
- 詳細講解 Vue.js 3.0 Beta 相關知識,可以直接看這篇文章,Vue.js 3.0 Beta筆記:尤雨溪直播內容整理
Performance [pəˈfɔːməns]
- 重寫了虛擬Dom的實現(跳過靜態節點,只處理動態節點)
- update性能提高1.3~2倍
- SSR速度提高了2~3倍
Tree shaking [ˈʃeɪkɪŋ]
- 可以將無用模塊“剪輯”,僅打包需要的
Fragment ['frægmənt]
- 不再限於模板中的單個根節點
<Teleport> [ˈtelɪpɔːt]
- 以前稱爲
<Portal> [ˈpɔːtl]
,譯作傳送門
<Suspense> [səˈspens]
- 可在嵌套層級中等待嵌套的異步依賴項
TypeScript
- 更好的TypeScript支持
Custom Renderer API
- 自定義渲染器API
- 用戶可以嘗試WebGL自定義渲染器
開發常使用->重點
Composition [ˌkɒmpəˈzɪʃn] API
-
組合式API,替換原有的 Options [ˈɒpʃnz] API
- 根據邏輯相關性組織代碼,提高可讀性和可維護性
- 更好的重用邏輯代碼(避免mixins混入時命名衝突的問題)
- 根據邏輯相關性組織代碼,提高可讀性和可維護性
-
但是依然可以延用 Options [ˈɒpʃnz] API
- -
Proxy [ˈprɒksi]
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy -
響應式原理不再基於 Object.defineProperty
2. 基於 vue/cli 配置 vue3.0
https://github.com/vuejs/vue-next
vue-cli-plugin-vue-next
$ npm install -g @vue/cli
$ vue --version
$ vue create xxx
$ vue add vue-next
"dependencies": {
"vue": "^3.0.0-beta.1"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.0-beta.1",
"eslint-plugin-vue": "^7.0.0-alpha.0",
"vue-cli-plugin-vue-next": "~0.1.3"
},
eslintConfig": {
"extends": [
"plugin:vue/vue3-essential"
]
}
3. 基於vite配置vue3.0
由 vue 作者尤雨溪開發的 web 開發工具
https://github.com/vitejs/vite
- 基於瀏覽器原生 ES imports 的開發服務器(利用瀏覽器去解析 imports,在服務器端按需編譯返回,完全跳過了打包這個概念,服務器隨起隨用)
- 同時不僅有 Vue 文件支持,還搞定了熱更新,而且熱更新的速度不會隨着模塊增多而變慢
$ npm init vite-app xxx
$ cd xxx
$ npm install
$ npm run dev
$ npm run build
或者
$ yarn create vite-app xxx
$ yarn
$ yarn dev
$ yarn build
4.composition-api的實戰使用
- composition-api中文API
- 建議把中文官網頭部:徵求意見稿(RFC)、API參考(API Reference) 多看幾遍
1. 掌握setup和響應系統API
setup
setup 函數是一個新的組件選項,作爲在組件內使用 Composition API 的入口點
- 初始化props和beforeCreate之間調用
- 可以接收 props 和 context
- this在setup()中不可用
props是響應式的,可以基於watchEffect/watch監聽,解構賦值後則無效
export default {
props: {
title: String,
},
setup(props) {
watchEffect(() => {
console.log(`title is: ` + props.title);
});
}
};
返回的結果可以直接在模板中渲染使用
export default {
props: { title: String },
setup() {
let supNum = 0,
oppNum = 0;
let change = lx => {
lx === 0 ? supNum++ : oppNum++;
};
return {
supNum,
oppNum,
change
};
}
};
ref
接受一個參數值並返回一個響應式且可改變的 ref 對象
- ref 對象擁有一個指向內部值的單一屬性 .value
- 當ref在模板中使用的時候,它會自動解套,無需在模板內額外書寫 .value
import { ref } from "vue";
export default {
setup() {
let supNum = ref(0),
oppNum = ref(0);
let change = lx => {
lx === 0 ? supNum.value++ : oppNum.value++;
};
return {
supNum,
oppNum,
change
};
}
};
reactive
接收一個普通對象然後返回該普通對象的響應式代理
等同於 2.x 的 Vue.observable()
- 響應式轉換是“深層的”:會影響對象內部所有嵌套的屬性
import { ref, reactive } from "vue";
export default {
props: { title: String },
setup() {
let state = reactive({
supNum: 0,
oppNum: 0,
arr: [10, 20]
});
let change = lx => {
lx === 0 ? state.supNum++ : state.oppNum++;
// 比Object.defineProperty好用在於:對於數據或者並未初始化的對象成員,都可以隨意修改值,而且具備響應式的效果
state.arr[0] = state.arr[0] + 1;
state.name = "ls";
};
return {
//...toRefs(state),
state,
change
};
}
};
readonly
傳入一個對象(響應式或普通)或 ref,返回一個原始對象的只讀代理
一個只讀的代理是“深層的”,對象內部任何嵌套的屬性也都是隻讀的
const original = reactive({ count: 0 })
const copy = readonly(original)
watchEffect(() => {
// 依賴追蹤
console.log(copy.count)
});
// original 上的修改會觸發 copy 上的偵聽
original.count++;
// 無法修改 copy 並會被警告
copy.count++; // warning!
computed
傳入一個 getter 函數,返回一個默認不可手動修改的 ref 對象
const count = ref(1);
const plusOne = computed(() => count.value + 1);
console.log(plusOne.value); //2
plusOne.value++; //錯誤!
或者傳入一個擁有 get 和 set 函數的對象,創建一個可手動修改的計算狀態
const count = ref(1);
const plusOne = computed({
get: () => count.value + 1,
set: val => {
count.value = val - 1;
}
});
plusOne.value = 1;
console.log(count.value); //0
import { ref, reactive, toRefs, computed } from "vue";
export default {
props: { title: String },
setup() {
......
// 計算屬性
let ratio = computed({
get: () => {
let total = state.supNum + state.oppNum;
return total === 0
? "--"
: ((state.supNum / total) * 100).toFixed(2) + "%";
}
});
return {
......,
ratio
};
}
};
watchEffect
立即執行傳入的一個函數,並響應式追蹤其依賴,並在其依賴變更時重新運行該函數
export default {
props: {
title: String,
},
setup(props) {
watchEffect(() => {
console.log(`title is: ` + props.title);
});
}
};
watch
watch API 完全等效於 2.x this.$watch
- watch 需要偵聽特定的數據源,並在回調函數中執行副作用
- 默認情況是懶執行的,也就是說僅在偵聽的源變更時才執行回調
偵聽單個數據源
// 偵聽器的數據源可以是一個擁有返回值的 getter 函數,也可以是 ref
// 偵聽一個 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
);
// 直接偵聽一個 ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
});
import { ref, reactive, toRefs, computed, watch } from "vue";
export default {
setup() {
....
let ratio = ref("--");
watch(state, (state, preState) => {
let total = state.supNum + state.oppNum;
ratio.value =
total === 0 ? "--" : ((state.supNum / total) * 100).toFixed(2) + "%";
});
return {
...,
ratio
};
}
};
2. 掌握新生命週期函數和模板refs的使用
模板 Refs
當使用組合式 API 時,reactive refs 和 template refs 的概念已經是統一的
<template>
<div ref="root"></div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const root = ref(null);
onMounted(() => {
console.log(root.value);
});
return {
root
};
}
}
</script>
配合 render 函數 / JSX 的用法
export default {
setup() {
const root = ref(null)
return () =>
h('div', {
ref: root,
})
// 使用 JSX
return () => <div ref={root} />
},
}
生命週期函數
可以直接導入 onXXX 一族的函數來註冊生命週期鉤子
- 這些生命週期鉤子註冊函數只能在 setup() 期間同步使用
- 在卸載組件時,生命週期鉤子內部同步創建的偵聽器和計算狀態也將刪除
5.響應式系統工具集
- 響應式系統工具集 (unref / toRef / toRefs / isRef / isProxy / isReactive / isReadonly)
- 詳細介紹在這:響應式系統工具集:
6.高級響應式系統 API
- 高級響應式系統 API (customRef/ markRaw/ shallowReactive/ shallowReadonly/ shallowRef/ toRaw)
- 詳細介紹在這:高級響應式系統 API
7. Vue3之部分學習方法
- 看官方文檔或者vue3相關視頻
- 詳細講解 Vue.js 3.0 Beta 相關知識,可以直接看這篇文章,Vue.js 3.0 Beta筆記:尤雨溪直播內容整理
- Vue.js 作者尤雨溪:聊聊 Vue.js 3.0 Beta:B站錄播地址
- composition-api中文API:建議把中文官網頭部:徵求意見稿(RFC)、API參考(API Reference) 多看幾遍 - CSDN或者掘金或者其他網站的相關文章(vue3相關文章)
-vue3.0嚐鮮,寫一個win10日曆,看完git下代碼自己結合composition-api看下 - GitHub上pull下Vue3相關項目(如果不會找可以去CSDN或者掘金或者其他網站搜索。或者加一些前端羣,會有大佬自己寫的或者推薦->適合你的),多敲敲結合api理解。
- 加相關前端羣,交流Vue3相關知識。
後記
- 借鑑周哥文章,感謝周哥。
- 大家覺得能看,可以點個贊,添加個收藏,點個關注,謝謝支持。