-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
0 parents
commit 44bb401
Showing
48 changed files
with
2,853 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>响应式</title> | ||
</head> | ||
<body> | ||
<script> | ||
// 1. vue 数据格式是对象, key value 来组织 keys | ||
// 2. 每个key 值 template 占位, 数据驱动 | ||
// 3. 当数据发生改变后, template 会响应, 自动更新 | ||
// 数据格式 | ||
const obj = { | ||
a:1 | ||
// counter:42 | ||
}; //数据可以被箭头 API | ||
// es5 api | ||
// 定义一个属性 vue 2.0 react 早期版本 源码 实现响应式的api | ||
// DOM 编程杜绝 | ||
// 静态属性 | ||
// defineProperty 定义对象上一个属性? | ||
// value | ||
// 权限 可写 writable | ||
// enumerable 是否可枚举 | ||
Object.defineProperty(obj,'counter',{ | ||
value:42, | ||
enumerable:true, | ||
writable:true // writable 可写 | ||
}) | ||
Object.defineProperty(obj,'msg',{ | ||
value:'张紫怡', | ||
enumerable:false, | ||
writable:false //只读 | ||
}) | ||
// writable api 防止对象被修改? | ||
// Object.freeze(obj); // es6 | ||
// obj.a = 2; | ||
// console.log(obj.a); | ||
// key symbol 绝对不会被覆盖 | ||
obj[Symbol()] = '123'; | ||
|
||
for(let key in obj){ | ||
console.log(key,obj[key]); | ||
} | ||
console.log(Object.getOwnPropertyNames(obj)) ; | ||
console.log(Object.getOwnPropertySymbols(obj)) ; | ||
|
||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Document</title> | ||
</head> | ||
<body> | ||
<script> | ||
let o = {}; // 堆内存 | ||
let bValue = 39; | ||
Object.defineProperty(o,'b',{ | ||
get(){ | ||
console.log('你读取了b的属性'); //当你读取了某个属性后, 我们可以做些其他的事情 | ||
return bValue; // 本职工作 | ||
}, | ||
set(newValue){ | ||
console.log('修改了b的值') | ||
bValue=newValue // 本职工作 | ||
} | ||
}) | ||
// 访问了对象的属性 读操作 | ||
console.log(o.b); | ||
o.b = 40; | ||
console.log(o.b); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Document</title> | ||
</head> | ||
<body> | ||
<script> | ||
// 手写Vue | ||
|
||
function observer(value) { | ||
if (!value || (typeof value !== 'object')) { // null | ||
return ; | ||
} | ||
Object | ||
.keys(value) | ||
.forEach((key) => { | ||
// console.log(key) | ||
// 定义响应式 | ||
defineReactive(value, key, value[key]) | ||
}) | ||
} | ||
|
||
function defineReactive(obj, key, val) { | ||
// let val2 | ||
Object.defineProperty(obj, key, { | ||
enumerable: true, // 可枚举 | ||
writeable: true, // 可写 | ||
// 响应对属性的读操作 | ||
get: function reactiveGetter() { | ||
console.log(`读取了${key}属性`) | ||
return val | ||
}, | ||
set: function reactiveSetter(newVal) { | ||
if (newVal === val) { | ||
return; // 值没有变化 | ||
} | ||
val = newVal | ||
cb(newVal); // cb 代表修改可响应对象属性后想做的任何事情 | ||
} | ||
}) | ||
} | ||
|
||
function cb(val) { | ||
console.log('试图更新了', val); | ||
} | ||
|
||
class Vue { | ||
constructor(options) { | ||
this._data = options.data; // 引用式赋值 | ||
// 观察者 | ||
observer(this._data); // 对他监听 | ||
} | ||
} | ||
|
||
let o = new Vue({ | ||
// defineProperty 对象 | ||
data: { | ||
test: "I am test." , | ||
a: 1 | ||
} | ||
}) | ||
|
||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
# 项目实战开发 | ||
|
||
- 写一个面试官喜欢的项目 | ||
- 路由配置安排 五个页面 | ||
- 首页 详情页 登录页面 搜索页 tab level 1 | ||
- 安排的能力点 | ||
- 路由 懒加载 meta 路由守卫 | ||
- 防抖节流 + locaStorage ==> 搜索 | ||
- 组件化能力 | ||
- mockjs 假接口 | ||
|
||
- vuex /pinia 难点 ? | ||
- 搭好架子 pinia 更直观 | ||
1. 数据由中央管理 | ||
本地组件onMounted + api + reateive(state)私有状态 | ||
pinia 全局状态 | ||
root state -> modules -> defineStore | ||
|
||
- 项目的数据管理流程 | ||
1. 接口请求不再属于页面 | ||
状态不再属于组件了,请求也不属于 | ||
2. mock 数据到位 | ||
3. 定义好接口 | ||
4. store 对象 | ||
- store 建一个文件 | ||
- defineStore 方法, 返回state 初始值 | ||
- 页面上 读出来 从中央到本地 | ||
- 请求接口数据, | ||
5. pinia + 父子组件props + emit | ||
6. 对界面效果降级, 基于组件的还原 | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + Vue</title> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script type="module" src="/src/main.js"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.