关于vue3的一些开发技巧

//addFn.js
import {ref,watch} from "vue"
export default useadd = (num1,num2)=>{
    let res = ref(0);
    watch([num1,num2],(num1,num2)=>{
       addFn(nums1,nums2);
    })
    let addFn =(nums1,nums2)=>{
        res.value = nums1 + nums2
    }
    return {res,addFn} 
}

<script>
    import useAdd from "./addFn.js"
    export default defineComponents({
        setup(props,{emits}){
            let num1 = ref(0);
            let num2 = ref(0);
            let {res,addFn} = useAdd(num1,num2);
            addFn(num1.value,num2.value);
              return {
                  res,num1,num2
                 }
             }
    })
</script>

一般情况下，vue3是这样写的

<script>
import { ref, reactive, defineComponent, onMounted, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Dialog } from "@nutui/nutui";
import { useUserStore } from "../../store/user";
import axios from "axios";
export default defineComponent({
  props: ["movies"],
  setup(props, { emits }) {
    let useColor = useUserStore();
    let router = useRouter();
    let visible = ref(false);
    let msg = reactive({
      movie: useColor.msg,
    });
    let back = () => {
      router.go(-1);
    };
    //在setup中使用生命周期
    onMounted(() => {
      console.log(useColor.msg);
    });
    return {
      back,
      share,
      ...toRefs(msg),
    };
  },
    //在option中使用生命周期
   onMounted() {
      console.log(useColor.msg);
    });
});
</script>

另一种写法   语法糖<script setup>

<script setup>
   const a = ref(0)
   const a = ref(0)
   const b = ref('')
   const c = ref(true)
   const d = reactive({})
   const actionA = ()=>{a.value++}
   const actionC = ()=>{c.value=!c.value}
   const actionB = ()=>{b.value += 'test' }
   const actiond = async ( )=> {
       const res =  await ajax(`url`)
       d.a = res.a
       d.b = res.b
       d.c = res.c
   }
   const resetD = ()=>{
       Object.keys(d).forEach(key=>delete d[key])
   }
//无需return 出去  有独立的api  defineProps  defineEmits  等
</script>

可以思考一下如何像react hooks 一样去使用 组合api

在独立模块中定义响应式数据和改变的方法

类似于vuex或者 pinia

//usePage.js
export default ()=>{
    const a = ref(0)
   const b = ref('')
   const c = ref(true)
    const actionA = ()=>{a.value++}
   const actionC = ()=>{c.value=!c.value}
   const actionB = ()=>{b.value += 'test' }
   //这时候需要写return
   return {
       a,actionA，
       b,actionB,
       c,actionC
   }
}

// usePageD.js
export default ()=>{
const d = reactive({})
const actionD = async ( )=> {
       const res =  await ajax(`url`)
       d.a = res.a
       d.b = res.b
       d.c = res.c
   }
   const resetD = ()=>{
       Object.keys(d).forEach(key=>delete d[key])
   }
   return {
       d,actionD,resetD
   }
}

使用的时候把数据和方法一并导入（和hooks一模一样...） 

import usePage from './usePage'
import usePage from './usePageD'

const {a,actionA} = usePage()
const {actionD,resetD} = usePageD()

vue对css样式的绑定

<script setup>
const pcolor = ref('#000')
</script>
<style scoped>
p{
 color:v-bind('pcolor')
}

生命周期汇总

2.0 周期名称             3.0 周期名称    说明
beforeCreate             setup                            组件创建之前
created                       setup                            组件创建完成
beforeMount             onBeforeMount           组件挂载之前
mounted                     onMounted                  组件挂载完成
beforeUpdate            onBeforeUpdate         数据更新，虚拟 DOM 打补丁之前
updated                      onUpdated                   数据更新，虚拟 DOM 渲染完成
beforeDestroy           onBeforeUnmount      组件销毁之前
destroyed                   onUnmounted             组件销毁后