Vue3如何利用组合API拆分功能模块（三）

文章目录

文章参考案例说明功能不拆分的写法(Vue2.x传统写法)功能拆分的写法原理说明案例

文章参考

composition-api-introduction

案例说明

功能不拆分的写法(Vue2.x传统写法)

<template> <div class="count"> <h1>count: {{countState.count}}</h1> <p> <button @click="addCount">添加</button> </p> <p> <button @click="minusCount">减少</button> </p> </div> </template> <script> import {reactive, isReactive} from 'vue' export default { data () { return {} }, setup () { // 由于setup 是在beforeCreate 和 create 生命周期阶段，组件还没有创建,因此 this 无法指向组件，为了防止用使用错误，特意将 this 设置为 undefined console.log(this) // undefined // reactive 只能作用于 数组，和JSON 对象，针对Date等其他对象，则是无法作用的， const countState = reactive({ count: 0 }) console.log(countState) //Proxy {count: 0} 表明reactive 会将JSON对象转为一个 Proxy 对象 // 添加count function addCount () { countState.count++ } // 减少count function minusCount () { countState.count-- } // 返回的值会作用于 UI 视图不分，本质是在beforeCreate阶段，将返回的值动态的注入到 data 函数中，作为data 函数返回的结果，然后作用UI 视图 return { countState, minusCount, addCount } }, methods: {} } </script> <style lang='scss' scoped> .count{ color: red; h1{ font-size: 22px; } } </style>

功能拆分的写法

原理说明

由于setup 是在beforeCreate 和 create 生命周期阶段，组件还没有创建，即还没有进入 data 方法 阶段setup 返回的结果集 作为 (传统写法)data 和 method 的值，确切点说是绑定到 组件对象的属性

案例

视图保持不变，将修改Count模块抽出来放到一个函数（countIndexController.js）中 ,该函数要有返回值，提供视图使用 <template> <div class="count"> <h1>count: {{countState.count}}</h1> <p> <button @click="addCount">添加</button> </p> <p> <button @click="minusCount">减少</button> </p> </div> </template> <script> import countIndexController from './countIndexController' export default { data () { return {} }, setup () { return { ...countIndexController() } }, methods: {} } </script> <style lang='scss' scoped> .count{ color: red; h1{ font-size: 22px; } } </style> countIndexController.js 的内容如下 import {reactive, isReactive} from 'vue' // 数据添加的模块 export default function countIndexController () { // reactive 只能作用于 数组，和JSON 对象，针对Date等其他对象，则是无法作用的， const countState = reactive({ count: 0 }) console.log(countState) //Proxy {count: 0} 表明reactive 会将JSON对象转为一个 Proxy 对象 // 添加count function addCount () { countState.count++ } // 减少count function minusCount () { countState.count-- } // 返回的值会作用于 UI 视图不分，本质是在beforeCreate阶段，将返回的值动态的注入到 data 函数中，作为data 函数返回的结果，然后作用UI 视图 return { countState, minusCount, addCount } }

备注说明：

这里尽量使用方法定义，返回一个JSON 对象，保证组件被引用多次时，数据是隔离的。直接返回JSON对象也是可以的，多次引用组件，数据是公共的