Vue2和Vue3中计算属性computed的用法区别

看见代码就要慌

已于 2023-03-29 19:22:57 修改

阅读量451

点赞数

文章标签：前端 javascript vue.js

于 2023-03-29 19:20:10 首次发布

本文链接：https://blog.csdn.net/m0_53910290/article/details/129842837

版权

1.Vue2中computed的写法

<template>
    <div>
        全名：{{comName}}  //直接在模板里就可以使用
    </div
</template>
<script>
    export default {
        data(){
            full:{
                 firstName:'张',
                 lastName:'三'
            }
        },
         computed:{
            // 简写方式  只能取到最新的值
            comName(){
                  return  this.full.firstName + '~' + this.full.lastName //自定义的数据
            },
            // 第二种写法：可以检测到改变后的值 对象写法
            comName: {
                  get() {
                    return this.full.firstName + "~" + this.full.lastName;
                  },
                  set(value) {
                    let newName = value.split("~");
                    this.full.firstName = newName[0];
                    this.full.lastName = newName[1];
                  },
            },
         },

    }

</script>

2.Vue3中computed的写法

<template>
    <div>
      <h4>姓：<input type="text" v-model="full.firstName"></h4>
      <h4>名：<input type="text" v-model="full.lastName"></h4>
      <h4>全名: {{full.comName}}</h4>
        
    </div>
</template>
<script>
  // 在Vue3中是作为组合式API引入的
  import {reactive,computed} from "vue";
  export default {
    setup(){
      const full = reactive({
            firstName:'张',
            lastName:'三'
      })
      // 简写方式 //可以作为full里面的参数使用 但是只能获取值，而不能进行修改
      full.comName = computed(()=>{
            return full.firstName + '~' + full.lastName
      })
      //通过get和set的方法可以获取修改后的值
      //full.comName = computed({
      //  get(){
      //    return full.firstName + '~' + full.lastName
      //  },
      //  set(value){
      //    let newName = value.split('~')
      //    full.firstName = newName[0]
      //    full.lastName = newName[1]
      //  }
      //})
      return{
          full
      }
  }
}
</script>