Vue2.0——computed 计算属性区域

一、概念

计算属性区域
类似变量的声明 监听变量 可以缓存之前的变量值
默认只能读取 readonly
使用get set 访问器 写的值 是可读可写的

computed里面不是方法，用的时候都是属性赋值【同监听器】。使用的时候都是以变量形式绑定。
（和变量一样，只不过里面可以写复杂的逻辑代码）

<template>
<div id="page">
    {{msg.split('').reverse().join("")}}
    <br>
    {{reverseStr}}
</div>
</template>
<script>
export default{
    name:"page",
    data(){
        return {
            msg:"Hello！"
        }
    },
    mounted(){
        //按属性方式调用computed
        console.log(this.reverseStr);
        //默认计算属性的方法只存在getter 下面写法会报错
        this.reverseStr='你好';
    },
    computed:{
        //默认写的格式
        //下面这个简单模式 类似getter访问器
        reverseStr(){
            //this 指向vm实例 组件对象
            //逻辑代码进行属性操作
            let newStr=this.msg.split("").reverse().join("");
            return newStr;
        },
    }
}
</script>

默认只能读取 readonly！

二、和methods区别

1.计算属性 和 函数调用 两个返回的结果是一致的

<template>
<div id="page">
    {{reverseStr}}
    {{getMsg()}}
</div>
</template>
<script>
export default{
    name:"page",
    data(){
        return {
            msg:"Hello！"
        }
    },
    methods:{
        getMsg(){
            let newStr=this.msg.split("").reverse().join("");
            return newStr;
        }
    },
    computed:{
        reverseStr(){
            //this 指向vm实例 组件对象
            //逻辑代码进行属性操作
            let newStr=this.msg.split("").reverse().join("");
            return newStr;
        },
    }
}

区别：
计算属性以来的是vue的底层监听器 getter setter 【数据双向】
如果变量没有被修改 计算属性返回的是之前的旧值(缓存值) ，不会重新进行逻辑运算

3.计算属性来写setter访问器

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

eg1:

    {{work}}
    <input type="text" v-model="work">

<script>
export default{
    name:"page",
    data(){
        return {
            job:"学生",
        }
    },
    computed:{
        //默认写的格式
        //下面这个简单模式 类似getter访问器
        reverseStr(){
            //this 指向vm实例 组件对象
            //逻辑代码进行属性操作
            let newStr=this.msg.split("").reverse().join("");
            return newStr;
        },
        
        //计算属性配置getter setter 访问器
        work:{
            get(){
                return this.job;
            },
            set(value){
                this.job=value;
            }
        }
    }
}
</script>

当input框中的work值发生变化后，会调用setter，接着重新执行getter

eg2:

<template>
<div id="compon">
    组件
    {{msg}}
    <button @click="changeMsg">修改值</button>
    <button @click="changeCount">count++</button>
    {{count}}
</div>
</template>
<script>
//每个组件都存在自己的生命周期
//写的时候得常规方法：
export default{
    name:"compon",
    data() {
        return {
            msg:"你好",
            num:0,
        }
    },
    methods: {
        changeMsg(){
            this.msg="Hello!";
        },
        changeCount(){
            this.count++;
        }
    },
    computed:{
        //计算属性区域(不用写入data)
        //使用get set 访问器  写的值  是可读可写的
        count:{
            get(){
                return this.num;
            },
            set(vm){
                this.num=vm;
            },
        }
    },
    watch:{
        //监听
        count(newValue,oldValue){
            console.log(newValue, oldValue);
        },
    }
}
</script>