![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 61
会飞的犟驴
这个作者很懒,什么都没留下…
展开
-
【vue高级】MVVM实现原理 第三篇 编译模板Compile
我们已经有了数据,接下来就是要用数据替换掉html中的插值,以 {{}} 为例 先把数据写复杂一点点 data: { a: { a: 1 }, b: 2, }, 页面结构也复杂一点点 <div id="app"> <p>{{a.a}}</p> <p>{{b}}</p> </div> 现在页面显示是这样 我们需要编译一下,编译文档内容,自然需要文档dom和vue实例 我们要把它拿到文档碎片中去操作 function Comp原创 2021-02-04 17:44:51 · 125 阅读 · 0 评论 -
【vue高级】MVVM实现原理 第二篇 数据劫持Observe
回想一下 vue 的使用方法 <div id="app"> {{a}} </div> <script> let vm = new Vue({ el: '#app' data: { a: 1 } }) </script> 我们这一篇的任务就是将 data 里面的属性全部通过 Object.defineProperty() 来进行定义 那么我们接下来便实现 Vue 这个构造函数 用过 vue 的同学都知道,通过 vm.$options原创 2021-02-04 17:10:41 · 245 阅读 · 1 评论 -
【vue高级】MVVM实现原理 第一篇 Object.defineProperty
MVVM就是所谓的双向数据绑定,特点是数据影响视图,视图影响数据;经常用来作对比的有 angular 和 vue,angular 靠的是脏值检测,vue 靠的是数据劫持和发布订阅模式。 下面就来介绍一下 vue 的双向数据绑定是怎样实现的 Object.defineProperty vue 使用的是 Object.defineProperty,顾名思义,是为对象定义属性 新增属性 先来为对象添加一个属性 let obj = {} Object.defineProperty(obj, 'like', {原创 2021-02-04 16:22:19 · 122 阅读 · 0 评论