Vue.js这些知识掌握，入门没问题

原文链接：https://mp.weixin.qq.com/s/C_cSieN7dee2wCwMjtQdMQ

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，实话我也是才看文档才晓得，之前就没用过。

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

4、计算属性

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

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

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

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

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

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

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

5、侦听器watch

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

6、过滤器filters

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

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

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

时间格式转化：

文本搜索：

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

7、组件data为函数

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

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

8、父子组件传值

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

父 -> 子

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

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

子组件prop接收相关自定义的变量，选定类型，当作data中变量一样使用。这里的类型可以是：字符串、数字、布尔值、数组、对象、回调函数、promise或其他构造函数。

子 -> 父

子组件通过$emit向父组件传值。

子组件上绑定事件，事件方法中调用this.$emit，参数先传个自定义的方法名供父组件调用，后面接着需要传输的值。(亲测，可以传多条数据)

$emit 可以被 v-on 侦听，同样的， Vue 实例在其事件接口中还提供了其它的方法。

• 通过 $on(eventName, eventHandler) 侦听一个事件

• 通过 $once(eventName, eventHandler) 一次性侦听一个事件

• 通过 $off(eventName, eventHandler) 停止侦听一个事件

父组件中在引用的子组件标签上，绑定那个自定义方法名，就可以拿到子组件中的数据。

9、插槽slot

插槽是在子组件中使用；

父组件引用子组件时候，当子组件有slot，父组件中的子组件标签中就可以写其他结构。

如果没有slot，页面中就不会显示“hello world”。