526互联

Vue2使用setup、ref、reactive等Vue3的组合式api

发布时间 2023-03-29 11:50:51作者: 浪里小韭菜
有些同学想在当前项目中体验Vue3组合式api，setup、ref、reactive等，而且一步就可以升级到Vue3，但是vue确实2.x版本，不改变当前版本怎么办呢？
vue2.7.0开始自带composition-api可以放心体验，当然不支持 <script setup>语法糖，还需要return，这不影响体验。
那么之前版本呢，
第一步：安装依赖 @vue/composition-api，这里包含了绝大部分api，满足开发，也支持TypeScript语法，可自行选择
npm install @vue/composition-api
// 或
yarn add @vue/composition-api
第二步：安装之后，在main.js中注册
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

第三步：在组件中引入所需的api

// home.js
<script>
    import { ref, computed, reactive, toRefs, onMounted, nextTick, watch, effectWatch } from '@vue/composition-api'
    export default {
        name: 'Home',
        props: {
            name: {
                type: String,
                default: ''
            }
        },
        setup(props, { emit, attrs, refs, root }) {
           /** attrs: Object // => this.$attrs
            emit: f() // => this.$emit
            slots: {} // => this.$slots
            isServer: false // 是否服务端渲染
            listeners: Object // => this.$listeners
            parent: VueComponent // => this.$parent
            refs: Object // => this.$refs
            root: Vue // => main.js 中的全局唯一的 vue 实例，相当this
            ssrContext: {} // => 服务端渲染
            注意：vue3弃用很多，只剩三个 emit、slots、attrs
            **/
            
            const { name } = toRefs(props); // 保持响应式
            const age = ref(18);
            
            onMounted(() => {
                console.log(11)
            })
            
            // 注意监听使用函数式
            watch(() => age.value, (newVal, oldVal) => {
                console.log(newVal)
            })
            
            const addAge = () => {
                age.vaule++
            }
            
            return {
                name,
                age,
                addAge
            }
        },
        components: {
            // 注册组件
        },
        computed: {
            // 导入 mapGetters
        }
    }
</script>

从第三步，我们看到有些不一样

1、setup中 上下文参数 context 

1.1、this 的替代，root 这里面是vue组件的实例，可以获取到很多属性和方法，如 root.$store、roots.$message

1.2、refs 可以获取子组件的对象，从而获取子组件的 数据和方法

 

2、setup 外，可以使用 components 、computed 正常使用

2.1、components 注册子组件

2.2、computed 属性依赖计算，导入 mapGetters，由于Vuex3.x不支持 useStore 等Api

 

由此导致的问题，解决方案

  1、方法一：简单粗暴、在 setup 中 使用 root , 可以获取 store 中的所有 方法和 属性

  2、方法二：优雅、安装插件  vuex-composition-helpers   npm: https://www.npmjs.com/package/vuex-composition-helpers

npm install vuex-composition-helpers
// 或
yarn add vuex-composition-helpers
<script>
    import { useGetters, useActions } from 'vuex-composition-helpers';
    export default {
        setup(props, context) {
            const { counter } = useGetters(['counter'])

            const { incrementCounter } = useActions(['incrementCounter'])

            return {
              counter,
              incrementCounter
            }
        }
    }
</script>