vue2基本配置

data

data中保存vm需要使用的数据，这些数据都是响应式的，即，一旦data内的数据发生改变，则页面中使用到data内数据的地方都会自动更新，具有两种写法：对象/函数 ,里面可以有多条数据

data:{
	name:'moyu',
	sex:'man'
}

data() {
	return {
		name:'moyu',
		sex:'man'
	}
}

响应式

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。这意味着只有创建时已经存在于data中的数据才是响应式的
数据代理
vue会将data中所有数据的property，通过Object.defineProperty添加到实例的_data属性上，这可以让我们直接使用vm._data来访问属性
数据劫持
vue在数据代理基础上，为所有的data对象添加了getter和setter方法，这些对用户来说是不可见的，但是当数据发生改变时，setter方法就会被调用，这时就能让页面刷新，实现页面的响应式
注意⚠️：

1. Object.defineProperty只能监视修改现有属性，当想为vue添加新属性或者删除属性，需要调用另外的方法

• 添加新属性

Vue.set( target, propertyName, value )
vm.$set( target, propertyName, value )

• 删除属性

Vue.delete( target, propertyName )
vm.$delete( target, propertyName )

2. vue对数组的响应类式并不是通过为元素添加getter和setter实现的都，先调用原生方法对数组进行更新，然后再去更新dom

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和vm.items[indexOfItem] = newValue相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法Vue.set的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用splice：

vm.items.splice(newLength)

template

HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染
注意⚠️：需要写一个div标签，不然不会显示全部内容

<template id="moyu">
	<div>
			<p><span>{{moyu}}</span></p>
			<p><button>{{moyu}}</button></p>
			<hr>
	</div>
</template>

methdos

包含多个方法的对象，所有this的指向都会被绑定到vue实例上，所有方法都会被添加到vm实例上
注意⚠️：不能使用箭头函数

computed

计算属性就是根据已有的属性，进行计算后得出的新属性，使用同普通属性一样
注意⚠️：计算属性在依赖的属性发生改变的时候才会发生变化，不然不会发生变化，只会读取缓存，有两种写法

// 可读可写，get读，set写
computed:{
		name:{
				get(){
						// 写计算后的结果，直接return
					return 'moyu'
				},
				set(value){
						// 写发请求，保存数据
				}
		}
}

// 只读
computed:{
		pricesum(){
				return 'moyu'.split("").reverse().join("");
	}
}

watch

监听data或者计算属性发生变化的对象，具有三种属性

1. handler：发生数据变化时的回调的函数，
2. immediate：让监听在数据进行初次绑定时也执行
3. deep：深度监听，监听对象时使用

三种写法：

// 监视info数据变化
watch:{
	info(newValue,oldVlaue){
		// 新旧数据都可以拿到进行操作
	}
}

// 监视info对象变化
watch: {
    info: {
        handler(newValue,oldVal) {
             // 新旧数据都可以拿到进行操作
        },
        deep: true  // 深度监听
    }
}

// info发生变化时，调用自定义方法
watch: {
	// 可以是methdos中的方法
	info: function(newValue,oldVal)){
		// 新旧数据都可以拿到进行操作
	}
}