实现Vue的v-if/v-show
实现Vue的v-if/v-show
vue 的 v-if 通过注释元素进行占位
文件结构123├── index.html├── index.js└── vue.js
index.html123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<style> .b ...
实现Vue的v-model
实现Vue的v-model目录结构1234.├── index.html├── mvvm.js└── proxy.js
index.html123456789101112131415161718192021222324<body> <div id="app"> <div> <input type="text ...
实现Vue的Diff算法
实现Vue的Diff算法
npx server
目录结构12345678├── index.html└── src ├── Element.js ├── doPatch.js ├── domDiff.js ├── index.js ├── patchTypes.js └── virtualDom.js
index.html1234<body> ...
Vue3利用Reflect和Proxy实现Reactive
Vue3实现数据代理目录结构1234567891011.├── index.html└── src ├── index.js └── vue3 ├── reactivity │ ├── index.js │ ├── mutableHandle.js │ └── reactive.js └── shared ...
实现vue2数据劫持
实现vue2数据劫持
初始化时候就完成了数据劫持
利用object.definedProperty 完成 vm可以直接点出data中的数据
利用观察者模式
区分data是对象还是函数
如果是data是对象进行观察者模式
数据是{}就ObjectProperty
需要递归触发每一层对象的getter
数据如果是[]就自己实现方法
获取整个数组触发 getter, 获取数组下 ...
vue2为什么需要函数返回data和手动实现
data
vue2利用了 Object.defineProperty 数据拦截完成了响应式
本质上是对于属性的监听
当操作同一个对象的时候就会存在引用问题
利用函数 独立作用域就可以解决这个问题
vue3利用的 Proxy 数据劫持完成了响应了
本质上是监听整个对象 与Object.defineProperty截然不同
使用 Proxy 包裹返回后的新对象 只要修改, 原对象也随之更改
由于是 ...
实现一个模板语法
模板语法123456789101112131415161718192021222324<body> <div class='template'></div> <script type="text/html" id='tpl'> <div id='dv'&g ...
