vue学习积累

1、vue计算属性和方法差异

计算属性实际是响应式的属性（即是属性又是方法），具备缓存能力，依赖不变化就不会重新计算更新

方法是单纯的处理函数，不具备缓存能力

2、vuex、localstorage、sessionstorage 传递数据的差异

3、vue响应式原理

4、vue生命周期

5、公共组件 与 混入，什么场景使用公共组件，什么场景使用混入

如果只是提取公用的数据或者通用的方法，并且这些数据或者方法，不需要组件间进行维护，就可以使用mixins；公共组件最主要的作用还是复用相同的vue组件（有视图，有方法，有状态。vue不建议子组件直接修改props接收到的父组件的数据)。

6、计算属性：

计算属性和data属性都是变量-不能重名. 用法和data相同

函数内依赖的变量发生变化, 会自动重新计算结果返回

计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结

计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

与methods的使用区别：1、computed适合场景：（1）一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性；不希望重复计算，希望使用缓存；（2）在模板中双向绑定一些数据或者表达式({{***}})，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，而使用methods较为耗费性能，多次重复使用，多次重复调用，此时使用计算属性

2、methods适用场景: 事件类触发的操作，不涉及重复多次调用，不需要缓存
3、watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）==当数据发生变化时，执行异步操作或较大开销操作的情况。

7、$refs

为dom元素或子组件添加引用id，生成$refs对象，该对象指向dom元素和子组件实例，可以通过this.$refs操作dom元素或子组件方法和参数

通过$refs可以实现父子组件的通信，父调子--子调父

8、ES6 解构赋值

8.1 解构赋值实现json数据提取

var jsonData = {
    id: 42,
    stats: "ok",
    data: [123,456]
};

let { id, stats, data: num} = jsonData;
console.log(id, stats, num);
//42, "ok", [123,456]

8.1 解构赋值遍历Map结构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + "is" + value);
};
//first is hello
//second is world

for (let [key] of map) {
  //只获取key;
}

for (let [,value] of map) {
  //只获取value
}

9、父子组件通信：

9.1 父传子：

（1）子组件中添加props属性 定义需要接受的数据或方法

（2）父级组件引用子组件的标签上，通过v-bind指令将子组件props中被接受参数与将要接受的父组件data或methods进行绑定

9.2 子传父：

（1）在子组件methods中定义传参方法emitData(sendData) //意为发射数据；通过this.$emit('监听事件'，data) 将要传递的数据与'监听事件'发送出去

（2）在子组件中调用emitData方法（比如通过click事件触发，进而触发this.$emit发送数据。也可以不通过click触发，直接在方法中发送）

（3）在父级组件 methods中定义接受方法recieveData(recieveData)，将recieveData赋值给父组件data中参数。并在引用子组件的标签上通过v-on指令监听recieveData方法，通过v-on:"监听事件"=recieveData，将两者关联起来。

例子可参考：父子组件之间的通信_菜鸟级码农小林的博客-CSDN博客_父子组件通信

9.3 同过refs/$refs 实现子传父（参考第7点）

10、VueX

(1) 包含5个属性，state，getter，mutation，action，module

(2) state:  mapState 辅助函数帮助我们生成计算属性。mapstate函数 返回的是一个对象，通过 ... 对象展开运算符工具函数可以将其内对象传给computed属性。

11、slot 插槽

在父组件中，子组件标签里内套的内容（<childComponent></childComponent>），默认是不显示的。如果要显示需要在子组件中增加<slot></slot>，就相当于子组件标签里的内容，插到了子组件中的<slot></slot>位置。

子组件在对应分发的位置的slot标签里，可以增加name属性，即：<slot name='name名' >内容</slot>，这称为具名slot。父组件在要显示的标签里添加 slot='name名'属性即可实现在特定标签内插入子组件内套内容，比如要在p标签中显示子组件对应的dom，<p slot='name名'></p>

12、箭头函数（ES6）

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }