Vue-05-计算属性、内容分发、自定义事件

6 Vue:计算属性、内容分发、自定义事件

6.1 什么是计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性其次这个属性有计算的能力（计算是动词），这里的计算就是个函数：它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），可以想象为缓存！

将计算出来的结果，保存在属性中，此过程在内存中运行：虚拟Dom在操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>currentTime1:{{currentTime1()}}</p>
			<p>currentTime2:{{currentTime2}}</p>
		</div>
		<script src="static/vue.js"></script>
		<script>
			/* vm对象 */
			const vm = new Vue({
				el: '#app',
				data: {
					msg: 'hello'
				},
				methods: {
					currentTime1: function () { //每次调用方法都要计算一遍在返回
						return Date.now()
					}
				},
				computed: { //节省了浏览器成本
					currentTime2: function () { //计算属性methods、computed方法不能同名，否则只会调用methods方法
						this.msg //若页面不刷新，多次调用返回缓存中计算好的值，值不变
						return Date.now() //这个过程中有值更新后，缓存会重新计算
					}
				}
			})
		</script>
	</body>
</html>

注意：methods和computed里的东西不能重名
说明：
- methods:定义方法，调用方法使用currentTime(),需要带括号
- computed:定义计算属性，调用属性使用currentTime2,不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化
- 如果在方法中的值发生了变化，则缓存就会刷新！可以在控制台使用vm.message=“123”,改变下数据的值，再次测试观察效果！
结论：
- 调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销个那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销：

6.2 slot插槽-内容分发

插槽：在Vue.js中我们使用元素作为承载分发内容的出口，可以应用在组合组件的场景中；
举例说明：着重看着几个插槽如何整合联系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="static/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<!-- <p v-for="item in items">{{item.option}}</p> -->
			<province-content>
				<province-title slot="province-title" :title="title"></province-title>
				<province-items slot="province-items" v-for="item in items"  :item="item"></province-items>
			</province-content>
		</div>
		
		<script>
			Vue.component('province-content',{
				props: ['title'], //es6特性，\代表换行
				template: '<div>\
				<slot name="province-title"></slot>\
				<ul></ul>\
				<slot name="province-items"></slot>\
				</div>'
			})
			Vue.component('province-title',{
				props: ['title'],
				template: '<p>{{title}}</p>'
			
			})
			Vue.component('province-items',{
				props: ['item'],
				template: '<li>{{item.option}}</li>'
			
			})
			const vm = new Vue({
				el: '#app',
				data: {
					title: '省份',
					items: [
						 { id: 1, option: '北京' },
						 { id: 2, option: '山西' },
						 { id: 3, option: '陕西' }
					]
				}
			})
			
		</script>
	</body>
</html>

说明：我们的province-title和province-items组件分别被分发到了province-content组件的province-title和province-items插槽中

6.3 自定义事件

通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能,很好的帮助我们解决了这个问题；
使用this.$emit(‘自定义事件名’，参数)，操作过程如下：
1-在vue的实例中，增加了methods对象并定义了一个名为removeTodoltems的方法

6.4 Vue入门小结

核心：数据驱动（虚拟dom），组件化
优点：借鉴了Angula)S的模块化开发和React的虚拟Dom,虚拟Dom就是把Dom操作放到内存中执行；
常用的属性：

v-if
v-else-if
v-else
v-for
v-on绑定事件，简写@
v-model数据双向绑定
v-bind给组件绑定参数，简写：

组件化：

组合组件sot插槽
组件内部绑定事件需要使用到this.$emit(“事件名”，参数)；
计算属性的特色，缓存计算数据

遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；
说明

Vue的开发都是要基于NodeJS,实际于发采用vue-cli脚手架开发，vue-router路由，vuex做状态管理：VueUl，界面我们一般使用ElementUl（饿了么出品），或者ICE(阿里巴巴出品！)来快速搭建前端
项目:

elementUI：https://element.eleme.cn/#/zh-CN

非冰：https://ice.work/