Vue 计算属性 computed

<!--计算属性：1. 定义：要用的属性不存在，要通过已有的属性计算得来2. 原理：底层借助了 Object.defineProperty 方法提供的 getter 和 setter3. get 函数什么时候执行？(1). 初次读取时会执行一次(2). 当依赖的数据发生改变时会被再次调用4. 优势：与 methods 实现相比，内部有缓存机制（复用），效率高，调试方便5. 备注：1. 计算属性最终会出现在 vm 上，直接读取使用即可2. 如果计算属性要被修改，那必须写在 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变
-->
<div id="root"><ul><li>姓：<input type="text" v-model="firstName"></li><li>名：<input type="text" v-model="lastName"></li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li></ul>
</div>
<script src="../js/vue.js"></script>
<script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {firstName: '张',lastName: '三'},computed: {getFullName: {get() {console.log(1);console.log('已通过 get 方式获取到了 getFullName 这个计算属性的值');return this.firstName + ' - ' + this.lastName;},set(value) {console.log('已通过 set 方式修改了 getFullName 这个计算属性的值');let arr = value.split('-');this.firstName = arr[0];this.lastName = arr[1];}}}});
</script>
<script src="../js/vue.js"></script>
<script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {firstName: '张',lastName: '三'},computed: {getFullName: {get() {console.log(1);console.log('已通过 get 方式获取到了 getFullName 这个计算属性的值');return this.firstName + ' - ' + this.lastName;},set(value) {console.log('已通过 set 方式修改了 getFullName 这个计算属性的值');let arr = value.split('-');this.firstName = arr[0];this.lastName = arr[1];}}}});
</script>

Vue 计算属性的简写

computed: {// 原来的写法getFullName: {get() {console.log(1);console.log('已通过 get 方式获取到了 getFullName 这个计算属性的值');return this.firstName + ' - ' + this.lastName;},set(value) {console.log('已通过 set 方式修改了 getFullName 这个计算属性的值');let arr = value.split('-');this.firstName = arr[0];this.lastName = arr[1];}}// 如果只是读取(getter), 就可以写成这种形式getFullName() {console.log('get 被调用了');return this.firstName + '-' + this.lastName;}
}

Vue 计算属性 computed相关推荐

vue计算属性computed和侦听属性watch的用法和区别
计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用.注意:计算属性里面必须要ruturn,否则无法拿到结果.计算属性 ...
Vue计算属性- computed:{}
七. Vue计算属性计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行 ...
vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性
vue基础-动态class.动态style.vue过滤器.vue计算属性文章目录 vue基础-动态class.动态style.vue过滤器.vue计算属性 vue基础-动态class vue基础-动 ...
Vue - 计算属性
1.vue计算属性-computed 一个数据, 依赖另外一些数据计算而来的结果场景: 一个变量的值, 需要用另外变量计算而得来语法: computed: {"计算属性名" ( ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
vue 计算属性和data_vue之watch和计算属性computed
区别一:watch监听的是一个变量(或者一个常量)的变化,这个变量可能是一个单一的变化也可能是一个数组.computed可以监听很多个变量,但是这个变量一定是vue实例里面的. Vue 测试实例 - ...
vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现
1. 前言原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...
Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...

Vue 计算属性 computed

Vue 计算属性 computed相关推荐

最新文章

热门文章