Observer

VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为： 创建、挂载、更新、销毁 四个模块。 注：在组件的整个生命周期内，钩子函数都是可被 自动调用 的，且生命周期函数的 执行顺序与书写的顺序无关 目录 *图示 1.beforeCreate 2*.created 3.beforeMount 4*.mounted 5.beforeUpdate 6*.updated 7.beforeDestroy 8*.destroyed 9.activated 10.deactivated 11.errorCaptured 注：加*代表相对更重要 *图示 1.beforeCreate 该函数执行在 组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前 ，实例初始化之后被调用。 在该阶段 组件未创建 ， 不能访问数据 ，组件中的data，ref均为undefined。 2*.created 该函数在 组件创建完成后 被立即调用，在这一步，实例 已完成以下的配置 ：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。 但是 还未 渲染成HTML模板，组件中的data对象已经存在，可以对data进行操作了，即 可以访问数据，发请求 ，ref 依旧 是undefined，

一、概念 1. $on("事件名称"，回调函数) 事件绑定，一个事件名称上面可能绑定多个函数 2. $emit("事件名称"，需要传递的值) 事件触发时，会触发当前事件身上所有的函数 3. $off("事件名称"，[需要解绑的函数]) 事件解绑时，若指定解绑函数则只解绑相应函数，否则解绑全部 二、手动封装on，emit，off事件在vue中的作用 | 在vue中进行非父子组件传值时，我们可以通过在vue的原型上添加一个公共的vue实例，组件之间调用这个公共实例的$on/$emit来传递数据，传递的一方调用$emit，接收的一方调用$on。 Vue.prototype.Observer = new Vue(); // 实例化对象 | 这种方式能使所有对象拥有共同的on和emit，但是增加的属性所挂载的实例对象太大，就相当于你的一台法拉利的轮子坏了，你又买了一台新的法拉利并卸掉它的轮子，放到了原来的法拉利上，这十分耗费性能。因此，我们可以手动封装事件，来实现非父子传值。 import Observer from "./Observer"; // 引入封装好的文件 Vue.prototype.Observer = Observer; // 将其添加到vue的原型上 三、封装on，emit，off事件 1. $on：创建一个事件仓库存放事件，判断事件名称是否存在。若不存在

1. Vue快速入门 写了简单的数据双向绑定 2. MVVM架构 架构模型 Model - view- viewModel 3. 编写 MVVM架构-声明MVVM类 4. 声明 TemplateComplier类 模板引擎 准备工作 解析指令 - 把模板放入内存中去 - 解析表达式 V-model V-text 双向绑定 5. 编译模板 -把模板放入缓存 6. 编译模板 -v-text指令解析 7. 编译模板 -v-model指令解析 8. 编译模板 -表达式解析 9. 双向绑定 -视图到模型 视图 -> 模型（观察者模式，加事件） 模型 -> 视图（发布 - 订阅模式） 10. 双向绑定 -添加订阅者 发布 - 订阅模式 -- 确定订阅者 给 text 和 model 都加上订阅者 11. 双向绑定 -数据挟持准备 发布 - 订阅模式 -- 确定订阅者 -- 使用发布者管理 12. 双向绑定 -添加发布 双向绑定的原理解释如下： ue实现数据双向绑定主要是：采 用数据劫持结合发布者 -订阅者模式 的方式，通过 Object.defineProperty（） 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object

前言：本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么，如下动图： 0、什么是双向数据绑定 　　单向数据绑定：把Model 绑定到View上,当我们用js修改模型 Model 时候，视图View上对应的内容也会改动，这就是 数据动，页面动 。 　　 双向数据绑定：简言之 数据动 页面动，页面动，数据动, 典型的应用就是在做表单时候，输入框的内容改动后，跟该输入框的value 的值改动。 　　 看vue 官网上的这个V-model 的演示案例： 1、双向数据绑定的好处 　　要说出这个好处的时候，也只有在实际场景中才能对应的显示出来。比如我们需要实时显示数据，我们一边说话，一边实时显示我们说的话的文字内容，等等。这让我想起了去年参加云栖大会，台上的大佬一边说话，下面的字幕实时更新。（当然实现这个技术有很多技术点，我们不讨论这个内容，小编也才疏学浅，搞不懂） 以上的都是废话，我们直接看看怎么实现这个双向数据绑定。 一、实现原理 　　Vue实现双向数据绑定的原理：数据劫持 + 发布订阅模式（有的也称为观察者模式） 　　数据劫持的核心技术： Object.defineProperty() 　　 * *vue 3.0 已经用的不是这个技术了，采用是 原生的

前言 　　今天我们一起看看这个观察者模式，这个模式简单来说就是一个发布订阅类似的模式。按照名字来理解也就是存在一个观察者和一个被观察者。说几个例子给大家听，大家应该就明白了。例如在我们现在通过银行卡支付之后，会收到银行发过来的提示信息。例如当我们话费余额或者流量不足之时也会收到提示信息。这其中的逻辑帮我们理解观察者模式。当我们观察的一个对象发送变化之时就会触发某一机制。然后做出一系列的措施。 观察者模式介绍 一、 来由 　　在软件系统中我们经常会遇到对象之间存在一对多的关系，当一个对象被修改时，将会自动通知其依赖的对象。当然如果这些依赖关系过于紧密对于系统来说又不好抵御其变化。所以我们又需要实现其结构的松耦合。 二、 意图 　　定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。 三、 案例图 四、 观察者代码示例 看上面的案例图、我们来细细说下这其中的四种角色： 抽象主题角色： 将所有的观察者引用保存在一个列表，同时包含增加删除观察者的操作，包含调用抽象观察者的操作方法。 具体主题角色： 实现其抽象主题的抽象方法。 抽象观察者： 为所有的具体观察者定义一个接口，在得到主题通知时更新自己。 具体观察者： 实现抽象观察者定义的接口，是自身的状态与主题的状态相对应。 到这里我们简单的介绍了下观察这模式的原理

　　一、实例化和导入 import Swiper from 'swiper'; let viewSwiper; let previewSwiper; 在外面声明全局变量，然后在初始化方法里面实例化swiper实例，该初始化方法在mounted里面调用。 二、坑s 　　1. 首先在vue里面初始化时数据肯定不是一成不变的，而是通过后台请求过来，或者父组件传入进来的，为了满足swiper能够动态监听数据，并刷新显示效果，需要添加上下面两个配置： observer:true, //修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper 2. 当设置loop：true，可能会导致图片的点击事件的失效。原理是：swiper动态的渲染dom时，只是‘复制粘贴’，且并没有把dom中的监听事件给‘复制’进来，进而导致事件监听事件失效。 　 在网上搜了好多，说是用swiper实例化中的点击回调函数（如下） 　 但依旧监听不到这个回调，后来把实例化中的 allowTouchMove: false, 注释掉，发现竟然可以了，懵逼~ on:{ click: function(e) { viewSwiper.slideTo(this.clickedIndex) } } 3.第三个问题是初始化数据之后

持续更新内容涵盖：Java、MyBatis、ZooKeeper、Dubbo、Elasticsearch、Memcached、Redis、MySQL、Spring、Spring Boot、Spring Cloud、RabbitMQ、Kafka、 Linux 等技术栈（滴滴滴.会持续更新哦，记得点赞、关注、分享三连击哈）. 1. ZooKeeper 面试题？ ZooKeeper 是一个开放源码的分布式协调服务，它是集群的管理者，监视着集群 中各个节点的状态根据节点提交的反馈进行下一步合理操作。 最终，将简单易用的接口和性能高效、功能稳定的系统提供给用户。 分布式应用程序可以基于 Zookeeper 实现诸如数据发布/订阅、负载均衡、命名 服务、分布式协调/通知、集群管理、Master 选举、分布式锁和分布式队列等功能. Zookeeper 保证了如下分布式一致性特性 ： 1、顺序一致性 2、原子性 3、单一视图 4、可靠性 5、实时性（最终一致性） 客户端的读请求可以被集群中的任意一台机器处理， 如果读请求在节点上注册了 监听器，这个监听器也是由所连接的 zookeeper 机器来处理 。 对于写请求，这些 请求会同时发给其他 zookeeper 机器并且达成一致后，请求才会返回成功. 因此， 随着 zookeeper 的集群机器增多，读请求的吞吐会提高但是写请求的吞吐会下降。

3台机器：192.168.1.7、192.168.1.8、192.168.1.9 多少台都行，官方建议奇数台。 1、分别安装jdk、配置环境变量 zk依赖jdk，所以需要先安装jdk 2、下载zk，解压，在zk根目录下新建目录data，data下新建文件myid 3、将conf下的zoo_sample.cfg复制一份，重命名为zoo.cfg，修改内容如下 2181是zkCli、zkServer通信的端口，2888是zkServer节点之间通信使用的端口，3888是follower选举leader使用的端口。 机器可以用ip指定，也可以用域名指定。 4、将zk复制到其它机器上，分别设置myid文件的内容为0、1、2 myid唯一标识一个zkServer节点，要和zoo.cfg中的配置保持一致，比如server.0=192.168.1.7:2888:3888，那192.168.1.7这台机器的myid就写为0，要对应。 有的习惯从0开始，有的习惯从1开始，都行。 5、分别开启防火墙的2181、2888、3888端口 6、分别启动zkServer，会自动选举leader，分配follower、observer 使用 ./zkServer.sh status 分别查看节点状态，有1个是leader，其它是follower、observer。 来源： oschina 链接： https:/

Vue.js面试题整理 一、什么是 MVVM ？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象（桥梁）。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。 有相同父元素的子元素必须有 独特的key 。重复的key会造成渲染错误。 最常见的用例是结合 v-for: 1 2 3 < ul > < li v-for="item in items" :key="item.id">...</ li > </ ul > 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用: 完整地触发组件的生命周期钩子 触发过渡 1 2 3 < transition > < span :key="text">{{ text }}</ span > </ transition > 当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。 2、vue中子组件调用父组件的方法 子组件调用父组件的方法可以使用this.$emit() 3、vue等单页面应用及其优缺点 优点： 1、具有桌面应用的即时性、网站的可移植性和可访问性。 2、用户体验好、快，内容的改变不需要重新加载整个页面。 3、基于上面一点，SPA相对对服务器压力小。