Vue-Function-Api 体验

看到掘金上的一篇文章 , 尝试了一下vue-function-api , 感觉良好 之后使用的话,还得看场景 .. 直接上手

1. 首先安装 vue-function-api > npm install --save vue-function-api
2. 在main.js 中安装

import Vue from 'vue'
import { plugin as VueFunctionApiPlugin } from 'vue-function-api'
Vue.use(VueFunctionApiPlugin);

3. 在vue 文件中就可以使用vue-function-api 了

// 引入你在组件中需要使用的 function 
import { value , computed , onMounted} from 'vue-function-api'
//  从最开始的 data, methods , computed ...  等等 都放入至 setup 函数中 
export default {
    setup (){
        
        // 申明一个  count 变量  
        const count = value(0)
        
        const increment = () => {
            // 将count 中的 value 值进行递增  , 随后会进行数据响应
            count.value ++  
        }
        
        
        return {
            // 将 数据, 方法, 生命周期函数... 等等 填充至组件 
            count , 
            increment 
        }
    }
}

其实这里指的一提的是,原先的语法可以和之前的语法进行混合使用 看下面的例子

import { value , computed , onMounted} from 'vue-function-api';
export default {
      setup () {
        const count = value(0) 
        const increment = () =>{
          count.value ++   
        }
        const apix = computed( () =>{
          return count.value + 'px' 
        })
        // 添加一个 mounted 钩子 
        const mounted = onMounted(() => {
          global.console.log('function onmounted ') 
        })
        return {
            count , 
            increment ,
            apix , 
            mounted
        }
      },
      // 这里也添加一个mounted 钩子 
      mounted (){
        global.console.log('origin onmounted')
      },
      methods : {
        sub (){
          this.count -- 
        }
      }
}

从这里可以看出来, increment 函数 和 sub 函数中都有用, 并且 两个mounted 中的函数都有用, 并且原本写法的mounted 函数比setup 中的 onMounted 函数 执行要更早 ...

总的来说还是挺好用的,还有一件事 , 这个响应式 好像是使用 proxy 来完成的