Skip to content

Commit

Permalink
vue3
Browse files Browse the repository at this point in the history
away-2 committed Feb 26, 2023
0 parents commit 44bb401
Showing 48 changed files with 2,853 additions and 0 deletions.
52 changes: 52 additions & 0 deletions 2.html
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>
29 changes: 29 additions & 0 deletions 3.html
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>
68 changes: 68 additions & 0 deletions 4.html
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>
24 changes: 24 additions & 0 deletions bilibili_demo/.gitignore
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?
3 changes: 3 additions & 0 deletions bilibili_demo/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}
32 changes: 32 additions & 0 deletions bilibili_demo/README.md
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. 对界面效果降级, 基于组件的还原


13 changes: 13 additions & 0 deletions bilibili_demo/index.html
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>
Loading
Oops, something went wrong.

0 comments on commit 44bb401

Please sign in to comment.