Vue.js

使用场景: 聊天室；大量数据常驻交互； 技术栈： Node.js, Vue.js || 原生JS 服务端代码: const app = require('http' ).createServer() const io = require('socket.io' )(app) app.listen( 8877 ) io.on( 'connection', scoket => { let i = 1 const t = setInterval(()=> { i ++ if (i >= 12 ) { clearInterval(t) } // 服务端往客户端发送消息 scoket.emit('news', { hello: 'world', t: new Date().getTime() }) }, 1000 ) // 服务端监听客户端的消息 scoket.on('receiveEvent', data => { console.log( 'receiveEvent: ' , data) }) }) 客户端代码: -- Vue 例子： <template> <div> <p @click="clientToServer">scoket:</p> <p v- for ="(item,index) in arr" :key="index">{{item}}</p> </div> <

vue提供的MVVM框架模式的数据双向绑定，实现了HTML和js的代码分离，提高代码的维护性 vue.js的核心思想包括：数据驱动和组件化思想。 如果没有中间的ViewModel则关系图编程下面所示：通过Ajax通信获得后台数据，那么要将获得数据显示在DOM上，则需要手动操作DOM节点。这是一个繁琐的过程，还很容易出错。 而使用vue.js后则省去手动操作DOM 。在vue.js里面只需要改变数据，Vue.js通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化，DOM是数据的一种功能自然的映射。vue.js还会对操作做一些监听（DOM Listener），当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。这样就形成了数据的双向绑定。 实现数据双向绑定的方法： 数据劫持结合发布者-订阅者模式（vue.js）【vue data是如何实现的？？】 vue.js采用数据劫持结合发布者-订阅者的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时，发布消息给订阅者，触发相应的监听回调。 具体的来讲，Vue.js通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化。vue.js还会对操作做一些监听

深入理解vue的watch vue中的wactch可以监听到data的变化，执行定义的回调，在某些场景是很有用的，本文将深入源码揭开watch额面纱 前言 watch的使用 watch的多种使用方式 传值函数 传值数组 传值字符串 传值对象 传值对象的其他作用 源码分析watch 初始watch 创建Watcher watchWatcher 立即执行的watch 与computed比较 前言 version: v2.5.17-beta.0 阅读本文需读懂vue数据驱动部分 watch的使用 当改变data值，同时会引发副作用时，可以用watch。比如：有一个页面有三个用户行为会触发this.count的改变，当this.count改变，需要重新获取list值，这时候就可以用watch轻松完成 new Vue({ el: '#app', data: { count: 1, list: [] }, watch: { // 不管多少地方改变count，都会执行到这里去改变list的值 count(val) { ajax(val).then(list => { this.list = list; }) } }, methods: { // 点击+1，count + 1，刷新列表 handleClick() { this.count += 1; }, // 点击重置，count = 1