计算属性

与vue2.x中computed配置功能一致，但是使用前需要导入一个computed 计算属性的函数才能在setup中使用

<script setup>
import { ref, reactive, computed } from "vue";
import son from "./components/Son.vue";
let obj=ref({
      firstName:"jessica",
      lastName:"jung"
    });
let fullname=computed(()=>{
  return obj.value.firstName+"-"+obj.value.lastName;
});
let change=()=>{
  obj.value.firstName='hyomin';
  obj.value.lastName='park'
}
</script>

<template>
  <div>
    <h1>{{fullname}}</h1>
    <button @click="change">修改名字</button>
    <son></son>
  </div>
</template>

<style scoped>
</style>

Vue3中计算属性也是组合API风格

1.回调函数必须return，结果就是计算属性的值

2.如果计算属性依赖的数据发生变化，那么会重新计算

3.不要在计算属性中进行异步操作

// 修改计算属性的值
const site = computed({
      // getter，如果读取计算属性的值，默认调用get方法
    get: function () { 
        return this.name + ' ' + this.url 
    }, 
// setter 
    set: function (newValue) { 
// newValue是计算属性下传递的实参
// 如果要想修改计算属性的值，默认调用set方法
    var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] 
    } 
}

computed传入回调函数,默认调用get方法,只可读取计算属性的值

计算属性可以直接读取或者修改，如果要实现计算属性的修改操作，那么computed的实参应该是对象，读取数据触发get方法，修改数据触发set方法，set函数的形参就是你赋给计算属性的值（可读可写）

<script setup>
let URL = reactive({ name: "aotu", url: "http://www.aotu.com" });
let fullname = computed(() => {
  return obj.value.firstName + "-" + obj.value.lastName;
});
URL.full = computed({
  get() {
    return URL.name + "-" + URL.url;
  },
  set(value) {
    let names = value.split("-");
    URL.name = names[0];
    URL.url = names[names.length - 1];
  },
});
</script>

<template>
  <div class="app">
    name: <input type="text" v-model="URL.name" />
    url: <input type="text" v-model="URL.url" />
    <p>{{ URL.full }}</p>
    name+url: <input type="text" v-model.lazy="URL.full"/>
  </div>
</template>

vue3 计算函数

计算属性