Vue中必须了解的知识点，随笔二

Vue中的计算属性，我们知道是computed，那么它里面具体是怎样构成的呢

computed：{
	fullname：{
		set：function(){}，
		get：function(){
			return   this.fristname+' '+this.lastname
		}
	}
}

上面举了一个很简单的名字相加的小例子,一般的计算属性都是不会给他设置set方法的,对于不会设置的方法他就等同于一个只读属性,所以一般用来简写,他只会用到get方法

computed：{
	fullname：{	
			return   this.fristname+' '+this.lastname
			}
}

等同于上面的写法,那么众所周知computed计算属性也就是一个函数,对于函数来说我们也可以写在method里面,为什么我们不直接使用method而是使用computed计算属性呢?

因为我们多次调用的时候就会发现,methods方法会执行多次,如果一个网页比较复杂时候,method里面包含了很多方法,那么它就会全部重复执行,会造成一定上的性能损耗,而computed只会执行一次,相当于在页面中缓存了,它的性能更高.

ES6的语法还是一个很常见的问题:
1、变量作用域：变量在范围内是可用的
2、var是没有块级作用域的，如if的块级，for的块级，也没有，那么在ES6之前我们是怎样解决没有作用域的问题的呢，在之前一直使用的是闭包来解决if或者for的问题，因为只有函数是一个作用域。
在后来的ES6中，加入了let，它是有if和for的块级作用域的。
3、在ES6中开发优先使用const，我们只有需要改变标识符的时候才会去使用let，这时候要注意的是当我们一旦定义了const标识符后不能进行修改
而且const定义过后必须进行赋值 比如我们之前可以用 var a 但是const一旦定义必须给他一个值
const常亮指向对象不能修改，但是可以改变内部的属性，（因为对象都是保存的内存地址）
1、ES6中还能使用增强型写法，比如属性的增强写法：

const name = 'a'
const age = 18
const hieght = 1.5
// 在ES5的时候我们只能够用
const obj = {
	name:name,
	age:age,
	height:height
}
//但是在ES6的增强型语法中，我们可以直接这样写了
const obj = {
	name,
	age,
	height
}

2、函数的增强型写法：

//在ES5中函数是这样写的
const obj = {
	cat:function(){},
	dog:function(){}
}
//在ES6中函数可以简写成这样
const obj = {
	cat(){},
	dog(){}
}

在我们使用v-for或者组件的时候，我们最好加上一个key值:key，它的作用是高效的更新虚拟Dom

数组中的哪些方式是响应式的
1、push（）末尾添加方法 2、pop（）末尾删除方法 3、shift（）首位删除方法 4、unshift（）首位添加方法 都是动态响应的
2、还有一个最常用的splice方法，它的作用是删除元素，添加元素，替换元素。
删除： splice（1）代表了从数组第一位开始删除后面的所有数组，splice（1，2）代表了从1开始删除后面2位数组。
替换： this.XXX.splice(1,3,‘x’,‘y’,‘z’)代表了从1开始的后面三位替换成x、y、z。
插入元素 this.XXX.splice（1,0,‘x’,‘y’,‘z’）代表了从1开始，插入了x、y、z，注意是插入不是替换
还有sort（）数组的排序方法 reverse（）数组的反转方法

我们要注意如果是通过索引值（下标）来修改数组的话，它不是响应式的也不会报错
但是我们可以通过set方法来实现强制响应vue.set(要修改的对象,index索引,修改后的值)，里面分别是三个参数。

在Vue中如何删除一个数据，我们通常情况下可以使用：this.xxx.splice（index,1）就是当前的下标，然后删除1条代表自身

我们常用的高阶函数：filter/map/reduce
在filter中的回调函数友一个要求，必须返回一个Boolean值true或者false，当为true时，函数内部自动将这个回调的n加入数组中，当为false自动过滤掉。

const num = [1,2,3,4,5,6,7]
let newnum = num.filter(function(n){
	return n<4
})
console.log(newnum) // 1,2,3

map函数的使用：

let new1num = newnum(function(n){
	return n*2
})
console.log(new1num) // 2,4,6

reduce 函数的使用：作用是对数组里面的内容汇总

let total = new1num.redcue(function(preValue,n){
	return preValue + n
},0)
console.log(total) // 12

那么我们如何更简便的使用高阶函数呢？

const num = [10,20,111,222,444,40,50]
// 过滤出小于100的数字然后放大2倍后再计算总和
let total = num.filter(function(n){
	return n<100
}).map(function(n){
	return n*2
}).reduce(function(preValue,n){
	return preValue + n
},0)
//进一步的简写
let total = num.filter(n=>n<100).map(n=>n*2).reduce((pre,n)=>pre+n)

v-model的指令（重要） ：
input框实现了真正的双向绑定他是如何做到的呢

<input type='text' v-model='mes'>

这样就是一个最简单的双向绑定，v-model是什么呢？
它等同于v-bind：value 加上v-on：input = ‘xxx’
input框本身自带一个事件input表示监听用户的输入事件

  "xxx”(event){
	this.mes = event.target.value // 就是mes等于你输入的值参数可以默认不传		
}

更为简便的写法就是@input = 'mes=$event.target.value’这样就实现了v-on的动态监听事件