精华内容
下载资源
问答
  • 我们认为,发展必须是一种令人愉快的,富有创造力的经历,才能真正实现。 Laravel减轻了许多Web项目中使用的常见任务,从而减轻了开发过程中的痛苦,例如: 。 。 用于和存储的多个后端。 富有表现力,直观的 ...
  • 最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个...
  • 最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个...

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等。闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端

    第一步:安装依赖

    npm install stompjs

    运行npm run dev可能会报错,提示安装net,执行命令

    npm install --save net

    第二部:组件中应用stompjs

    组件中的js部分

    <script>
    import Stomp from 'stompjs'
    ---在sysconstant.js配置文件中配置mqtt的服务端地址,账号等信息
    import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from '../../config/sysconstant.js'
    export default {
      name: 'entry',
      data () {
        return {
          client: Stomp.client(MQTT_SERVICE)
        }
      },
      created () {
        this.connect()
      },
      methods: {
        onConnected: function (frame) {
          console.log('Connected: ' + frame)
          var topic = '/topic/AllCustomer'  
    ---订阅频道
          this.client.subscribe(topic, this.responseCallback, this.onFailed) 
        },
        onFailed: function (frame) {
          console.log('Failed: ' + frame)
        },
        responseCallback: function (frame) {
          console.log('responseCallback msg=>' + frame.body)
          ---接收消息
        },
        connect: function () {
          ---初始化mqtt客户端,并连接mqtt服务
          var clientid = util.uuid()
          var headers = {
            'login': MQTT_USERNAME,
            'passcode': MQTT_PASSWORD,
            'client-id': clientid
            // additional header
          }
          this.client.connect(headers, this.onConnected, this.onFailed)
        }
      }
    }
    </script>

    配置文件sysconstant.js
    /**
     * 配置文件,记录系统中固定的参数
     */
    export const MQTT_SERVICE = 'ws://127.0.0.1:61623/stomp' // mqtt服务地址
    export const MQTT_USERNAME = 'admin' // mqtt连接用户名
    export const MQTT_PASSWORD = 'password' // mqtt连接密码

     

     

    转载于:https://www.cnblogs.com/liemei/p/7064386.html

    展开全文
  • 响应式作为vue的代表特点之一, 意义非凡, 响应式的含义也就是: 我们更改了js中的数据, 页面会同步进行更新, 同理, 页面中的数据发生了变化, js也会得到通知从而更改数据 来看看实例 <!-- html结构相当的简单, ...

    what is 响应式?

    响应式作为vue的代表特点之一, 意义非凡, 响应式的含义也就是: 我们更改了js中的数据, 页面会同步进行更新, 同理, 页面中的数据发生了变化, js也会得到通知从而更改数据

    来看看实例

    <!-- html结构相当的简单, 一个id为app的div, 之后我们会让vue来接管该div -->
    <div id='#app'></div>
    
    const vm = new Vue({
        el: '#app',
        data: {
            msg: 'helloWorld'
        }
    })
    

    当我们在页面中直接通过控制台更改vue实例上的msg属性的时候, 其实页面也同步渲染了, 这就是响应式, 如下图

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h50TuXii-1591941872056)(./响应式.gif)]

    how to do 响应式?

    可能很多朋友都或多或少的了解过vue的响应式是通过Object.defineProperty实现的, 响应式系统的核心原理确实是如此, 但是远不止于此, 话不多说, 我们从最基本的Object.defineProperty来看看vue优等生的完美作业之响应式系统

    笔者也是自己的学习和领悟, 希望多多交流, 如有问题请及时指出

    • Object.defineProperty

      这哥们用来给一个对象进行代理, 当我们对一个对象进行代理以后, 那么对这个对象进行任何的访问都将得到监控

      在现实中, 我们可以理解为明星艺人和经纪人的关系, 当有经纪人为艺人进行代理业务以后, 以后每一个跟艺人相关的操作和业务都会被经纪人监控到, 经纪人也可以选择是否让艺人来承接这个业务或者参加某个活动等, 如果你还是不太理解, 那么我们来看看实例, 我相信你会对Object.defineProperty更加的明白

      // 我们实际上是要在用户修改某个属性的时候, 我们要得到通知, 就这么简单
      let pengyuyan = {
          name: '彭于晏',
          address: '地球的某个地方'
      }
      
      pengyuyan.address =  '台湾';
      

      像上面这样操作我们能够得到通知吗? 答案是否定的, 因为更改属性一瞬间就发生了, 我们都妹机会来捕捉他的变化, 所以我们来看看如下这样写

      let pengyuyan = {
          name: '彭于晏',
          address: '地球的某个地方'
      }
      
      let pengyuyanName = pengyuyan.name;
      Object.defineProperty(pengyuyan, 'name', {
          get() {
              console.log('有人要找彭于晏啦, 快看看是不是吴彦祖');
              return pengyuyanName;
          },
          set(newVal) {
              console.log('有人要改彭于晏的名字啦, 快点来人看看在他改名字之前我们是不是要做点什么啊');
              pengyuyanName = newVal;
          }
      })
      

      Object.defineProperty给某个对象的某个属性进行代理以后, 会给该对象的被代理属性提供一个getset方法, get用来监控之后任何操作对于被代理属性的访问, set用来监控之后任何操作对于被代理属性的修改

      于是当我们对pengyuyan对象的name的属性进行读和写的时候, 会在读和写的时候得到提示获得一定的反馈, 如下图

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oXxKbbKW-1591941872058)(./pengyuyan.gif)]

      于是乎, 我们便可以用我们的方式来模拟一下vue的响应式

      <!-- 这是一开始页面中渲染的内容, 我们要做的就是当js的数据改变的时候页面要相应的给予反馈 -->
      <div id='#app'>
      </div>
      
      const pengyuyan =  (function () {
          const app = document.getElementById('app');
          const pengyuyan = {
              name: 'pengyuyan',
              age: 18
          }
      
          function init() {
              render(pengyuyan.name);
              observer();
          }
      
          // 负责渲染的函数
          function render(value) {
              app.innerHTML = value;
          }
      
          function observer() {
              // 代理
              let pengyuyanName = pengyuyan.name;
              Object.defineProperty(pengyuyan, 'name', {
                  get() {
                      return pengyuyanName;
                  },
      
                  set(newVal) {
                      pengyuyanName = newVal;
                      render(pengyuyanName);
                  }
              })
          }
      
          init();
      
          return pengyuyan;
      }())
      

      上面的代码其实写的非常的简单, 如果你看不懂的话笔者建议你补一补js的基础知识, 上面的实现结果也非常的简单, 如下

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oj1is2LB-1591941872059)(./实现响应式.gif)]

      我们会发现, 这就把vue的响应式貌似实现了? 笔者之前也说过这确实是vue响应式的核心原理, 但要就说这就是vue的响应式, 那还远远不够, vue考虑到的东西更加的多更加的丰富, 但是有了这个作为基础, 笔者相信后面的操作不太会难得到你


      首先要知道vue的响应式系统怎么实现, 我们必须要完整的知道vue的响应式系统到底能做哪些事儿, 不能做哪些事儿

      • vue会遍历data对象中的所有属性, 使用Object.defineProperty进行追踪

      • Object.defineProperty的追踪是递归进行的, 意味这如果发生引用值嵌套引用值的情况, vue也能够很好的监测到

      • vue在某种情况下并不能监测数组和对象的改变

        • 通过数组的索引去修改数组
        • 通过数组的长度去修改数组
        • 直接对对象进行增加属性操作
        • 直接对对象进行删除属性操作
        • 数组有7个数组变异方法可供开发者直接操作数组分别是

          push, pop, unshift, shift, reverse, sort, splice

      • vue实例上提供$set$delete供开发者对数组和对象进行增加和删除操作

      • vue的响应式系统是异步的, vue只会响应最后一次数据的变更并对dom进行更新

      • 在数据变更时, vue会跟虚拟dom进行比对, 如果此次变更的值跟上一次变化的值没有区别, 则vue不会进行dom的更新

      ok, 笔者的理解基本上就这么多, 如有遗漏纯属忘记,还望海涵

      那么我们可以一步一步来用我们的方式来复刻vue的这套响应式系统

      关于接下来要写的所有的代码, 笔者尽量会以一种小白都可以看的懂的写法去实现这些功能, 所以并不直接是vue的源码, 只能理解为用比较easy的代码来让你大概知道vue响应式的核心工作原理, 同时因为vue源码中的各个功能之间的关联性极强, 涉及到的代码逻辑比较复杂, 比如观察者模式, wachter, observer和异步队列等, 笔者不会将所有的流程都会写的很清晰, 但是会在后面你看懂了笔者这份简易代码以后, 当你上github查看vue真正的开源代码中响应式这块的处理的时候一定会更加的得心应手

      1. 首先我们如何对一个对象上所有的属性进行追踪: 对一个属性追踪使用Object.defineProperty, 对多个属性追踪我们使用多个Object.defineProperty不就ok了, 在这个过程中我们唯一要注意的就是对象中如果依旧嵌套对象的情况需要使用到递归, 这里可能需要比较扎实的递归知识
      const data =  (function () {
          const data = {
              name: 'thor',
              age: 18,
              sex: 'male',
              address: {
                  province: 'guangdong',
                  city: 'shenzhen'
              },
              friends: [
                  {
                      name: 'loki',
                      age: 19
                  }
              ],
              cat: {
                  name: 'lulu',
                  skill: ['eat', 'sleep']
              }
          }
      
          function init() {
              observer(data, '');
          }
      
          /**
           *提供一个observer观察方法, data为需要被监控的对象 
              nameSpace: 命名空间, 他可以更加精准的帮助我们知道我们现在修改了哪个属性的值
              **/
          function observer(data, nameSpace) {
              // 循环给对象上的每一个属性进行
              for (let prop in data) {
                  defineReactive(data, prop, data[prop], nameSpace);
              }
          }
      
          /**
           * defineReactive方法是真正用来监测的方法
           * data: 当前需要代理的对象, 
              prop: 需要代理对象的属性
              value: 控制该属性的value值
              **/
          function defineReactive(data, prop, value, nameSpace) {
              if (typeof data[prop] === 'object') {
                  // 如果传递进来的属性是一个对象, 那么我们其实是需要递归监测的
                  observer(data[prop], prop + '.');
              }
              Object.defineProperty(data, prop, {
                  get() {
                      return value;
                  },
                  set(newVal) {
                      console.log('我在修改' + nameSpace + prop + '的值');
                      value = newVal;
                  }
              })
      
          }   
      
          init();
      
          return data;
      
      }())
      

      ok, 关于多个属性的监测和递归其实是很简单的, 实现后效果如下

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7TZw8PSv-1591941872060)(./递归监测.gif)]

      1. 我们知道vue对于数据的更新是选择性的, 他只会在真正需要更新的时候才会去更新, 而如果数据经过vue的diff算法比对以后不需要更新, 则vue就会放弃本次更新

      所以我们要在代码中增加如下代码(新增的代码会打上注释)

      const data =  (function () {
          const data = {
             ...
          }
      
          function init() {
             ...
          }
      
          function observer(data, nameSpace) {
              ...
          }
      
          function defineReactive(data, prop, value, nameSpace) {
              ...
              Object.defineProperty(data, prop, {
                  get() {
                      return value;
                  },
                  set(newVal) {
                      // 同时在这块我们需要处理一下是否需要更新
                      const o = Object.assign({}, data); // 避免拿同样的地址
                      console.log('我在修改' + nameSpace + prop + '的值');
                      value = newVal;
                      // 如果比较函数通过比较得出确实需要更新, 则执行render刷新页面, 否则不刷新
                      if(compare(o, data)) render();
                  }
              })
      
          }   
      
          /**
           * 我们新提供一个compare方法用来比较是否需要重新渲染页面
          * o: 老的对象
          * n: 新的对象
          * 如果返回true则代表确实需要更改, 返回false则不需要更改
          * */
          function compare(o, n) {
              if ((o == null && n !== null) || (o !== null && n == null)) return true
              // vue内部实现这块比较的复杂, 涉及到虚拟dom和diff算法, 而且vue的 o参数 代表的虚拟dom 是一颗树形结构 
              // 笔者这里就直接用使用递归for循环来草率对比一下
              if (o === n) return false;
              for (let prop in o) {
                  if (typeof o[prop] === 'object') {
                      if (o[prop].length !== n[prop].length) return true;
                      if (Object.keys(o[prop]).length !== Object.keys(n[prop]).length) return true;
                      compare(o[prop], n[prop]);
                  } else {
                      if ((o[prop] !== n[prop])) return true;
                  }
      
              }
              return false;
          }
      
          /**
           * 同样新提供一个render方法, 他代表刷新页面的操作
           由于刷新页面操作涉及到模板字符串的替换之类的功能
           这里只用一个打印语句做提示
           **/
          function render() {
              console.log('compare监测到两个对象不一致, 所以页面是需要重新渲染的')
          }
      
      
          init();
      
          return data;
      
      }())
      

      在我们增加了compare和render方法以后, 按需渲染的功能也能够达到了, 如下图

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2L8OaV1M-1591941872061)(./新增render和compare方法.gif)]

      1. 我们如何缓存更改, 只响应最后一次数据的变化, 且不论中途数据产生了多少次变化, 只要最后一次数据变回了原样也不会修改呢?

      没错, 答案就是异步, 如果你对事件循环(eventloop)足够清晰的话, 我们知道异步是一定会等到当前执行栈中的全部同步代码都走完才会去执行异步任务的, 异步中微任务又是快于宏任务执行, 而我们既需要只响应最后一次请求又需要尽可能快的去响应操作那么我们势必是要将更新的render函数丢进微任务的, 来看代码

      同样更改的代码会打上注释

      
        const data =  (function () {
          const data = {
             ...
          }
      
          const renderFlag = false; // 渲染锁, 如果锁一旦开启则不会提交render请求进异步队列
      
          function init() {
             ...
          }
      
          function observer(data, nameSpace) {
              ...
          }
      
          function defineReactive(data, prop, value, nameSpace) {
              ...
              Object.defineProperty(data, prop, {
                  get() {
                      return value;
                  },
                  set(newVal) {
                      const o = Object.assign({}, data); 
                      console.log('我在修改' + nameSpace + prop + '的值');
                      value = newVal;
                      // excutorRender会在这里执行
                      excutorRender(o, data);
                  }
              })
      
          }   
      
          /**
           * 我们提供一个执行render的方法, 同样这样做的初衷也是我们想在render之前做一些事情 
           **/
          function excutorRender(o, n) {
               if(renderFlag) return;
               renderFlag = true; // 开启锁
               Promise.resolve().then(() => {
                   renderFlag = true; // 关闭锁
                   // 真正对比
                   if(compare(o, n)) render();
               })
          }
      
          function compare(o, n) {
             ...
          }
      
          function render() {
              ...
          }
      
      
          init();
      
          return data;
      
      }())
      
       // 我们在这进行测试
       data.name = 'thor';
       data.name = 'nina';
       data.name = 'jack';
      
       data.address.city = 'guangzhou';
       data.address.city = 'guangzhou';
       data.address.city = 'nanjing';
      
       // 上面修改了name和city值各3次, 且最后值都发生了变化, 我们来看看render方法走了几次
      

      执行结果如下

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xu361sq3-1591941872062)(./异步加载结果1.png)]

      那么如果我们之前更改n次, 最后一次将数据改回原状, 页面会不会重新渲染呢?

      ...
      data.name = 'thor';
      data.name = 'nina';
      data.name = 'jack';
      data.name = 'thor'; // 第四次我们又将name值改回了一开始的thor
      
      data.address.city = 'guangzhou';
      data.address.city = 'guangzhou';
      data.address.city = 'nanjing';
      data.address.city = 'shenzhen'; // 城市也被我们该回了最初的shenzhen
      

      结果如下

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W6X6voTi-1591941872063)(./异步加载结果4.png)]

      很显然, 页面没有进行最后的渲染, 说明我们的目标达成了

      1. 我们的数据结构中存在数组, 但是我们一直在回避数组的更改, 这下我们来处理一下数组, 按照之前所说, 直接修改数组的长度和通过索引来修改数组是不会导致页面重新渲染的

      如果你js基础够好的话, 数组也是特殊的对象, 那么如果我们使用Object.defineProperty来监控数组的变化的话, 那么是一定支持修改数组下表来修改数组值的, 实际上vue为什么不允许呢? 本质上他是可以被修改的, 但是尤雨溪我们的尤大神说了一句特别自信的话:

      通过数组下标去修改数组导致页面重新渲染的话, 用户体验和性能不成正比

      于是乎vue就不支持直接通过数组的索引来修改数组了, 我们也走起

          const data =  (function () {
          const data = {
             ...
          }
      
          const renderFlag = false; // 渲染锁, 如果锁一旦开启则不会提交render请求进异步队列
      
          function init() {
             proxyArray(); // 我们执行代理数组方法
             ...
          }
      
          function observer(data, nameSpace) {
              ...
          }
      
          function defineReactive(data, prop, value, nameSpace) {
              // 所以这里的typeof 的结果为object就不能用在这了, 我们必须绝对判断他为对象, 所以数组进不去我们自然没办法通过索引修改
              if (data[prop] instanceof Object) {
              ...
              }
              ...
          }   
      
          function excutorRender(o, n) {
               ...
          }
      
          function compare(o, n) {
             ...
          }
      
      
          /**
           * 提供一个代理数组的方法
              * **/
          function proxyArray() {
              // 我们这里先什么都不做
          }
      
      
          function render() {
              ...
          }
      
      
          init();
      
          return data;
      
      }())
      

      这个时候我们通过数组的索引去更改数组的值则不会被感知到, 实际上vue也是通过这种方式来屏蔽用户对下标的修改, 如图

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCl9I4eM-1591941872063)(./屏蔽数组索引.gif)]

      1. ok, 但是我们知道vue是给数组提供了7个变异方法, 当通过这种方式更改数组的时候, 数组是完全可以感知到的, 那么这都是怎么实现的呢? 如下
      ...
       let newArrProto; // 声明新的变量等下用来继承数组原型
      
       // 我们先补全proxyArray函数就好
       function proxyArray(data, prop) {
           const arrMethods = ['push', 'pop', 'unshift', 'shift', 'sort', 'reverse', 'splice'];
      
           const arrProto = Array.prototype; // 拿到数组的原型
           newArrProto = Object.create(arrProto);
      
           arrMethods.forEach(ele => {
               newArrProto[ele] = function() {
                   arrProto.call(this, ...arguments); 
                   // 我们在每次使用了数组的原型方法以后直接重新渲染页面
                   render();
               }
           })   
      
       }
      
       // 在defineReactive中, 我们还要做一些手脚
       function defineReactive(data, prop, value, nameSpace) {
           if(data[prop] instanceof Array) {
               data[prop].__proto__ = newArrProto; // 直接更改data[prop]的原型指向
           }
           // 如果你使用的是instanceof 这里记得要改为elseif, 因为数组 instanceof Object也会返回true
           // 或者你直接使用constructor来判断则不用改成else if
           else if(data[prop] instanceof Object) {
               ...
           }
       }
      
      ...
      

      经过上述操作以后, 我们其实已经可以通过数组变异方法来监控数组的变化了, 如图

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OodNMfDQ-1591941872064)(./数组变异方法.gif)]

      1. 最后一小点, $set$delete
      ...
      // 这两个方法其实都是vue原型上的方法, 经过我们之前这么长的铺垫, 这两个方法已经非常的好写了
      function set(data, prop, newVal) {
          data[prop] = newVal;
          render();
      }
      
      function delete(data, prop) {
          detele(data, prop);
          render();
      }
      
      // 就不演示了, 真的不要太easy
      ...
      

      ok, vue的响应式原理, 笔者应该是一个一个都已经写完了, 希望可以对你产生一些帮助, 这也仅仅只是原理, vue官方对于代码的控制远不是笔者可以比的, 未来在路上, on the road 一起加油。


      传送门

    一、该篇博客涉及所有代码github链接:

    代码链接

    二、vuejs源码github链接

    vue源码链接

    三、掘金上笔者认为写的比较好的真正的vuejs的响应式源码剖析博客

    辉卫无敌对于vue响应式源码的剖析

    展开全文
  • 其实Electron的系统通知比较简单,是用HTML5的Notification实现的,但是在这儿需要注意的是,windows平台发送通知是需要为程序设置appId(下一篇文章我们讲解下Electron怎么打包,怎么设置应用程序图标)。...

    前几篇文章,我们介绍了一些开发中经常用到的功能,这篇文章我们主要是讲解下怎么发送系统通知,设置托盘

    1.系统通知

    其实Electron的系统通知比较简单,是用HTML5的Notification实现的,但是在这儿需要注意的是,windows平台发送通知是需要为程序设置appId(下一篇文章我们讲解下Electron怎么打包,怎么设置应用程序图标)。

    通知一共有两种调用方式

    • HTML5 Notification API(渲染进程中使用)
    • Notification模块(主进程中使用)

    接下来,我们新建一个页面,来测试下渲染进程中怎么使用系统通知。

    <template>
      <div>
        <el-button @click="sendNotification">发送系统通知</el-button>
      </div>
    </template>
    <script>
    export default {
      name: 'DemoTest',
      methods: {
        sendNotification () {
          const myNotification = new Notification('标题', {
            body: '通知正文内容'
          })
          myNotification.onclick = () => {
            console.log('通知被点击')
          }
        }
      }
    }
    </script>
    

    系统通知

    2.设置托盘

    托盘属于系统级的操作,所有这个也是在主进程中设置的。在这个需要注意的是,设置托盘必须在程序ready之后。

    我们为程序设置了托盘图标和菜单。点击托盘图标重新展示主窗口。

    app.on('ready', async () => {
      if (isDevelopment && !process.env.IS_TEST) {
      }
      // 设置托盘
      const tray = new Tray('./src/assets/icon_tray.png')
      // 设置托盘菜单
      const trayContextMenu = Menu.buildFromTemplate([
        {
          label: '打开',
          click: () => {
            win.show()
          }
        }, {
          label: '退出',
          click: () => {
            app.quit()
          }
        }
      ])
      tray.setToolTip('myApp')
      tray.on('click', () => {
        win.show()
      })
      tray.on('right-click', () => {
        tray.popUpContextMenu(trayContextMenu)
      })
      // 创建渲染窗口
      createWindow()
    })
    

    还有一点需要注意的是,我们之前的文章中,点击自定义的关闭图标,调用的方法是

    app.close()
    

    这样会导致我们直接关闭程序,点击托盘也会报错,所以我们这儿需要改为

    app.hide()
    

    好了,本篇文章的所有内容就讲完了,下一篇文档来教大家怎么打包应用和设置应用图标

    更多内容请关注公众号
    在这里插入图片描述

    展开全文
  • new Vue中包含两大系统: 1 响应系统: 可以实时监控data中变量的变化,并能在变量发生变化时,自动发出通知. 原理:将data放入 new Vue中后,new Vue自动为每个变量添加了访问器属性,这些访问器属性,直接...

    new Vue中包含两大系统:

    1 响应系统:

           可以实时监控data中变量的变化,并能在变量发生变化时,自动发出通知.

           原理:将data放入 new Vue中后,new Vue自动为每个变量添加了访问器属性,这些访问器属性,直接隶属于new Vue对象,保护/监控data中的变量。而且所有访问器属性中的set方法中,都内置了通知机制。只要试图修改data中的变量,只能经过访问器属性,自然就会触发通知:xx变量值变了。

    2  虚拟DOM树

           Vue内存中进保存可能变化的DOM元素和可能变化的属性的简化版的DOM树(真实DOM树无关的数据太多,遍历和查找速度太慢)

           虚拟DOM的优点:

           ① 小,仅包含可能变化的元素和可能变化的属性

           ② 遍历快

           ③ 自动,虚拟DOM树已经封装了增删改查的操作

           ④ 效率高,进修改个别可能受影响的元素和可能受影响的属性。多数无关的元素和属性不受影响。

    原理:

               首次new Vue()时,传入了el:"#app"参数

               然后new Vue()找到#app这个父元素,扫描其内部的子元素

               边扫描,边创建虚拟DOM树,仅保存可能变化的元素和可能变化的属性

               首次将data中的变量,替换DOM树中的{{}}语法

    当变量发生变化时:

               首次触发这个变量的访问器set方法,发出通知,通知虚拟DOM树,哪个变量发生变化;

               然后new Vue()遍历虚拟DOM树,找到可能发生变化的元素和属性;

               最后,利用已经封装好的DOM的增删改查方法,找到发生变化的元素和属性,修改属性。

               

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    1

     

    展开全文
  • vue最核心的两个功能,一是响应式的数据绑定系统,二是组件系统实现双向数据绑定: a、实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。 b、实现一个订阅者Watcher。每个Watcher都...
  • 该组件在诸如Antd或者elementUI等第三方组件库中也都会出现,主要用来为用户提供系统通知信息的.我们在调用它时并不像其他组件一样,通过引入组件标签来调用。比如Modal组件,我们一般这样来调用:<Modal title=...
  • 一、SpringBoot 整合阿里云...短信的内容多用于企业向用户传递验证码、系统通知、会员服务等信息。2、开通短信服务(1)进入阿里云官网,找到 短信服务【官网地址:】 https://www.aliyun.com/ 【官方文档:】 h...
  • VUE源码解析——Object变化侦测原理解析一、什么是变化侦测?二、Object变化侦测1.Object.defineProperty方法2.依赖收集什么是依赖收集何时收集依赖?何时通知依赖更新?依赖管理器Dep类Watcher类不足之处Object变化...
  • 在前端项目中,有时会需要通知、提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息。 1. 实例 在Vue组件的methods内,调用如下代码 this.$toast({ content: "可自动关闭", ...
  • ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统、表格、表单、树形菜单、通知等。对于搞后台管理界面的项目,特别是不需要考虑兼容ie8、ie9以下的项目、...
  • vue + webSocket 实时任务信息通知 WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的...
  • 系统通知其实Electron的系统通知比较简单,是用HTML5的Notification实现的,但是在这儿需要注意的是,windows平台发送通知是需要为程序设置appId(下一篇文章我们讲解下Electron怎么打包,怎么设置应用程序图标)。...
  • 一、SpringBoot 整合阿里云...短信的内容多用于企业向用户传递验证码、系统通知、会员服务等信息。2、开通短信服务(1)进入阿里云官网,找到 短信服务【官网地址:】 https://www.aliyun.com/【官方文档:】 https...
  • 概述: 在前端项目中,有时会需要通知、提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息。 1. 实例 在Vue组件的methods内,调用如下代码 this.$toast({ content: "可自动...
  • vue后台管理系统(通用模板)

    千次阅读 2020-04-06 22:46:52
    后台管理通用框架 源码: GitHub 目前 包含 动态侧边导航栏渲染,面包屑,通知,主题,富文本等… ... 2.工作台 3.通知 4.主题 ...6.通知详情 ...目前可实现Excel表格下载,请见MarkDown文档,下一步规划图标功能 ...
  • 系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片。 vue-quill-editor官网: https://www.npmjs.com/package/vue-quill-editor 注: 博客:...
  • 当用户进行某个操作,需要通知其他用户时,其他用户可以实时接收消息。 工程为 Spring cloud + VUE 。 技术实现: Spring Cloud、Spring boot、vue、webSocket等。 流程 用户登录系统→连接到socket服务进行...
  • Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。 双向数据绑定,简单点来说分为三个部分: 1、...
  • Aries是基于Gin + GORM + MySQL + Vue + H5开发的现代化博客系统,博客主要分为后台管理端和展示端。 后台管理端采用前逐步分离的开发模式,通过JSON格式数据进行前干预。 展示端基于传统模式开发,采用Go Template...
  • 响应式系统实现 响应式原理 Vue.js的响应式原理依赖于Object.defineProperty,尤大大在Vue.js文档中就已经提到过,这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来...
  • 短信验证码登陆受行业清退政策限制必须关闭,经与短信通道供应商紧急协商,特殊申请...海象平台已经于2020年11月27日已经关闭短信验证码登录方式,但是,部分象友没有看到相关通知,导致密码设置工作仍未完成。由于...
  • 实现是居于代理模式使用。 Spring事务就是居于AOP的实现。 首先了解一下相关概念 切面(Aspect): 通常是一个类,定义切入点和通知 连接点(Join point): 程序执行过程中方法的调用 通知(Advice):切面在特定...
  • 文章目录系列文章目录系统通知一、在渲染进程中实现二、在主进程中实现 系统通知 目的是让用户第一时间接收提示信息,提醒用户某种行为~ 效果如下: 一、在渲染进程中实现 Electron允许开发者使用 ...
  • Node.js + Express + Socket.io 实现的消息推送后台服务的中转站源码,利用这套 “中转站” ,可结合任何前后端技术,实现系统消息的实时推送。 Vue.js + Element-UI + Notification API 实现客户端实时接收消息和...

空空如也

空空如也

1 2 3 4
收藏数 73
精华内容 29
关键字:

vue实现系统通知

vue 订阅