Vue计算属性

news2024/7/6 18:14:25

1,为什么Vue会设计计算属性(computed property)?

答:一定程度上,Vue的作用就是管理呈现到HTML页面上的所有数据data的,每当一个data发生变化,Vue实例就会自动的去更新模板里面使用到data的地方,而这个data很有可能需要计算得到,这种不断地去计算得到消耗资源,只计算一次最好(Vue计算属性的缓存)。而且这些计算得到的属性不能被Vue实例对象直接进行管理(重点),所以计算属性的最终目的就是让计算得到的属性挂在Vue实例对象vm上面,vm.property使用最方便。

2,什么是Vue里面的属性?

答: 实例化Vue对象时传入的data配置项对象里面的属性。可以这么说:被Vue管理的数据都是Vue的属性,只是这些数据的管理方式各异,存放在内存的不同地方,或者需要从服务器获取。

3,计算属性的定义?

答:对Vue管理的数据 进行一系列操作得到的新属性。

4,添加computed配置项对象并新增计算属性

vm = new Vue({
    el:'nodeobj',
    data:{
        firstname:'xx',
        lastname:'cc'
        },
    computed:{
        fullname:{
            //当HTML页面使用到了fullname属性,则会自动调用get方法,将其返回值作为属性值
            get(){return this.firstname+this.lastname}
                 }
             }
            })

        其中,get中的隐藏this参数默认指向vm对象。按道理来说,this由浏览器指定,但是Vue实例自动将this指针改成了自己的地址,这样才能让计算属性挂在自己身上。

5,如何使用计算属性?

答:计算属性被Vue实例对象进行了数据代理,可以通过Vue实例去获取,即vm.computed_property。 

 6,计算属性的get方法什么时候执行?

答:第一次更新模板时(强制的)。计算属性依赖的属性发生变化时。

7,计算属性的set方法?

答:当计算属性(很不幸被Vue强制收编了)需要修改时,由于数据代理,必须通过set方法进行修改(因为只有vm.property才能找到它,没有其他途径找得到了,茫茫16g内存,你到底在哪儿?) ,所以set方法有一个形式参数value指向被修改的值,只有当计算属性被修改时,才会调用set方法。

vm = new Vue({
    el:'nodeobj',
    data:{
        firstname:'xx',
        lastname:'cc'
        },
    computed:{
        fullname:{
            //当HTML页面使用到了fullname属性,则会自动调用get方法,将其返回值作为属性值
            get(){return this.firstname+this.lastname},
            set(value){log(value)},
                 }
             }
            })

8,尽量使用Vue的属性用于属性计算?

答:尽量实现被Vue实例管理的数据用于属性计算。不要随便使用变量进行计算(即使可行。) 

9,Vue计算属性的细节

10, 计算属性的简写形式?

答:只有当计算属性不会被修改时(不涉及set方法)时可以进行简写。

vm = new Vue({
    el:'nodeobj',
    data:{
        firstname:'xx',
        lastname:'cc'
        },
    //fullname()等价于get()
    computed:{
        fullname(){
                return this.firstname+this.lastname}
            })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/560493.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pytorch完整模型训练套路

文章目录 CIFAR10数据集简介训练模型套路1、准备数据集2、加载数据集3、搭建神经网络4、创建网络模型、定义损失函数、优化器5、训练网络6、测试数据集7、添加tensorboard8、转化为正确率9、保存模型 完整代码 本文以 CIFAR10数据集为例,介绍一个完整的模型训练套路…

机器学习-线性代数-向量、基底及向量空间

概述 文章目录 概述向量理解向量运算 基底与向量的坐标表示基底与向量的深入基底与向量选取与表示基底的特殊性张成空间 向量 理解 直观理解 行向量:把数字排成一行A [ 4 5 ] [4~ 5] [4 5]列向量:把数字排成一列A [ 4 5 ] \ \left [ \begin{matrix}…

多线性开发实例分享

一. 概述 首先,在这里有必要和大家复现一下我使用该技术的背景: 在使用若依框架的时候,由于实际开发的需要,我需要配置四个数据源,并且通过mapper轮流去查每个库的指定用户数据,从而去判断改库是否存在目标…

构建一个简易数据库-用C语言从头写一个sqlite的克隆 0.前言

英文源地址 一个数据库是如何工作的? 数据是以什么格式存储的(在内存以及在磁盘)?何时从内存中转移到此磁盘上?为什么每张表只能有一个主键?回滚一个事务是如何工作的?索引是以什么格式组织的?什么时候会发生全表扫描, 以及它是如何进行的?准备好的语句是以什么格式保…

#C2#S2.2~S2.3# 加入 factory/objection/virtual interface 机制

2.2 加入factory 机制 factory机制的实现被集成在了一个宏中:uvm_component_utils。这个宏所做的事情非常多,其中之一就是将my_driver登记在 UVM内部的一张表中,这张表是factory功能实现的基础。只要在定义一个新的类时使用这个宏&#xff0…

斐波那契数列相关简化4

看这篇文章前需要看下前面三篇文章,最起码第一第二篇是需要看一下的 斐波那契数列数列相关简化1_鱼跃鹰飞的博客-CSDN博客 斐波那契数列数列相关简化2_鱼跃鹰飞的博客-CSDN博客 算法玩的就是套路,练练就熟悉了 再来一个: 用1*2的瓷砖&am…

如何在 CentOS Linux 上安装和配置 DRBD?实现高可用性和数据冗余

DRBD(Distributed Replicated Block Device)是一种用于实现高可用性和数据冗余的开源技术。它允许在不同的服务器之间实时同步数据,以提供数据的冗余和容错能力。本文将详细介绍如何在 CentOS Linux 上安装和配置 DRBD。 1. 确认系统要求 在…

一文带你了解MySQL之InnoDB统计数据是如何收集的

前言 本文章收录在MySQL性能优化原理实战专栏,点击此处查看更多优质内容。 我们前边唠叨查询成本的时候经常用到一些统计数据,比如通过show table status可以看到关于表的统计数据,通过show index可以看到关于索引的统计数据,那…

MySQL之事务初步

0. 数据源 /*Navicat Premium Data TransferSource Server : localhost_3306Source Server Type : MySQLSource Server Version : 80016Source Host : localhost:3306Source Schema : tempdbTarget Server Type : MySQLTarget Server Version…

在线OJ常用输入规则

一、字符串输入规则 1.1 单行无空格字符串输入 输入连续字符串,cin默认空格/换行符为分割标志。 string s; //输入连续字符串,cin默认空格/换行符为分割标志。 cin >> s; 1.2 单行有空格字符串输入 getline函数接受带有空格的输入流&#xff…

C++——初识模板

文章目录 总述为什么要有模板函数模板概念函数模板使用方法函数模板的原理函数模板的实例化隐式示例化显式实例化 模板参数的匹配规则 类模板类模板的实例化 总述 本篇文章将带大家简单的了解一下c的模板方面的知识,带大家认识什么是模板,模板的作用&…

STL-常用算法(一.遍历 查找 排序)

目录 常用遍历算法: for_each和transform函数示例: 常用查找算法: find函数示例: find_if函数示例: adjacent_find示例: binary_search函数示例: count函数示例: count_if函…

训练/测试、过拟合问题

在机器学习中,我们创建模型来预测某些事件的结果,比如之前使用重量和发动机排量,预测了汽车的二氧化碳排放量 要衡量模型是否足够好,我们可以使用一种称为训练/测试的方法 训练/测试是一种测量模型准确性的方法 之所以称为训练…

springmvc升级到springboot2踩的坑

声明:删除springmvc的jar配置改成springboot的,若别的组件依赖springboot该升级就升级,该删掉就删掉,此文章只记录升级后的坑,升级springboot所需的jar请自行百度。 一.Hibernate的坑 概念:jpa和Hibernate的关系,jpa…

【JAVAEE】网络编程的简单介绍及其实现

目录 1.什么是网络编程 网络编程中的基本概念 常见的客户端服务端模型 2.Socket套接字 Socket套接字分类 举例对比TCP和UDP 3.UDP数据报套接字编程 DatagramSocket API DatagramPacket API InetSocketAddress API 4.实现一个简单的UDP回显服务器与客户端 服务端与客…

当前最新免费使用GPT-4方法汇总

目录 前言 温馨提示 Ora AI 使用方式 使用测试 Forefont chat 使用方式 使用测试 Perplexity AI 使用方式 使用测试 Poe 总结 前言 目前GPT-4的收费对于大多数人而言都还是不便宜,且付费方式复杂,使用上还有每3小时25个问题的限制&#xff…

Aspose.OCR For NET 23.5 Crack

使用几行代码将光学字符识别 (OCR) 添加到您的 .NET 应用程序。 适用于 .NET 的 Aspose.OCRAspose.OCR 文档 Aspose.OCR for .NET 是一个功能强大但易于使用且具有成本效益的光学字符识别 API。有了它,您可以用不到 5 行代码将 OCR 功能添加到您的 .NET 应用程序…

【Linux】初识优雅的Linux编辑器——Vim

❤️前言 大家好!今天给大家带来的博客内容是关于Linux操作系统下的一款多模式文本编辑器Vim。本文将和大家一起来了解Vim编辑器的一些基础知识。 正文 Vim是一个多模式的文本编辑器(一共有十二种模式),其中我们当我们初学Vim时主要了解如下三种工作模式…

Linux——多线程(线程概念|进程与线程|线程控制)

目录 地址空间和页表 如何看待地址空间和页表 虚拟地址如何转化到物理地址的 线程与进程的关系 什么叫进程? 什么叫线程? 如何看待我们之前学习进程时,对应的进程概念呢?和今天的冲突吗? windows线程与linux线…

Leetcode665. 非递减数列

Every day a Leetcode 题目来源:665. 非递减数列 解法1:贪心 本题是要维持一个非递减的数列,所以遇到递减的情况时(nums[i] > nums[i 1]),要么将前面的元素缩小,要么将后面的元素放大。 …