Vue-20190623点滴
Vue-20190623点滴
推荐黄奕同学vue的学习方式和过程。 https://juejin.im/post/5b18d2d7f265da6e410e0e20
♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣
☻☻☻☻ dom diff实现原理。
☻☻☻☻ vue怎么mvvm实现的机制。 https://segmentfault.com/a/1190000006599500
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
在vue首先创建对象之后
(1)需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。
在刚进入这个对象创建的时候,首先进行的就是遍历这个对象的data部分的遍及,遍历中创建observe对象,用defineproperty,对每一个对象进行数据劫持,这个数据劫持是同步的,只要你改变set和get方法,这个我感觉借鉴了java的这个思想,当data编辑完成后,这个时候生命周期进入到created中,开始进行,模版解析,
(2)compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,在绑定事件的时候,引入了watch这个的类,watch每进行一次绑定,就会获取一次数据,触发一次get请求,然后在get函数中,触发一次订阅请求,放到一个数组里边,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
(3)Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
(4) MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
这里,我们还有一点疑惑,为什么getset是同步的而我们发现操作vue的模版变化到vue的视图更新却是一部的呢。这个尤大大做的处理。
☻☻☻☻ vue proxy与Object.definePropy的区别和联系。
https://juejin.im/post/5bf3e632e51d452baa5f7375
♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣
Vue-20190623点滴的更多相关文章
- js点滴3 vs vue
web Components 学习之路 https://www.cnblogs.com/zhaowinter/p/5447246.html vue学习指路. vue全局配置. ignoredEleme ...
- webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...
- 关于vue 自定义组件的写法与用法
最近在网上看到很多大神都有写博客的习惯,坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴!当然本人能力实在有限写出的文章 ...
- 1.基础篇之vue入门
为了建立高效团队,很多公司会采用全栈工程师,虽然利弊兼有,对于成本优先的创业团队,肯定是首选,特别是对.net生态圈,大部分都是小公司,就更加重要了.这里记录的是对vue的学习点滴,希望对你有所助力. ...
- Vue的入门之安装
vue.js是前端框架中比较热门的,因为工作关系,也加入了浩浩荡荡的学习大潮中,用笔记记录下点滴,便于后面学习查阅! 1 node.js环境的安装包(npm包管理器) 2 vue-cli 脚手架构建工 ...
- vue 自己写组件。
最近在网上看到很多大神都有写博客的习惯,坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴!当然本人能力实在有限写出的文章 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
随机推荐
- arima.predict()参数选择以及相关的一些问题
在使用a ri ma进行模型建立时,需要注意以下几点 1.参数选择上predict必须起始时间在原始的数据及当中的,在下例中就是说2017必须在数据集里面,而2019不受限制,只哟在2017后面就好了 ...
- CentOS7 搭建Fabric 1.0
1.环境搭建 1.1 go的按装及配置 1.1.1下载go压缩包 wget https://dl.google.com/go/go1.9.2.linux-amd64.tar.gz 1.1.2 解压 ...
- NOI2.5 8783:单词接龙
描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙"中 ...
- Windos下的一些命令集合
由于在CMD模式下(也就是命令行)有较多的有用的命令.以下是自己平时所记录下来的以帮助平时的任务. 1. 显示计算机的操作系统 wmic os get osarchitecture /value
- requests快速构造请求头的方法
上图请求头内容,内容多不说,也不确认哪些数据是必须的,网上找到一个懒办法 快速一键生成 Python 爬虫请求头 实战演练 抓取网站:https://developer.mozilla.org... ...
- golang中基本类型存储大小和转换
Go语言的基本类型有: bool string int.int8.int16.int32.int64 uint.uint8.uint16.uint32.uint64.uintptr byte // u ...
- 【学习笔记】Linux基础(一):磁盘分区与Linux的安装(以CentOS为例)
一.磁盘分区与Linux的安装(以CentOS为例) 0.说在安装之前 在Linux中,"一切设备皆文件",设备在/dev这个目录下 /dev/sd[a-p] 表示SCSI/SAT ...
- ThreadLocal源码分析-黄金分割数的使用
前提 最近接触到的一个项目要兼容新老系统,最终采用了ThreadLocal(实际上用的是InheritableThreadLocal)用于在子线程获取父线程中共享的变量.问题是解决了,但是后来发现对T ...
- Python爬虫小结
有些数据是没有专门的数据集的,为了找到神经网络训练的数据,自然而然的想到了用爬虫的方法开始采集数据.一开始采用了网上的一个动态爬虫的代码,发现爬取的图片大多是重复的,有效图片很少. 动态爬虫: fro ...
- vue 插槽 ------ slot 简单理解
solt 插槽 内容分发 什么是插槽 Vue 实现了一套内容分发的 API,将 `` 元素作为承载分发内容的出口. 插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就 ...