VUE框架面试经典Vue3下选项式API和组合式API的区别------VUE框架

旧约Alatus

已于 2023-12-29 11:40:48 修改

阅读量857

点赞数 19

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

于 2023-12-28 15:25:21 首次发布

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

版权

前端同时被 2 个专栏收录

328 篇文章 2 订阅

订阅专栏

VUE框架

249 篇文章 0 订阅

订阅专栏

<template>
    <h1>{{ data.a.b.c.counter }}</h1>
    <br>
    <h1>{{ data.counter2 }}</h1>
    <button @click="data.a.b.c.counter++">1加一</button>
    <br>
    <button @click="data.counter2++">2加一</button>
</template>

<script>
import hook1 from "./hooks/hook1.js";
import { reactive,shallowReactive } from 'vue'
export default {
    // 组合式和选项式的区别
    // 组合式Compostion API
    // 选项式Options ApI
    // 关注点在一个个选项上(配置项上)
    // data,methods,computed,watch
    // 关注点没有落在功能上
    // 没有落在具体的功能上面
    // 选项式的的特点是分散
    data(){
        return {
            // 功能1的data
            // 功能2的data
            // 功能3的data
            // 所有的data都在这里
        }
    },
    // 一旦涉及到功能的修改,就要在不同的data,method,watch和computed中
    // 去找对应方法的属性watch,数据计算属性,监视属性等
    // 维护起来麻烦,维护成本高
    methods : {
        // 所有的方法也都放在这里
    },
    watch : {
        // 所有的监视属性也都放在这里
    },
    computed : {
        // 所有的计算属性也都放在这里
    },
    name : "App",
    setup(){
        // 这是方法函数,要加()
        // 加了括号的会立刻执行这个函数的内容
        // 不加括号是指针指向这个函数,而不是调用函数
        hook1();
        // 这个只能对一层级的属性做响应式,同样也是浅层的响应式
        let data = shallowReactive({
            counter2 : 100,
            a : {
                b : {
                    c : {
                        counter : 1
                    }
                }
            }
        });
        // 到了VUE3中,随着组合式API的引入和hook的使用
        // 使我们可以把关注点聚焦到一个个功能上
        // 组合式API关注的就是功能了
        return {data};
    }
}
</script>

<style>

</style>
<template>

<h1>{{ data.a.b.c.counter }}</h1>

<br>

<h1>{{ data.counter2 }}</h1>

<button @click="data.a.b.c.counter++">1加一</button>

<br>

<button @click="data.counter2++">2加一</button>

</template>

<script>

import hook1 from "./hooks/hook1.js";

import { reactive,shallowReactive } from 'vue'

export default {

// 组合式和选项式的区别

// 组合式Compostion API

// 选项式Options ApI

// 关注点在一个个选项上(配置项上)

// data,methods,computed,watch

// 关注点没有落在功能上

// 没有落在具体的功能上面

// 选项式的的特点是分散

data(){

return {

// 功能1的data

// 功能2的data

// 功能3的data

// 所有的data都在这里

}

},

// 一旦涉及到功能的修改,就要在不同的data,method,watch和computed中

// 去找对应方法的属性watch,数据计算属性,监视属性等

// 维护起来麻烦,维护成本高

methods : {

// 所有的方法也都放在这里

},

watch : {

// 所有的监视属性也都放在这里

},

computed : {

// 所有的计算属性也都放在这里

},

name : "App",

setup(){

// 这是方法函数,要加()

// 加了括号的会立刻执行这个函数的内容

// 不加括号是指针指向这个函数,而不是调用函数

hook1();

// 这个只能对一层级的属性做响应式,同样也是浅层的响应式

let data = shallowReactive({

counter2 : 100,

a : {

b : {

c : {

counter : 1

}

}

}

});

// 到了VUE3中,随着组合式API的引入和hook的使用

// 使我们可以把关注点聚焦到一个个功能上

// 组合式API关注的就是功能了

return {data};

}

}

</script>

<style>

</style>

// 一个钩子就是一个独立的功能
export default function(){
    // 功能1的data
    // 功能1的methods
    // 功能1的watch
    // 功能1的computed
    // 需要修改功能就在这里修改就可以了
}
// 一个钩子就是一个独立的功能

export default function(){

// 功能1的data

// 功能1的methods

// 功能1的watch

// 功能1的computed

// 需要修改功能就在这里修改就可以了

}

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}

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    
    
    
    
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<link rel="icon" href="/favicon.ico">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vite App</title>

</head>

<body>









<div id="app"></div>

<script type="module" src="/src/main.js"></script>

</body>

</html>