vue2笔记

vue数据代理

	1. Vue中的数据代理:
	                      通过vm对象来代理data对象中属性的操作(读/写)
	2.Vue中数据代理的好处:
	                      更加方便的操作data中的数据
	3.基本原理:
	                      通过object . defineProperty( )把data对象中所有属性添加到vm 上。
	                      为每一个添	加到vm 上的属性，都指定个getter/setter。
	                      在getter/setter内部去操作(读/写) data中对应的属性

vue计算属性

(1).vue计算属性-缓存
计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果
一个数据, 依赖另外一些数据计算而来的结果
总结一下: 计算属性根据变量结果缓存，依赖变化重新计算结果存入缓存
1.定义：要用的属性不存在，要通过已有属性计算而来
2.原理：底层借助object.definepeoperty方法提供的getter和sette

vue监听属性

(1).vue监听属性-watch

	1.当被监视的属性发生变化时，回调函数自动调用，进行相关操作，实时回调
	2.监视属性必须存在，才能进行监视
	3.监视的两种写法
	new Vue时watch配置
	通过vm.$watch监视

(2).vue监听属性-watch深度监视

	1.Vue中的watch默认不监测对象内部值得变化（一层）
	2.配置deep：true可以监测对象内部值得变化
	备注
	1.vue自身可以监测对象内部值得变化，但vue提供的watch默认不可以
	2.使用watch时根据数据具体结构决定是否使用深度监视

(3).vue中computer和watch的区别

	1.computer能完成的功能，watch也可以完成
	2.watch能完成的功能，computer不一定能完成，例 watch可以进行异步操作
	两个重要的小原则
	3.所被Vue管理的函数，最好写出普通函数，这样thi指向的是vm或组件实例对象
	4.所有不被Vue管理的函数（定时器回调函数，ajax的回调函数等，promise的回调函数），最好写成箭头函数，这样this指向的是vm 或 实例对象

	1.computer一个属性被多个属性所影响的话使用computer
	2.是否调用return：computer的函数必须要用return，watch不一定需要return
	3.computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作
	computed应用场景：需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
	watch应用场景：需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

vue中key的作用

	1.虚拟Dom中key的作用
	key是虚拟dom的标识符，但数据发生变化时，Vue会根据【新数据】，生成新的【虚拟DOM】，随后【旧的虚拟DOM】会跟【新的虚拟DOM】比较
	2.用index作为key坐标标识符会引发的问题
	1.若数据进行：逆序添加、逆序删除等破坏顺心的操作
	会产生没有必要的的真实DOM跟新

vue检测数据改变原理

	1.vue会监视data中多有层的数据
	2.如何检测对象数据
	通过setter实现监视，且要在new Vue时传入要监视的数据
	(1).对象中后追加的属性，Vue默认不做响应式处理
	(2)如需给后添加的属性做响应式，请使用如下api
	vue.set(target,propertyName/index,value)或
	vm.$set()t(target,propertyName/index,value)

VueComponent构造函数

1.vue组件本质是一个名为vuecomponent的构造函数，且不是程序员自己定义的，是vue.extend生成的

2.关于this指向：
组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

vue两种路由模式hash和history区别

hash：
(1).#后面的的内容就是hash值
(2).hash值不会包含在HTTP请求，即：hash值不会带给服务器
(3).兼容性好

history:
(1).地址干净
(2).兼容性和hash模式相对较差
(3).应用部署时需要后端人员支持，解决界面刷新服务器404问题

vue性能优化和代码优化

性能优化方面
	1.vue-router路由懒加载
	懒加载是当路由被访问的时候才加载对应组件，而不是在首页就全部加载，以此来提高首页反应速度
	2.打包优化-------工程文件打包的时候不生成.map文件
	3.使用字体图标
	4.使用雪碧图
	5.提取公共样式
	6.控件销毁
	7.定时器销毁
	8.解绑自定义事件
	
代码层面的优化
	1.不要在模板中加过多的表达式判断
	2.循环调用子组件的时候使用key
	3.合理利用生命周期
	减少created生命周期阶段减少ajax请求，而是放在mount中以不阻塞页面生成dom请求