Vue（十六）：安全、响应式原理、异步更新队列

1、安全
　　Vue在安全教程中说了一堆，总结出三点值得了解的信息。
　　第一点便是王婆卖瓜自卖自夸，Vue表明自己会在使用模板或者渲染函数的时候，将一些敏感的关键符号，如单引号，双引号，尖括号之类的自动转义成特定的字码，用以防止新的html注入，基本能杜绝大部分的安全漏洞。
　　第二点是让大家选择模板和插件的时候，选择自己能绝对信赖的模板和插件。意思应该是，要么是自己开发的，要么是vue推荐的，其余的插件，即便是大厂出的也要谨慎。
　　第三点应该就是v-html和插槽之类的功能，这些功能会完全相信插入其中的字符串，不会再做转义，希望大家慎用。永远不要相信用户提供的js代码是安全的，让用户只能在自己规定的安全区内搞一搞数据的提交。至于用户提交了数据到后台产生错误，或者从后台传回来错误的数据导致了前端产生错误，大致应是后端应该重视的问题，但是前端也需要和后端搞好配合，仔细提防这种攻击。
2、响应式原理
　　之前我们在组件中模拟过双向绑定，我便以为这就是vue的响应式原理，没想到是错的。简单说一下之前模拟的双向绑定：父级组件将属性值a赋值给子级组件，子级监测传入的属性a，一旦属性a变化，则重新赋值给子级设置的属性b，然后再检测属性b，子级更改属性b的时候触发父级事件，将属性b的值提交给父级，再由父级更改属性a的值。这样一来，不管是子级还是父级更改了属性，都会导致两个属性的改变。
　　这里先提一嘴，属性a改变了属性b，属性b又反过来改变了属性a，如此下去，便会陷入死循环。但是，a赋给了b，b赋给a时，a虽然接受了新的属性值，新老属性值相等，不会触发监测机制。
　　再说一下vue的响应式原理，这里说的响应式原理是属性值和浏览器渲染的相应。vue渲染对象的时候，会遍历该对象的所有属性，将所有属性转为getter/setter。每一个vue实例还对应一个watcher实例，这个实例会将浏览器渲染的时候接触的所有属性记录为依赖，当这些依赖的setter触发的时候，会通知watcher来通过getter取值，取值之后再交给渲染函数，根据依赖重新渲染对应的节点。
　　如此说来，响应式原理和双向绑定，完全是两个概念。不过，两个概念相辅相成才使得vue看起来那么灵活。这都是本人的一点拙见，有不对的地方，还请列为看官指正。
　　由于js的限制，vue不能检测对象和数组的变化，vue也提供了一些方法，尽可能的监视，这里就不列举了，这种监视，能避免就避免吧。
3、异步更新队列
　　前面两个都是纯理论，只有这个还有点干货。这个的意思呢就是Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。
　　也就是说，属性a的值会被渲染成dom节点，但是如果属性a的值改变了，dom节点的值迟早会改变，但不是立刻。这个异步的时间可能很短，但是即使是1毫秒，如果我们在属性a改变的下一行代码中就获取dom节点的值，大概率获取到的还是未改变的值。
　　那我就要获取这个值怎么办呢，自己搞的话，方法就是设置一个定时器，设定比如10毫秒之后再执行获取dom节点的代码。但是节点渲染，有时快有时慢，也说不好这个获取的时间。vue呢就搞了Vue.nextTick(callback)这么一个方法，在本实例中可使用this.nextTick(callback)调用。这个方法的回调函数是等dom节点渲染完之后再执行，回调函数怎么知道的呢，没有看源码，但是我猜是vue的渲染函数告诉它的。举个栗子 结束：

this.nextTick(()=>{
    console.log(this.$el.textContent);
});