VUE框架Vue3下使用hook钩子函数实现代码复用效果提升复用率------VUE框架

旧约Alatus

已于 2023-12-28 13:04:42 修改

阅读量429

点赞数 9

分类专栏： # VUE框架前端文章标签：前端 javascript vue vue.js ecmascript 前端框架 js

于 2023-12-26 15:54:07 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135224245

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

import {reactive} from "vue";
export default function(){
    let data = reactive({
        num1 : 0,
        num2 : 0,
        result : 0
    });
    function sum(){
        // num3.value = num1.value + num2.value;
        data.result = data.num1 + data.num2;
    }
    // return {num1,num2,result,submit}
    return {data,sum}
}
import {reactive} from "vue";

export default function(){

let data = reactive({

num1 : 0,

num2 : 0,

result : 0

});

function sum(){

// num3.value = num1.value + num2.value;

data.result = data.num1 + data.num2;

}

// return {num1,num2,result,submit}

return {data,sum}

}

<template>
    <input type="number" v-model="data.num1"/>
    <br>
    <input type="number" v-model="data.num2"/>
    <br>
    <input type="number" v-model="data.result"/>
    <br>
    <button @click="sum">求和</button>
</template>

<script>
// import {reactive, ref} from "vue";
import sum from "./hooks/sum.js"
export default {
    name : "App",
    setup(){
        // 调用钩子函数,然后返回即可
        let result = sum();
        // // let num1 = ref(0);
        // // let num2 = ref(0);
        // // let result = ref(0);
        // let data = reactive({
        //     num1 : 0,
        //     num2 : 0,
        //     result : 0
        // });
        // function submit(){
        //     // num3.value = num1.value + num2.value;
        //     data.result = data.num1 + data.num2;
        // }
        // // return {num1,num2,result,submit}
        // return {data,submit}
        return result;
    }
}
</script>

<style>

</style>
<template>

<input type="number" v-model="data.num1"/>

<br>

<input type="number" v-model="data.num2"/>

<br>

<input type="number" v-model="data.result"/>

<br>

<button @click="sum">求和</button>

</template>

<script>

// import {reactive, ref} from "vue";

import sum from "./hooks/sum.js"

export default {

name : "App",

setup(){

// 调用钩子函数,然后返回即可

let result = sum();

// // let num1 = ref(0);

// // let num2 = ref(0);

// // let result = ref(0);

// let data = reactive({

// num1 : 0,

// num2 : 0,

// result : 0

// });

// function submit(){

// // num3.value = num1.value + num2.value;

// data.result = data.num1 + data.num2;

// }

// // return {num1,num2,result,submit}

// return {data,submit}

return result;

}

}

</script>

<style>

</style>