【vue3】二、优点

it2024-10-27 36

优点：

composition api 易维护 composition api解释：组合式api。将同一个数据的data、methods、computed、onMounted等放在一起，也可以放在一个单独文件里;

按需引用，buil更快

vue 2 中通过option方式使用组件

// vue2 // 创建Vue实例 new Vue({render(){}}).$mount('#app') // 组件option配置方式使用，难维护， // data、methods见用this互相引用，但this是黑盒，上面挂载了无数看不见的东西，容易出意想不到的报错 export default { data(){return { name:'cq' }}, methods:{}, onMounted(){} }

vue 3 按需引用，通过composition api方式使用组件

// vue3 // 创建Vue实例 import {createApp, ref, reactive, computed, onMounted} from 'vue' createApp(App).mount('#app')

组件使用composition api 将count相关的数据和方法放在useCount.js中

// useCount.js import {ref} from 'vue' export default function useCount() { let count = ref(0) function addCount() { count.value++ } return {count, addCount} }

在组件中引用useCount.js

<template> <div> <button @click="addCount">count is {{count}}</button> </div> </template> <script> import useCount from "./useCount"; export default { setup() { let {count, addCount} = useCount(); return { count, addCount, } } } </script>

最新回复(0)

【vue3】 二、优点

【vue3】二、优点