(1).了解VUE3源码管理方式、独立使用reactivity、搭建项目
1.了解VUE3源码管理方式、独立使用reactivity
-
npm init -y
-
npm i @vue/reactivity -D
-
import {reactive}
from
'@vue/reactivity';
-
const state = reactive({
-
name:
'zza',
-
info:{
-
job:
'teacher',
-
student:[
-
{
-
id:
1,
-
name:
'小张'
-
}
-
]
-
},
-
hobby:[
'pinao',
'travel',
'film']
-
})
-
npm i webpack@
4.44
.1 webpack-cli@
3.3
.12 webpack-dev-server@
3.11
.0
-
yarn add html-webpack-plugin@
4.4
.1
-
const path =
require(
'path'),
-
HtmlWebpackPlugin =
require(
'html-webpack-plugin');
-
module.exports={
-
entry:
'./src/index.js',
-
output:{
-
filename:
'bundle.js',
-
path:path.resolve(__dirname,
'dist')
-
},
-
devtool:
'source-map',
-
resolve:{
-
modules:[path.resolve(__dirname,
''),path.resolve(__dirname,
'node_modules')]
-
},
-
plugins:[
-
new HtmlWebpackPlugin({
-
template:path.resolve(__dirname,
'public/index.html')
-
})
-
]
-
}
-
"scripts": {
-
"dev":
"webpack-dev-server",
-
"build":
"webpack"
-
},
(2).认识Proxy与Reflect、实现基本得数据代理
-
import {reactive}
from
'src/vue3/reactivity'
-
const state = reactive({
-
name:
'zza',
-
info:{
-
job:
'teacher',
-
student:[
-
{
-
id:
1,
-
name:
'小张'
-
}
-
]
-
},
-
hobby:[
'pinao',
'travel',
'film']
-
})
-
state.name=
"lgx"
-
import {isObject}
from
'../shared/utils'
-
import {mutableHandler}
from
'./mutableHandler'
-
function reactive(target){
-
-
return createReactiveObject(target,mutableHandler);
-
}
-
function createReactiveObject(target,baseHandle){
-
if(!isObject(target)){
-
return target
-
}
-
const observer =
new
Proxy(target,baseHandle);
-
return observer;
-
}
-
export{
-
reactive
-
}
-
function isObject(value){
-
return
typeof value ===
'object' && value !==
null;
-
}
-
export{
-
isObject
-
}
-
const get = createGetter(),
-
set = createSetter();
-
function createGetter(){
-
return
function get(target,key,receiver){
-
const res =
Reflect.get(target,key,receiver);
-
console.log(
'响应式获取'+target[key]);
-
return res;
-
}
-
}
-
function createSetter(){
-
return
function set(target,key,value,receiver){
-
const res =
Reflect.set(target,key,value,receiver);
-
console.log(
'响应式设置'+key+
'='+value);
-
return res;
-
}
-
}
-
const mutableHandler={
-
get,set
-
}
-
export {
-
mutableHandler
-
}
-
import {isObject}
from
'../shared/utils'
-
import {mutableHandler}
from
'./mutableHandler'
-
function reactive(target){
-
-
return createReactiveObject(target,mutableHandler);
-
}
-
function createReactiveObject(target,baseHandle){
-
if(!isObject(target)){
-
return target
-
}
-
const observer =
new
Proxy(target,baseHandle);
-
return observer;
-
}
-
export{
-
reactive
-
}
state.name="lgx"(3).递归操作、新增与修改得区分
state.hobby[0] = 'conding'
-
import {isObject}
from
'../shared/utils';
-
import {reactive}
from
'./reactivity';
-
import {hasOwnProperty,isEaual}
from
'../shared/utils'
-
-
const get = createGetter(),
-
set = createSetter();
-
function createGetter(){
-
return
function get(target,key,receiver){
-
const res =
Reflect.get(target,key,receiver);
-
console.log(
'响应式获取'+target[key]);
-
if(isObject(res)){
-
return reactive(res);
-
}
-
return res;
-
}
-
}
-
function createSetter(){
-
return
function set(target,key,value,receiver){
-
const isKeyExist = hasOwnProperty(target,key),
-
oldValue = target[key],
-
res =
Reflect.set(target,key,value,receiver);
-
-
if(!isKeyExist){
-
console.log(
'响应式新增'+value);
-
}
else
if(!isEaual(value,oldValue)){
-
console.log(
'响应式修改'+key+
'='+value);
-
}
-
-
return res;
-
}
-
}
-
const mutableHandler={
-
get,set
-
}
-
export {
-
mutableHandler
-
}
-
function isObject(value){
-
return
typeof value ===
'object' && value !==
null;
-
}
-
function hasOwnProperty(target,key){
-
return
Object.prototype.hasOwnProperty.call(target,key)
-
}
-
function isEaual(newValue,oldValue){
-
return newValue === oldValue
-
}
-
export{
-
isObject,hasOwnProperty,isEaual
-
}
-
import {reactive}
from
'src/vue3/reactivity'
-
const state = reactive({
-
name:
'zza',
-
info:{
-
job:
'teacher',
-
student:[
-
{
-
id:
1,
-
name:
'小张'
-
}
-
]
-
},
-
hobby:[
'pinao',
'travel',
'film']
-
})
-
state.name=
"lgx"
-
state.hobby[
0] =
'conding'
(3).总结
vue,proxy代理底层就是重写了get set方法，传入道proxy中，set中判断是否存在，和是否与之前的值一致，来鉴别新增和修改操作。对数组操作方法也有了响应，性能更高了，不是一上来全部递归劫持
转载：https://blog.csdn.net/Yesterday_Tomorrow/article/details/114195736
查看评论