Vue.js 3.x学习笔记

1.setup()

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>{{msg0}}</div>
    <div id="a" @click="changeMsg">{{ msg }}</div>
  </div>
</template>
<script>
import { reactive, toRefs, ref } from "@vue/composition-api";

export default {
  setup() {
    console.log('输出测试')
    const msg0=ref('加油')
    msg0.value='加油1'
    const msg = reactive({
      msg: 55,
    });
    const changeMsg = () => {
      msg.msg = 66;
    };

    return { ...toRefs(msg), changeMsg,msg0 };
  },
};
</script>
<style lang="less">
.about {
  #a {
    color: red;
  }
}
</style>

2.computed,watch

<div>doubleNum{{ doubleNum }}</div>
<div>doubleNum0{{doubleNum0}}</div>

import { reactive, toRefs, ref, computed,watch } from "@vue/composition-api";

export default {
  setup() {
    console.log("输出测试");
    const msg0 = ref("加油");
    msg0.value = "加油1";
    const state = reactive({
      msg: 1,
       doubleNum0:computed(()=>state.msg*3) 
    });
   
   
   const doubleNum =  computed(()=>{
      return state.msg * 2;
    })

    watch(()=>state.msg,(newValue,oldValue)=>{
      console.log(newValue+"/"+oldValue)
    })

    return { ...toRefs(state), , msg0, , doubleNum, };
  },
};