vue的常识

Vue

Vue中容易忽视的知识点。

Slot(插槽)

插槽是传递复杂内容的方式，分为普通插槽、具名插槽、作用域插槽。

1. 版本2.5之前使用slot，版本2.6的用v-slot；

v-model(只是一个语法糖)

1. v-model仅仅是属性和时间合起来的简写形式：

类型	属性	事件
text与textarea	value	input
checkbox	checked	change
select	value	change

key

1. index并不能作为key值，尤其是当子组件有自己的状态的时候，删除、添加、排序都会出现不符合预期的情况；
2. Vue中，template模板会编译为渲染函数render，然后对比虚拟DOM，再更新到真是DOM上；
3. 有key，通过移动节点服用节点来更新DOM；
4. 无key，会通过删除新建节点来更新DOM。

数据来源

1. 来自父元素的属性；
2. 来自组件自身的状态data；
3. 来自状态管理器，如vuex、vue.observable。

状态data VS 属性props

1. 状态时组件自身的数据；
2. 属性时来自父组件的数据；
3. 状态的改变未必会触发更新；
4. 属性的改变未必会触发更新。
5. 状态data：
   (1) 数据放在return里才会做响应式；
   (2) return里面对象里未声明的字段，也不会做响应式；
   (3) 对数组的直接操作会做出响应式；
   (4) 在return里声明的字段，在视图层未使用的字段也不会做响应式。
   因此，在使用时需要注意：
   (1) 在视图层要用到的数据需要在return里先声明；
   (2) 业务逻辑需要，但不需要在试图层使用的数据，可以放在return外面，用_this.<name>声明和使用。

Vue的"响应式"是指当数据改变后，Vue会通知到使用该数据的代码，即视图随数据更新而改变。

computed VS watch

1. computed能做的，watch都能做，反之不行；
2. 优先使用computed

计算属性：
1.减少模板中的计算逻辑；
2.数据缓存；
3.依赖固定的数据类型(响应式数据)

侦听器 watch
1.更加灵活，通用；
2.watch中可以执行任何逻辑，如函数的防抖节流，Ajax异步获取数据，甚至操作DOM；
3.当需要在数据变化时执行异步或开销较大的操作时使用；
4.可以嵌套监听，如"a.b"

后续未结，稍候！