Vue 学习笔记(二): 计算属性-computed

computed 与缓存

html 部分

<div id="app">
    {{fullName}}
    <span>{{age}}</span>
</div>

js 部分

let app = new Vue({
    el: '#app',
    data: {
        firstName: 'dev',
        lastName: 'zhang',
        age: 88
    },
    computed: {
        fullName() {
            console.log('计算一次');
            return this.firstName + " " + this.lastName
        }
    },
})

实现效果

image

动态修改 age 的值, 计算属性不会触发更改, 修改两个参考值中的一个, 计算属性会触发重新计算. 所以计算属性是有缓存的, 在参考值没有发生变化的情况下是不会重复计算和更新 DOM 的, 对性能提升有好处.

image

computed 与 function

html 修改为

<div id="app">
    {{fullName()}}
    <span>{{age}}</span>
</div>

js 代码修改为

let app = new Vue({
    el: '#app',
    data: {
        firstName: 'dev',
        lastName: 'zhang',
        age: 29
    },
    methods: {
        fullName() {
            console.log('执行一次方法');
            return this.firstName + ' ' + this.lastName
        }
    },
})

效果图

image

这时候虽然效果能实现, 但是每次更新元素里的任何一项, 都会触发方法进行计算, 并更新 DOM,对性能有不必要的浪费

computed 与 watch

js 代码修改

let app = new Vue({
    el: '#app',
    data: {
        firstName: 'dev',
        lastName: 'zhang',
        fullName: 'dev zhang',
    },
    watch: {
        firstName(val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName(val) {
            this.fullName = this.firstName + ' ' + val
        }

    },
})
image

watch 会监听对应的要素值变化, 这样也能实现和 computed 一样的效果, 但代码量会比 computed 多.

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 3,188评论 1 23
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 366评论 0 1
  • 前言 最近在学习Vue计算属性的源码,发现和普通的响应式变量内部的实现还有一些不同,特地写了这篇博客,记录下自己学...
    心_c2a2阅读 134评论 0 3
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 2,992评论 1 46
  • 基本介绍 话不多说,一个最基本的例子如下: Vue中我们不需要在template里面直接计算{{this.firs...
    指尖跳动阅读 133评论 0 1