计算属性computed

目录

1.计算属性中的getter

2.计算属性中的setter

3.计算属性简写形式

4.计算属性与methods中方法的对比

5.计算属性与侦听器的对比

---

1.计算属性中的getter

计算属性 : 要使用的数据不存在,需要通过已有的属性计算得到.

get函数中的返回值,作为计算属性的属性值.

get函数什么时候调用: 

  1. 初次页面渲染时调用

  2. 当get函数中依赖的数据发生改变时调用

 示例代码:

<div id="app">
    <h1>{
  {getValue}}</h1>
    <h1>{
  {getValue}}</h1>
    <h1>{
  {num}}</h1>
    <!--    页面显示 : 原数据 原数据 1-->
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            value:'原数据',
            num: 0
        },
        computed: {
            getValue: {
                // get函数第一次渲染页面调用,
                // get函数所依赖的数据发生改变时调用, 数据不发生改变直接用缓存数据
                get: function () {
                    this