Vue.js散记

发表于 2018-12-19 | 分类于 JavaScript ， Vue

这里主要记录一下学习Vue过程中遇到的问题。

1. [Vue warn]: Error in render: “TypeError: Cannot read property ‘xxx’ of undefined

之前敲代码的时候，发现了这个报错，一开始的观察点在TypeError上，认为是某个props没有正确定义，但是检查的时候并没有写错。后面发现应该要看前面Error in render，是渲染时报错。最后是找到有个地方变量名写错了。

2. 为什么data必须是一个函数

这个问题其实在vue.js官网有说明，并且给出了一个例子。正确的写法应该是

data: function () {
  return {
  	count: 0
  }
}

这是因为，在创建组件的实例时，data作为一个函数可以返回一个初始化对象，能独立于其他实例的data对象。如果data不是作为一个函数，而只是一个数据，则会导致所有实例公用一个data对象。

3. 计算属性`computed`，侦听属性`wtach`&方法`methods`

计算属性computed的设计，是用于处理一些复杂的运算。一般在template模板中是支持使用表达式的，但是如果需要进行一些复杂的运算或数据处理，就可以把这些运算或数据处理放到计算属性中处理。

当然，这些复杂的运算或数据处理也可以定义为一个方法放到methods中，但是放在计算属性和放到方法中是有其不同的地方的。

vue官网有明确的指出这两者的不同。计算属性computed是基于它们的依赖进行缓存的。也就是说，methods中所有的运算结果只有当依赖的变量发生改变的时候才会重新计算，否则只要变量不改变，计算属性不会重新执行函数，直接返回缓存的计算结果。相反的，方法methods是并非响应式的，每次触发重新渲染时，调用的方法总会在此执行函数，即使依赖并没有发生变化。

计算属性computed的优势在于可以减少很多不必要的性能开销。而方法methods中的函数都是需要根据页面的渲染或不需要缓存函数结果的

侦听属性watch跟计算属性computed也有极为相似的方面，侦听属性是需要监听数据的变化并作出响应。但是一般用于执行异步或开销较大的操作时，才比较适合。

4. 指令`v-for` & `key`

v-for是vue.js用于渲染列表的指令，针对数组可以使用(item, index) in items的语法迭代数组，针对对象可以使用(item, key, index) in items的语法迭代对象。其中，key的用途主要在于优化渲染过程。vue.js在处理数据项的变化时，对只改变顺序的数据项会选择复用，这样能优化渲染性能。如果没有提供key也只是会报提示，不影响项目运行，但是建议提供（如果是在组件上使用，则必须提供key）。

5. 父子组件通信

vue.js的父子组件通信跟react类似，父组件向子组件传值，是通过props传入，子组件是通过$emit方法触发父组件的事件。父组件在使用子组件时，通过v-bind指令传入或通过v-for传入数组中的一个元素，子组件需要在props中声明这些接收的值。

父组件通过props向子组件传值这点来看，vue.js的操作跟react是类似的，但是子组件向父组件通信的处理，就有点不同了。

vue.js中，父组件中需要在子组件上用v-on指令监听事件，然后子组件上通过$emit(event, arg)来向父组件触发事件，必要时传入参数arg。react处理上不同，react中父组件需要通过props向子组件传入方法，子组件只要使用这个方法并传入参数即可，并不是通过事件触发。

6. 通过插槽分发内容

另外开一篇文章来记录这个内容，因为插槽的分类比较多，能用起来的话作用也很强大。