Vue2中使用计算属性

计算属性的概念与使用场景主要有以下几点

1.初始化时，要显示的数据，不存在，需要通过计算操作得
2.执行的时机有2步: (1)初始化显示会执行一次（有特殊情况），拿到初始值，去显示。（2）当计算属性时，所依赖的数据发生改变时，会被从新渲染

为了方便理解下面有个例子

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
        <h1>{{title}}</h1>
        <h1>{{index}}</h1>
        <h1>{{fillname}}</h1>
    </div>
    <script>

        const vm = new Vue({       //vue 的实例
            el: "#app",
            data: {
                title: "学习vue",
                index: "计算属性"
            },
            computed: {
                fillname() {
                    return this.title + this.index
                }
            }
        })
        console.log(vm);
    </script>

页面上有3个h1标签，分别用到了3个属性值，第一个和第二个标签显示的属性值，我们在data里面初始化定义过了，所以会显示对应的属性值，这没问题，并且data里面的值，被通过数据代理的方式代理到了，vue实例身上。 但是请想一下，第3个h1标签里面的显示内容是什么呢？他的状态值，我们并没有在data里面定义，这时候又涉及到了一个新的，名叫计算属性。

计算属性，也就表示，他的属性值，并不是，固定的，而是依赖于，其他的属性值，通过计算操作而得到的结果，就是计算属性的属性值。 所以 vue 里面有一个 computed 计算属性的方法，在这个方法里面，我定义了一个 fillname 的属性名，而它的属性值，就是我们 return返回出去的那个值，这里this，指向vue实例，所以我们可以拿到this身上的title 和index，把它们的属性值，通过字符串拼接，组成一个新的属性值，返回出去，这时候，第三个标签属性就拿到了值，并且，也挂载到了vue的实例身上

这里需要注意一点的是，这个计算属性，并不是，被_data代理出去的，而是被计算过后，直接挂载到vue实例身上的

如果我们通过更改，data里面的属性值，而计算属性，又依赖于data 里面的属性，所以，vue 实例监视到数据发生变化，会重新刷新视图页面

不过以这样的书写格式定义计算属性，还会有一个问题。但如果，我们直接通过，更改vm.fillname 计算属性的值，这里会报错，这里表示，计算属性，已经被分配给get方法了，而修改数据，需要set方法，而以函数的方式定义计算属性的话，vue实例默认帮忙调用的是get方法，，所以这里 只能读写数据，而不能写入数据。

但如果，需要直接更改计算属性的数据，该怎么定义呢？get读取数据这个属性时，get方法被调用，页面初始化时，由于标签用到了计算属性，所以get会触发一次，并把返回值，给计算属性显示到页面。当我们修改这个属性值的时候，set方法触发，接收一个参数，就是，你修改的的那个值，然后拿到值，把值赋给自己所依赖那个属性，所依赖的值发生变化过后，自己的值，也就会动态更新了。

      computed: {
                fillname: {    //这里不要定义成函数简写，直接定义成对象，同时具有了set 和get方法
                    set(value) {     //接收修改的值
                        this.index = value
                        console.log("set被调用,修改数据", value);
                    },
                    get() {
                        console.log("get被调用,读取数据");
                        return this.title + this.index
                    }
                }
            }

小提示，vue在加载页面的时候，也会去监控容器，上面说，页面初始化时候，会默认调用get方法，但是如果，我们在容器中根本就没有使用，这个计算属性，vue为了避免不必要的加载，所有get（）方法也不会被调用。

#########有不足的地方，欢迎大家补充交流学习