vue 2.x 文档小总结(1)

155 阅读2分钟

前段时间把vue 2.x的文档看了一遍,查漏补缺了一下,顺便将总结写一下,这里只是写的文档上的一些知识点并且是用自己的理解和语言来写的,所以可能会很初显

1.computed,methods,watch区别

computed:计算属性的结果会被缓存,除非依赖的响应式property变化才会重新计算(注意,非响应式property的改变是不会被更新的,例如里面用了Date.now()methods:意如其名,就是方法,不会缓存。 watch:监听器,当前的值变化时,会触发响应的操作

2.key

文档原文

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

用我的话说一遍 vue为了尽可能的复用(提升性能,我认为的),拿虚拟DOM的新旧VNodes做对比,如果新旧VNodes用的是相同类型的元素,那么vue会在在旧的VNodes上进行修改,例如修改innerText,property等。 key的作用是,vue会识别key当唯一值,当比较出新旧VNodes的key不一样时,就算是相同的元素,也会移除旧元素,插入新元素。

3.vue是怎么监听到数组变化的

原文

由于JavaScript的限制,Vue不能检测数组和对象的变化,Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新

竟然不能检测,那么vue是怎么对数组做检测的。 这个按照我的理解的话,proxy + reflect,但是这是es6的方法,vue如果要考虑向下兼容的话,应该不会如此处理,我继续猜,应该用到了设计模式中观察者模式,后续,后续我会通过学习源码学习

4.data必须是函数

这个比较简单一点,就是按引用传递问题,用函数的话,就会生成新的对象

今天写到这里