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); });