Vue 条件渲染,列表渲染，key的作用和原理，列表过滤，列表排序，Vue监测数据原理和注意事项 (五)(1)

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

},

str:‘hello’

}

}).$mount(‘#root’);

3. key的作用和原理

==========================================================================

需要我们注意的是，在我们定义key时，使用index和id的这种作法有什么区别，什么使用用index？什么使用用id？

注意事项：

如果没有定义key属性，默认就是index作为key的值，作为唯一标识。

3.1 index作为key 的效果和问题

---

一定理解好虚拟DOM和真实DOM，以及中间的虚拟DOM对比算法。

上图对比虚拟DOM时，对比了三部分，第一个key，第二个内容(张三–18)，第三个input标签。大体上就这样一步步对比，在这key作为唯一标识，内容不同就会覆盖。注意这里我们添加的时真实DOM中的input，在虚拟dom中input还是一样的，因此直接会使用真实DOM中的内容。

这里使用index来操作的话，就会出现这种问题：

源码：

人员列表(遍历数组)

• {{p.name}}-{{p.age}} —索引值：{{index}}

  

  点击添加个人后，就会出现下面这样的问题。

  

  一定注意index这样类似的改变顺序的错误。

  3.1 id作为key 的效果(最佳)

  ---

  

  使用id来实现，就可以避免上面index所出现的问题。

  源码：

  人员列表(遍历数组)

• {{p.name}}-{{p.age}} —索引值：{{index}}

  3.3 两个总结

  ---

  

  4. 列表过滤

  =====================================================================

  4.1 通过watch，filter和indexOf()来实现

  ---

  我们通过使用Vue，来实现一个模糊查询。通过watch，filter和indexOf来实现，一定注意indexOf在空字符串情况下怎么操作的。

  

  源码：

  人员列表

• {{p.name}}-{{p.age}}-{{p.sex}}

  4.2 通过使用computed，filter和indexOf()来实现

  ---

  #region和#endregion，这两个可以将注释的内容折叠起来。

  computed比watch要简单一些，推荐使用

  人员列表

• {{p.name}}-{{p.age}}-{{p.sex}}

  5. 列表排序

  =====================================================================

  需要注意的是sort()函数判断a-b升序，b-a降序。以及下面所实现的形式。

  人员列表

  <button @click=“sortType = 2”>年龄升序

  <button @click=“sortType = 1”>年龄降序

  <button @click=“sortType = 0”>原顺序

• {{p.name}}-{{p.age}}-{{p.sex}}

  6. 深度了解Vue如何监测data对象中的数据改变

  ========================================================================================

  需要了解一下Observer对象和它的构造函数。下面我们重写一下它的Observer。

  我们平时所看到的vm._data的本质就是Observer对象。

  

  源码：

  通过Observer来模拟一下，data和vm._data，obs之间的一个数据监测(被修改什么的)。

  上面的代码虽然实现了，监测data中的数据变化，但是如果遇到对象中包含对象，数组等特例(见下图)，就不行了，但Vue中的监视原理就是这样的。这里我们只是了解一下他的特性而已。

  

  7. Vue中set方法使用的方式和注意事项

  ====================================================================================

  在这具体的set修改方式有两种：如下图一样:

  **1. Vue.set(vm._data.student.‘sex’,‘男’)

  2. vm.$set(vm._data.student,‘sex’,‘女’)**

  

  

  因为上面的vm._data.student 和vm.student 是数据代理的，所以他们两个是一样的。

  

  因此，我们直接就可以写vm.student来设置属性什么的了。

  自学几个月前端，为什么感觉什么都没学到？？

  ---

  这种现象在很多的初学者和自学前端的同学中是比较的常见的。

  因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

  最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

  很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

  这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

  但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

  所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。