定义：

要用的属性不存在，要通过已有属性计算得来。

原理：

底层借助了Objcet.defineproperty方法提供的getter和setter。

get函数执行时机：

(1)初次读取时会执行一次。
(2)当依赖的数据发生改变时会被再次调用。

优势：

与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注：

(1)计算属性最终会出现在vm上，直接读取使用即可。
(2)如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

Demo:

 <body><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',x:'你好'},computed:{fullName:{get(){console.log('get被调用了')return this.firstName + '-' + this.lastName},set(value){console.log('set',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}})</script>

当计算属性只有getter时，可简写

computed:{fullName(){console.log('get被调用了')return this.firstName + '-' + this.lastName}}}

Vue基础之计算属性相关推荐

Vue基础语法-计算属性
计算属性 * 计算属性计算属性写法是个方法,但是使用的时候作为属性使用.计算属性中使用到data中的数据只要发生了变化,计算属性就会重新计算.如果两次获取计算属性的时候,里面使用的属性没有发生变化, ...
[vue] watch和计算属性有什么区别？
[vue] watch和计算属性有什么区别? 一个是侦听属性,一个是计算属性 2.一个是为了应对复杂的逻辑计算,一个是对数据的变化作出反应 3.一个是只有当缓存改变时才执行,一个是只要从新渲染就会执行 ...
[vue] 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？
[vue] 在使用计算属性的时,函数名和data数据源中的数据可以同名吗? 莫名其妙的问题.可以同名,但data会覆盖methods.并且本就不该同名,同名说明你命名不规范.然后解释为什么会覆盖,因为 ...
Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
面试题！vue中的计算属性、方法、侦听属性
1.计算属性详细的内容可跳转至vue 计算属性可以使用计算属性来代替在表达式中进行的复杂运算,以便于能够更方便的维护与复用逻辑. 计算属性是在选项对象中使用 computed 字段来定义. 特点: ...
Vue 第一天: 计算属性和观察者
计算属性和观察者计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
五十八、Vue中的计算属性，方法和侦听器
@Author:Runsen @Date:2020/10/15 本篇是水篇,记录前端的学习,争取早日拿到前端offer 计算属性,方法和侦听器所以,对于任何复杂逻辑,你都应当使用计算属性.(官方原话 ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...
003-读书笔记-Vue官网计算属性与监听器
1.计算属性 1-1 计算属性概述计算属性也是 Vue 实例的属性,和 data 方法中返回的对象中的属性是等同的存在.通常来说,计算属性可以简单理解: 计算属性其实就是 Vue 实例的一个属性计 ...

Vue基础之计算属性

Vue基础之计算属性

定义：

原理：

get函数执行时机：

优势：

备注：

Demo:

Vue基础之计算属性相关推荐

最新文章

热门文章