计算属性普通函数写法 和 set get 写法

特点：

1. 定义的时候，要被定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可
3. 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

好处：

1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！
   普通写法

<template>
  <div>
    <p>和为: {
   { num }}</p>
    <p>{
   { reverseMessage }}</p>
  </div>
</template>

<script> export default {
       data() {
       return {
       a: 10, b: 20, message: "我是个字符串", }; }, computed: {
       num() {
       return this.a + this.b; }, reverseMessage() {
       return this.message.split("").reverse().join(""); }, }, }; </script>

复杂写法

<template>
    <div>
        
        <div>性别是：{
    {
    getsex}}</div>
        <button @click="addarr">添加</button>
        <div>改变name的值 {
    {
    getname}}</div>
    </div>
</template>
 
<script>
    export default {
    
        name: "newsdetail",
        data(){
    
            return{
    
               sex:['男','女'],
                first: 'wang',
                two: 'kun'
            }
        },
        computed: {
    
            // 每个计算属性都包括一个getter(get)和一个setter(set)
            //在计算属性内填写的函数相当于简写的get
            getsex:function (){
    
                //计算属性函数中的return不能少
                return this.sex[0]
            },
            getname:{
    
                get: function () {
    
                    console.log('调用了fullName的get方法');
                    return this.first + ' ' + this.two;
                },
                //只有当getname中的值改变的时候才能触发set，传值的value是getname改变的值
                set: function (value) {
    
                    console.log('调用了fullName的set方法',value);
                    const names = value.split(' ');
                    this.first = names[0];
                    this.two= names[1];
                }
 
            }
        },
        methods:{
    
            addarr:function (){
    
                this.getname='jiang ke'
            }
        }
    }
</script>
 
<style scoped>
 
</style>