什么是计算属性,内容分发,自定义事件
计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存
计算属性:计算出来的结果,保存在属性中,内存中运行:虚拟dom
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
currentTime1: {{currentTime1()}} //调用犯法
</div>
<div>
currentTime2: {{currentTime2}} //调用计算属性
</div>
</div>
</body>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: "Helloworld"
},
methods: { //普通方法
currentTime1: function(){
return Date.now(); //返回一个时间戳
}
},
computed:{ //计算属性:methods,computed的方法最好不要重名,重名后只会调用methods中的方法
currentTime2: function () {
this.message;
return Date.now();//返回一个时间戳
}
}
});
</script>
</html>注意:methods和computed里的东西不能重名
- method:定义方法,调用方法使用currentTime(),需要带括号
- computed:定义计算属性,调用属性使用currenTime2,不需要带括号:this.message是为了能够让currentTime2观察到数据变化
- 如何在方法中的值发生了变化,则缓存就会刷新!可以在控制台使用vm.message="HelloShit!"
所以怎么知道这是缓存的数呢(f5没用昂,因为你这一刷新界面缓存就重新了),如下图可以看出不论怎样调用计算属性值都是一样的
在代码中加入如下
当然不要以为只能f5刷新这个缓存才能变,如图,修改属性的时候也能使缓存改变(获取属性无法改变)
为什么这样设计?
因为如果每一次调用都调用一个方法太消耗资源,数据太多的话会卡死,如果从缓存中调用不仅会大大提升效率,还不占用资源
结论:
调用方法是,每次都需要进行计算,既然有狗计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特征就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
内容分发
在Vue.js中我们使用插槽,可以应用在组合场景中;
测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <p>列表书籍</p>-->
<!-- <li>JAVA</li>-->
<!-- <li>C</li>-->
<!-- <li>Python</li>-->
<todo> //大模板
<todo-title slot="todo-title" :title="title"></todo-title> //插进插槽的组件
<todo-items :item="item" slot="todo-items" v-for="item in todoTtems">//插进插槽的组件</todo-items>
</todo>
</div>
</body>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
Vue.component("todo",{
//slot:插槽 顾明思议,可以插进去模板,当然也可以不插进去
template:
'<div>
<slot name="todo-title"></slot>
<ul>
<slot name="todo-items"></slot>
</ul>
<div>'
})
Vue.component("todo-title",{ //组件
props: ['title'],//接收数据
template: '<p>{{title}}</p>' //模板
});
Vue.component("todo-items",{//组件
props: ['item'], //接收数据
template: '<li>{{item}}</li>' //模板
});
var vm = new Vue({
el: '#app',
data: {
title: "臭狗屎列表",
todoTtems: ['臭狗屎哈哈哈','臭狗屎红红火火恍恍惚惚','臭狗屎2222']
}
});
</script>
</html>