视频内容

computed函数

• 与Vue2.x中computed配置功能一致

• 写法

  import {computed} from 'vue'
  
  setup(){
      ...
      //计算属性——简写
      let fullName = computed(()=>{
          return person.firstName + '-' + person.lastName
      })
      //计算属性——完整
      let fullName = computed({
          get(){
              return person.firstName + '-' + person.lastName
          },
          set(value){
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
          }
      })
  }

源码

components\Demo.vue

<template>
    <h1>一个人的信息</h1>

    姓：<input type="text" v-model="person.firstName">
    <br/>
    名：<input type="text" v-model="person.lastName">
    <br/>
    <span>Vue3 姓名:{{ person.fullName }}</span>
    <br/>
    全名: <input type="text" v-model="person.fullName">
    <br/>
    <br/>
    <!-- Vue2 演示-->
    <span>Vue2 姓名:{{ vue2FullName }}</span>
</template>

<script>
    //Vue3中使用 computed 需要引入:
    import {reactive,computed} from 'vue'

    export default {
        name: 'Demo',

        //在Vue3中也可以按照Vue2的套路写,但是不建议这么操作。
        //Vue2写法,不需要引入 computed
        computed:{
            vue2FullName(){
                return this.person.firstName + '-' + this.person.lastName
            }
        },

        setup(){
            //数据
            let person = reactive({
                firstName:'张',
                lastName:'三'
            })

            //计算属性
            //Vue2演示:
            let vue2FullName = computed(()=>{
                return person.firstName + '-' + person.lastName
            })
            //Vue3演示:
            //也可以直接给 persion 追加一个属性:
            //计算属性: 简写（没有考虑计算属性被修改的情况）
            /*person.fullName = computed(()=>{
                return person.firstName + '-' + person.lastName
            })
            */
            //上面∈只读写法,如果还需要可写,则完整写法:
            person.fullName = computed({
                get(){
                    return person.firstName + '-' + person.lastName
                },
                set(value){
                    const nameArr = value.split('-')
                    person.firstName = nameArr[0]
                    person.lastName = nameArr[1]
                }
            })

            //返回一个对象（常用）
            return {
                person,

                vue2FullName
            }
        }
    }
</script>