vue3-Beta、尝鲜

本文主要是介绍vue3-Beta、尝鲜，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

项目搭建

项目参考这篇文章 Vue 3.0 全家桶抢先体验

Composition API

关于新增的API的一些介绍参考Vue3 Composition API教程及示例

其中列出了vue生命周期在新增 api中对应的方法

体验感受

工具 vs code 
@vue/cli 4.3.1

感受：按需引入api
当你在用 composition API 时，会自动引入你所用到的 api 
//import { ref, onMounted, onUnmounted } from 'vue';这个是不用你手动去添加的，
会自动添加你代码用到的api，舒服
复制代码

Demo

Demo中用了 大佬的举例

在2.0 中

我们要在 data 中声明 template 中用到的响应数据
之后在created生命周期中去初始化页面加载时要做的事情
在mounted生命周期中创建需要用到的方法，
在computed 中计算数据
也可能在要用到 watch 去监听某个变量的实时变化
就一个逻辑比较复杂的购物车来说，这个页面中会用到多少方法，定义多少变量，要写多少方法？
虽说在2.0 中变量集中在data 中，方法在 mounted 中，但是维护的时候你就发现了，这个变量都谁用到了，这个方法是哪个功能的？
上千行的代码怎么找 ctrl F 我跳 我跳 真是够了
复制代码

在3.0 中

我们可以吧一个功能的代码抽出来，集中封装到一个方法中(useCilck) //例： script中的注释部分
这里就会发现一个函数搞定了一个功能所用到的所有数据和方法，
之后功能维护的时候我就只用看这一个函数中的东西就行了，不用在跳来跳去了

既然一个功能用到的方法数据全部都可以封装到一个方法当中，
我们当然就可以把这个函数给抽出来，放到一个js文件当中，然后再用到的页面引入
一个功能的复用就是这么简单
是不是忽然感觉代码更清晰了
复制代码

代码

<template>
  <div class="content">
      <div>x:{{x}}</div>
      <div>y:{{y}}</div>
      <div class="check_box" @click="add">
          您点击了{{count}}下
      </div>
  </div>
</template>
复制代码

<script>

//这里是没有将代码抽离出当前组件的内容
/* import { ref, onMounted, onUnmounted } from 'vue';

    function useCilck(){
    const count = ref(0);
    const add = ()=>{
        count.value = '1ad'
        console.log(count.value)
    }
    onMounted(()=>{
        console.log('钩子: mounted --> onMounted')
    })
    onUnmounted(()=>{
        console.log('钩子: destroyed --> onUnmounted')
    })
    return {count,add}
} */

import useCilck from '../common/test.js'
import getCouser from '../common/getcouser.js'

export default {
    setup(){
        console.log('钩子: created --> setup')
        const {count,add} = useCilck()
        const {x,y} = getCouser()
        return {count,add,x,y}
    }
};
</script>
复制代码

getcouser.js

import { ref, onMounted, onUnmounted } from "vue";

function useCouser(){
    const x = ref(0);
    const y = ref(0);

    function update(e){
        x.value = e.pageX;
        y.value = e.pageY;
    }

    onMounted(()=>{
        window.addEventListener("mousemove",update)
    })

    onUnmounted(()=>{
        removeEventListener("mousemove",update)
    })

    return {x,y}

}

export default useCouser
复制代码

test.js

import { ref, onMounted, onUnmounted } from 'vue';

function useCilck(){
    const count = ref(0);

    const add = ()=>{
        count.value++
        console.log(count.value)
    }

    onMounted(()=>{
        console.log('钩子: mounted --> onMounted')
    })

    onUnmounted(()=>{
        console.log('钩子: destroyed --> onUnmounted')
    })

    return {count,add}
}

export default useCilck
复制代码

总结

没有做一些很详细的方法和用法的介绍，
很多文章介绍的都很详细了，
也是参考各位大佬的文章尝试写的demo，
体验感觉还是挺好的

最后想说，vue3的更新，肯定会出现更多的好用功能强大的组件
这又为我这个菜鸟提供了强大的偷懒后盾啊，哈哈！
复制代码

这篇关于vue3-Beta、尝鲜的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！