【vue3】computed计算属性

里面依赖的值只要发生变化，就会触发

import { ref, computed } from 'vue';

let name1 = ref('张')
let name2 = ref('三')

/**
 * 写法一-选项式写法，必须传入get、set函数自定义操作
 */
let totalName = computed({
    get(){
        return name1.value+'-'+name2.value
    },
    set(newVal){
        [name1.value,name2.value] = newVal.split('-')
    }
})

const changeName = () =>{
    totalName.value = '游-芸霞' //会触发computed里面的set函数
}

/**
 * 写法二-函数式写法，更简单了
 * 但是不允许修改，只能get
 */
let totalName2 = computed(()=>name1.value+'-'+name2.value)


<template>
    <h1>computed计算属性</h1>
    <div>
        <span>姓：</span>  <input v-model="name1" />
    </div>
    <div>
        <span>名：</span>  <input v-model="name2"/>
    </div>
    <div>
        <span>全名：</span>  <input v-model="totalName"/>
        <span>全名：</span>  <input v-model="totalName2"/>
    </div>
    <button @click="changeName">更改名字</button>
  
</template>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46