js list遍历_Vue.js这些知识掌握，入门没问题-CSDN博客

vue的使用也很久了，但似乎并没有完成的通读过一遍官方文档，每次看文档都从起步开始，很多知识点掌握的不牢固。之前有玩过一阵的小程序，也了解了一下react，这几家的写法都不一样，常常在写的时候混淆。

果然，掌握的就很不牢固。

这篇文章把vue文档中基础知识的关键点一一列出，方便查阅。

我可真是个爱学习的好(真巨忒娘的蠢)孩子。

1、模版语法

数据绑定的形式有3种。

最常见的是使用双大括号的文本插值；v-text；v-html。其中双大括号有刷新问题，v-text解决了刷新问题可覆盖文本内容，但无法解析带html结构的字符，而v-html就可以解析的。

<p>{{msg}}p><p v-text="msg">p><p v-html="msg">p>

2、条件渲染

v-if和v-show的false时候的区别。

v-if是直接注释

v-show是将当前dom的display设置none。

现身说法

v-if和v-show其实用法都一样的，但是更推荐使用v-if。工作中遇到一次状况，一个页面中使用了tab项切换各模块数据，后端返回的数据量都在万级以上，当时tab的切换用的就是v-show控制，往往几个tab项一切换就会超内存导致浏览器崩溃。这就是v-show只是改变了dom的display，该渲染还是渲染了，数据量一大内存占用一直居高不下。换成了v-if之后，只会渲染为真的tab项，内存使用大大减小。

3、列表渲染v-for

v-for渲染数组贼熟，不赘述了，就是别忘了绑定key值。然而绑定key则是一个面试常考点。

首先，若使用了eslint，没有key编辑器会报错。

其次，用 key 配合 v-for，以便维护内部组件及其子树的状态，但这是套话毫无意义。

可以举个例子嘛。

假设实现一个列表插入数据的功能，列表中原本数据a，b，c，默认选中a，现在在列表头部插入数据d，就是在a之前插入个d。

没有key的情况下，选中的数据会变成d，因为原本数据中的a现在已经变成了第二项。设定key之后，选中的数据仍然是默认的a。

v-for还可以循环一个对象的property，实话我也是才看文档才晓得，之前就没用过。

for="(value, name) in object"> {{ name }}: {{ value }}

默认遍历的是对象中的value，这里的name是对象中的key，相当于循环数组中的index。

4、计算属性

官方的说法，对于任何复杂逻辑，都应当使用计算属性。

哈，我几乎没怎么使用过。主要是一不知道计算属性怎么写，二不知道计算属性有什么用。

好吧，既然这儿写到这个了，说明我是已经知道了。

计算属性的写法就是用一个变量代替需要在页面上进行复杂计算处理的代码语句，在computed中以这个变量名写个方法，方法的返回值是需要计算处理的结果。

{{ aaa }}// ...computed: {    aaa() {      // 逻辑处理      return result    }  }

计算属性的作业应该更多是因为它的缓存，不然和方法真就没什么区别。计算属性是基于它们的响应式依赖进行缓存的，相关的响应式依赖改变才会重新求值。

这里的依赖就是，计算属性都是基于data中某个变量值，这个值需要复杂的计算处理，把这块处理部分抽离出来写在计算属性中，因此这个依赖就是相应的data中的那个变量值。这个变量值不变，计算属性都只会取之前缓存的结果，不会像方法一样都需要再执行一次算结果。

enmmm，我竟然写出了一种口语化的感觉~

5、侦听器watch

我更喜欢称之监听器，顾名思义监听数据的变动，官方中说的是数据变化时执行异步或开销较大的操作会用到，但提醒不要滥用watch。工作中我一般使用watch都是处理路由的变化。

watch: {    $route(to, from) {        if (to.name === "component") {            this.init();        }    },},

6、过滤器filters

过滤器是最近才开始使用的，还记得之前写代码遇到过处理后端返回的时间戳转换成日期格式，我专门写个方法做处理，被赵大哥嘲笑了，好奇我为什么不使用过滤器。

这就是不好好看文档的弊端。

过滤器的使用不单单是时间格式的转换，还可以用在文本搜索上。

时间格式转化：

"time | filterTime">

// ...filters: { filterTime(timestamp: number) { if (timestamp) { return moment(timestamp).format("YYYY/MM/DD HH:mm"); } return ""; },},

这里的moment是第三方插件Moment.js。

文本搜索：

  ref="multipleTable"  :data="textList| textFilter(keyword)">// ...filters: {  textFilter(list: string[]= [], keyWord: string) {      return list.filter((item, index, arr) => {          if (item.name.indexOf(keyWord) > -1) {              return true;          }          return false;      });  },}

搜索这里需要定义个搜索关键词变量，上面代码关键词搜索就是textList中name字段。

7、组件data为函数

当 data 的值是一个对象时，它会在这个组件的所有实例之间共享。当组件重用时就会有问题，因为每个组件的实例都会引用相同的数据对象，修改其中一个就会影响所有。

因此，JS中一个函数返回对象就可以生成一个独立的数据对象，就实现了每个组件实例都管理其自己的数据。

8、父子组件传值

宇宙超级无敌必考点，常用。

父 -> 子

父组件通过 Prop 向子组件传递数据。

父组件中引用子组件，在components中注册子组件名，子组件标签上数据绑定自定义变量；