Vue:计算机属性,内容分发,自定义事件

最新推荐文章于 2022-05-16 20:22:30 发布

Patrick&Star

最新推荐文章于 2022-05-16 20:22:30 发布

阅读量133

点赞数

分类专栏：前端文章标签： vue

博客都是自己手敲的,不是ctrl+a/c/v的,欢迎讨论,转载麻烦注明作者,/doge

本文链接：https://blog.csdn.net/weixin_43285711/article/details/114961756

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

什么是计算属性,内容分发

计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存

计算属性:计算出来的结果,保存在属性中,内存中运行:虚拟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>