组合API

<script>
import {computed, onBeforeMount, onMounted, reactive, ref, watch} from "vue";

export default ({
  name: "GroupAPI",
  data() {
    return {num: 10}
  },
  setup() {//setup会自动执行，并且会在beforeCreated钩子方法执行之前就自动执行
    console.log(this);    //undefined setup执行的时候连this都没有定义，多以我们不可能在setup调用选项api方法
    console.log("setup被执行了");
    let data = {name: 'xiaoming', age: 17, sex: true}//把数据(对象)通过reactive函数进行处理的目的是为了转换为响应式数据
    //一旦把数据转换为响应式数据，则vm对象就会自动的维护和保持数据的全局一致性
    //也就是Html中修改了数据，vm对象中的setup里面的数据也会发生改动
    //如果希望数据提供给视图模板HTML中
    let user = reactive(data)

    let message='hello';
    // let message = 100;
    // let msg=reactive(message);
    // let msg=reactive({value:message});//如果想使用reactive使数据发生响应需要转换为对象
    let msg = ref(message);//或者直接使用ref  ref的本质就是上面代码的简写
    // console.log(msg.value)//setup代码中如果要调用经过ref处理过的数据，需要value属性来操作//但是无法<p>{{msg.value}}</p>获得数据
    // msg.value = 4000;//修改也是通过value属性来操作
    let change_user_info = () => {
      user.age = 30//此处操作的不只是user对象，也是data对象(根对象)
    }
    let add_msg = () => {
      msg.value++
      // msg  //Must use `.value` to read or write the value wrapped by `ref()`  vue/no-ref-as-operand//使用ref()不能够单独使用msg setup()里面需要添加.value属性
    }
    //钩子方法的调用组合[API中不再提供created和beforeCreated,原来这2个钩子方法中代码直接写在setup中即可]
    onBeforeMount(() => {
      console.log("onBeforeMounted")
    })
    onMounted(() => {
      console.log("onMounted")
    });
    //监听数据
    // watch("变量名", (new_value,old_value) => {
    //
    // })
    watch(msg, () => {
      if(msg.value==='python'){
        console.log("message的值不能为python了")
        msg.value=2000
      }
    })
    //计算属性
    let new_msg=computed(()=>{
      return msg.value*4;
    })
    return {
      user,//user:user简写
      data,//非响应数据  不能使用v-model
      msg,//非响应数据  不能使用v-model
      message,//非响应数据  不能使用v-model
      add_msg,
      change_user_info,

      new_msg,
    }
  },
  beforeCreate() {
    console.log('钩子beforeCreate执行力');
  }
})
</script>

<template>
  <p>组合API的基本使用</p>
  <p>显示对象数据</p>
  <p>{{ user }}</p>
  <input type="text" v-model="user.age">
  <button @click="change_user_info">点击修改</button>
  <p>显示普通数据</p>
  <p>{{ data }}</p>
  <hr>
  <p>显示非对象的基本数据类型</p>
  <!--    <p>{{message}}</p>-->
  <!--  <p>{{msg}}</p>&lt;!&ndash;无法跟着改变&ndash;&gt;-->
  <!--  <input type="text" v-model="msg">-->

  <!--  <p>{{msg.value}}</p>-->
  <button @click="msg++">点击增加</button>
  <!--  or-->
  <button @click="add_msg">函数增加</button>
  <p>{{ msg }}</p>
  <p>{{new_msg}}</p>
  <input type="text" v-model="msg">

</template>

<style scoped>

</style>