Vue学习笔记之04-computed计算属性

计算属性 computed

什么是计算属性, 在某些情况下, 需要将数据先进行转化后再进行显示, 或者需要将多个数据结合后再进行显示, 那么就需要将属性进行处理, 这就叫做计算属性
在进行变量的操作的时候将操作写到computed对象中, return 计算的结果
定义名字的时候尽量与methods的方法区别开来, methods中定义名字用动词, computed中定义名字用名词

<div id="app"><!-- 定义好后直接mustache语法调用即可 --><h2>{{fullName}}</h2></div><script>const app = new Vue({el: "#app",data: {firstName: "kobe",lastName: "bulaen"},// 计算属性 computedcomputed: {fullName: function () {return this.firstName + " " + this.lastName;}}})</script>

computed 和 methods 其实都可以实现功能, 但是为什么要分开呢?
实际上, 虽然computed 和methods 都可以实现功能, 但是它们两个内部进行的操作是不一样的
computed 计算属性会进行缓存, 多次调用里面的函数, 只会计算一次, 而methods不会进行缓存, 多次调用的话, 会调用多次

computed计算属性的set和get

<div id="app"><!-- computed 是一个属性, 而不是一个函数, 所以mustache语法中不需要加括号调用 --><h2>{{fullName}}</h2></div><script>const app = new Vue({el: "#app",data: {firstName: "kobe",lastName: "bulan"},computed: {// 完整写法 完整写法一般是传入一个对象, 对象里面有两个函数, set 和 get/* fullName: {// set函数用来设置属性, 但是在计算属性中, 一般只用get函数, 不用set函数 set: function (newValue) {// set函数一般有一个形参用于接收传递进来的参数const names = newValue.split(" ");this.firstName = names[0];this.lastName = names[1];},get: function () {return this.firstName + " " + this.lastName;}} */// computed 中一般不会用来设置属性, 所以只写get函数, 所以省略写法可以这样写fullName: function () {return this.firstName + " " + this.lastName;}}})</script>

methods和computed的区别

methods是函数方法, 如果调用多少次就会调用多少次
computed是计算属性, 具有缓存机制, 在数据没有改变的情况下, 只会调用一次
所以在对数据进行处理的话就用computed计算属性, 而对事件的绑定则使用methods方法

Vue学习笔记之04-computed计算属性相关推荐

【Vue学习笔记_03】v-bind动态绑定属性
[Vue学习笔记_03]v-bind动态绑定属性 v-bind基本使用 v-bind动态绑定class 对象语法(很常用) 数组语法 v-bind动态绑定style 对象语法数组语法配套可执行代码 ...
image是否有disabled属性_Vue学习笔记模板语法、计算属性
点击上方"蓝字"关注我们吧! vue学习笔记官网:https://cn.vuejs.org/v2/guide/ 1.vue体验 demo示例: image.png 示例代码: & ...
Vue项目中如何使用computed计算属性
文章目录 computed: 1.基本使用: 1.1 应用场景: 1.2 代码位置: 1.3 值: 2.复杂操作-结合data中数据: 3.计算属性写法演变: 3.1 计算属性的setter和gett ...
【VUE】源码分析 - computed计算属性的实现原理
tip:本系列博客的代码部分(示例等除外),均出自vue源码内容,版本为2.6.14.但是为了增加易读性,会对不相关内容做选择性省略.如果大家想了解完整的源码,建议自行从官方下载. GitHub - ...
Vue学习（watch、computed、生命周期、filter）- 学习笔记
文章目录 Vue学习(watch.computed.生命周期)- 学习笔记 watch 监听 computed 计算属性 set---动态添加属性 delete---删除生命周期 filter 过滤 ...
深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长拿官网简单的例子来看一下: <div id="example"><p> ...
Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...
VUE学习一：初识VUE、指令、动态绑定、计算属性
文章目录导言一.01-初体验 1. ch01_helloworld.html 2. ==v-for指令==:ch02_vue列表展示_v-for.html 3. ==v-on指令==:ch03.1 ...
Vue中的computed计算属性
文章目录 computed与watch的异同不同点相同点示例源码结果分析 computed与watch的异同不同点触发条件不同 computed计算属性会依赖于使用它的data属性 ...

Vue学习笔记之04-computed计算属性

计算属性 computed

computed计算属性的set和get

methods和computed的区别

Vue学习笔记之04-computed计算属性相关推荐

最新文章

热门文章