VUE 3 的计算属性 computed

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]
          }
      })
  }

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数

import { createApp } from 'vue'

import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)

const app = createApp(App)

//挂载

app.mount('#app')

App.vue

<template>

    <Demo/>

</template>

<script>

    import Demo from './components/Demo'

    export default {

        name: 'App',

        components:{Demo},

    }

</script>

components\Demo.vue

<template>

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

    姓：<input type="text" v-model="person.firstName">

    <br>

    名：<input type="text" v-model="person.lastName">

    <br>

    <span>全名：{{person.fullName}}</span>

    <br>

    全名：<input type="text" v-model="person.fullName">

</template>

<script>

    import {reactive,computed} from 'vue'

    export default {

        name: 'Demo',

        setup(){

            //数据

            let person = reactive({

                firstName:'张',

                lastName:'三'

            })

            //计算属性——简写（没有考虑计算属性被修改的情况）

            /* 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

            }

        }

    }

</script>