原创 Vue狀態管理模式「十六」-- Vuex***
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。 一個狀態管理實例 const store = new Vuex.Store({
2021-01-05 02:18:15
原创 Vue3.0「十七」-- vue3.0升級新特性及Proxy重寫響應式講解
vue3.0 升級內容 全部用TS重寫的（響應式、vdom、模本編譯） 性能提升，減少代碼量 會調整部分API Proxy重寫響應式 vue2.x 馬上要過時了嗎 vue3.0從正式發佈到推廣，還需要一段時間 vue2.x應用範圍廣，有大量
2021-01-05 02:18:15
原创 Vue原理「十四」-- 組件渲染過程***
1.初次渲染過程 解析模板爲render函數（或在開發環境中已完成，vue-loader） 觸發響應式，監聽data屬性的getter setter 執行render函數，生成vnode, patch(elem,vnode) 2.更新過程
2021-01-04 02:17:24
原创 Vue路由「十五」-- vue-router的路由模式***
vue-router的路由模式有 hash模式 和 history模式，默認使用 hash 模式 hash模式：使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載。例如 http://yoursi
2021-01-04 02:17:24
原创 Vue原理「十三」-- 模板編譯 *****
前置知識： JS的 with 語法 vue template complier將模板編譯爲render函數 執行render函數生成vnode vnode可以渲染到瀏覽器的DOM元素上 vnode可以在組件修改後觸發更新 1、with語
2020-12-26 12:55:02
原创 Vue原理「十二」-- vdom和diff算法 *****
diff 算法概述 diff即對比，是一個廣泛的概念，如linux diff、git diff 兩個JS對象也可以做diff 兩顆樹做diff，如vdom diff 樹diff 時間負責度是o(n^3) 第一，遍歷tree1；第二，遍歷tr
2020-12-26 12:55:02
原创 Vue原理「十一」-- 響應式原理 *****
Vue響應式：組件data數據一旦變化，立刻觸發視圖的更新 1. 核心API - Object.defineProperty 基本用法 const data={} var name='zhangsan' Object.definePro
2020-11-18 02:57:00
原创 Vue原理「十」-- 組件化和MVVM ***
組件化 很久以前的組件化： asp jsp php 已經有組件化了 nodejs 中也有類似的組件化 傳統組件，只是靜態渲染，更新還要依賴於操作DOM 現在的組件化： 數據驅動視圖 -Vue MVVM 數據驅動視圖 -React se
2020-11-18 02:57:00
原创 Vue高級特性「八」--keep-alive 緩存組件 ***
keep-alive是什麼 keep-alive用於保存組件的渲染狀態。 keep-alive是一個抽象組件：它自身不會渲染一個DOM元素，也不會出現在父組件鏈中；使用keep-alive包裹動態組件時，會緩存不活動的組件實例，避免組件反
2020-10-31 02:02:44
原创 Vue高級特性「九」-- mixin 混入
vue中提供了一種混合機制--mixins，用來更高效的實現組件內容的複用 mixin使用實例 index.vue 引入了mixin.js <template> <div> {{name}} {{major}} {{city}}
2020-10-31 02:02:44
原创 Vue高級特性「七」--動態組件\異步組件***
使用場景： 需要根據數據（新聞詳情頁），動態渲染的場景，即組件類型不確定。 動態組件基本使用 <component :is="nextTickName"></component> import nextTick from './nextT
2020-10-30 03:05:14
原创 Vue高級特性「六」--slot 插槽
基本使用 父組件在引用的子組件中添加內容 <slotDemo :url="website.url"> {{website.title}} //父組件添加的內容 </slotDemo> data() { return { we
2020-10-30 03:05:14
原创 Vue高級特性「五」--$nextTick
$nextTick data改變之後，DOM不會立刻渲染，獲取不到最新的DOM節點； $nextTick會在DOM渲染之後被觸發，以獲取最新DOM節點 <template> <div> <ul ref="ul1">
2020-10-28 02:03:20
原创 Vue高級特性「四」--自定義 v-model
父組件 index.vue <p>{{name}}</p> <CustomVmodel v-model="name" /> 子組件 CustomVmodel.vue <template> <div> <input type="
2020-10-28 02:03:20
原创 vue總結「二」--組件間的通訊
1. 父子組件通訊：props 和 $emit 父組件 index.vue 給子組件 Input 傳遞事件 addHandler 給子組件 List 傳遞數據list、事件 deleteHandler <template> <div
2020-10-27 02:05:26