vue 3

<template>
  <div>
    <h1>ref的绑值方法使用</h1>
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <div v-show="ag">ref计算属性，姓名和年龄凭接：{{ ag }}</div>
    <div>
      <button @click="ageadd()">年龄加加</button>
    </div>
    <hr>
    <h1>reactive的绑定值方法</h1>
    <div>爱好：{{ obj.hodbby }}</div>
    <div>体重：{{ obj.tz }}</div>
    <div v-show="obj.con">reactive计算属性：{{ obj.con }}</div>
    <div>
      <button @click="tzadd()">体重加加</button>
    </div>
  </div>
</template>

<script>
import {ref, computed, watch, reactive} from 'vue'

export default {
  name: 'teext',
  setup() {
    //ref绑定值方法，一般ref用来绑定字符串，数字类型，改变值必须.value方式
    let name = ref('张三');
    let age = ref(20)
    let ag = computed(() => {
      return name.value + '-' + age.value;
    })

    function ageadd() {
      age.value = age.value + 1;
    }

    watch(age, (newvalue, oldvalue) => {
      console.log('新值：' + newvalue + '；旧值：' + oldvalue)
    })

    //reactive绑定值方法，一般用来绑定对象，方法简便
    let obj = reactive({
      hodbby: ''
    })
    obj.hodbby = ['读书', '打游戏', '发呆'];
    obj.tz = 50;

    obj.con = computed(() => {
      return obj.hodbby[0] + '-------' + obj.tz
    })

    function tzadd() {
      obj.hodbby = ['抽烟', '喝酒', '烫头']
      obj.tz = obj.tz + 1;
    }

    watch(() => [obj.hodbby, obj.tz], (newvalue, oldvalue) => {
      console.log('新值：' + newvalue + '；旧值：' + oldvalue)
    }, {deep: true})

    return {name, age, ageadd, ag, obj, tzadd}
  }
}
</script>

<style scoped>
</style>