vue.js 3.0 Bate 详解【持续更新】

最新推荐文章于 2024-05-05 21:29:47 发布

是十二阿

最新推荐文章于 2024-05-05 21:29:47 发布

阅读量626

点赞数

本文链接：https://blog.csdn.net/weixin_42003850/article/details/106018870

版权

前段时间尤大在b站进行了vue.js 3.0 Bate的直播
下面这篇文章就配合示例来分析，带大家一起看一下vue3.0具体都发生了哪些改变
如有不全错误之处，还请大家多多指教包涵，下方留言或私信我及时改正，谢谢~ 
那么我们就开始吧~

vue3.0的优越之处

设计动机、核心优势没有this，没有烦恼更好的类型推导能力（TypeScript）更友好的Tree-Shaking 支持（渐进式体验）
vue2.0是 import Vue from ‘vue’ 【引入一个Vue对象，webpack默认对象中的所有成员都用到了，既然都用到了，所以Tree-Shaking是不能把不用的东西摇掉的】
3.0是一个功能对应一个函数【需要什么引什么，这样打包的时候，那些没用到的功能就会被摇掉】 webpack打包的时候，是做词法分析，只要检测这个api有没有被外界用到，没被用到的api和组件不会被加载，只要检测当前方法有没有被使用
vue3.0更大的代码压缩空间，打包工具在打包的时候，会给成员变量重命名，3.0相当于使用的成员变量，导出的是成员名称，成员名称会被压缩为更简短的，2.0则不可以，因为2.0所用到的相当于对象中的属性，属性名是不可以被压缩的
3.0按需引入api，也就是所说的Composition API ，2.0是引入Vue对象optionsAPI
更灵活的逻辑复用能力，3.0可以将相关功能的代码都放在一起，所有的东西都是以函数的方式，以hook的方式挂载进去的 Tree-Shaking
基于webpack构建，webpack开启production会自动开启一些优化功能比如tree-shaking等development则会让开发环境更加方便

下面我们来看一些具体的代码

第一部分 Composition API 3.0 【optionsAPI 2.0】

3.0 使用setup最后return一个对象出去，对象内成员可在全页面使用
如果需要数据具有响应能力，则需要使用reactiveAPI
reactiveAPI：将普通的对象包装成es6中proxy对象（响应式对象）
监听一个数据的变化：watchEffect

creatApp({
    setup:() {
    	//3.0当中将会使用state，页面中你将几乎不会看到this的出现
        const state = reactive({ 
            todos:storage.get(),
            input:'',
            visibility:'all'
        })
        function addTodo () {
        	//state 在方法中的使用
            const text = state.input && state.input.trim()
            ...
        }
        watchEffect( () => { //页面监听
            storage.set(state.todos)    
        })
        onMounted(() => { //页面加载
            addTodo()
        })
        onUnmounted(() => { //页面卸载
            ...
        })
        function onHashChange() {
            ...
        }
        function removeTodo(todo) {
            ...
        }
        return { //setup函数，最后返回一个对象，用于全页面使用
           state,
           addTodo 
        }
    }
})

示例一：控制显示隐藏

// 2.0写法
creatApp({
    data: () => ({
        show:false
    }),
    methods: {
        toggle () {
            this.show = !this.show
        }
    }
})
// 3.0写法
setup () { //使用
    const { on, toggle } = useToogle(false)
    return { on, toggle }
}

import { ref } from 'vue'
//ref 是把普通的值包装成一个对象，对象传递是引用传递
const useToggle = (initialState = false) => {
    const on = ref(initialState)
    const toggle = value => {
        on.value = typeof value === 'undefined' ? !on.value : value
    }
    return { on, togge }
}

示例二：多组件中都需要用到同一个数据查询

//使用
const user = useUsers()

import { ref, onMounted } from 'vue'

const useUsers = (query) => {
    const users = ref([])
    
    onMounted(async () => {
       this.users = await UserService.fetch(query)
   })
   
   return { users }
}

示例三：获取窗口大小的函数

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

const useWindowSize = () => {
    const width = ref(window.innerWidth)
    const height = ref(window.innerHeight)
    
    const update = e => {
        width.value = window.innerWidth
        height.value = window.innerHeight
    }
    
    onMounted(() => window.addEventListenner('resize', update))
    onUnmounted(() => window.removeEventListener('resize', update))
    
    return { width, height }
}

下面一段代码复制粘贴到你的html文件中，就可以体验一下vue3.0 啦
记得开F12(＾Ｕ＾)ノ~ＹＯ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://s1.zhuanstatic.com/common/js/vue-next-3.0.0-alpha.0.js"></script>
</head>
<body>
<div id='app'></div>
</body>
<script>
  const { createApp, reactive, computed, effect } = Vue;
  const Demo = {
    template: `
    <button @click="testFun">
      {{ state.name }}毕业{{ state.time }}年了，每天学习{{ state.learnTime }}小时
    </button>
  `,
    setup() {
      const state = reactive({
        name: 'Shier',
        time: '1',
        learnTime: computed(() => state.time * 1)
      })
      effect(() => {
        console.log(`触发effect，毕业${state.time}年了`)
      })
      function testFun() {
        state.time++
      }
      return {
        state,
        testFun
      }
    }
  }
  createApp().mount(Demo, '#app')
</script>
</html>

感谢阅览，如有问题请及时留言私信我~

是十二阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js 3.0 Bate 详解【持续更新】

前段时间尤大在b站进行了vue.js 3.0 Bate的直播下面这篇文章就配合示例来分析，带大家一起看一下vue3.0具体都发生了哪些改变如有不全错误之处，还请大家多多指教包涵，下方留言或私信我及时改正，谢谢~那么我们就开始吧~vue3.0的优越之处设计动机、核心优势没有this，没有烦恼更好的类型推导能力（TypeScript）更友好的Tree-Shaking 支持（渐进式体验）vue2.0是 import Vue from ‘vue’ 【引入一个Vue对象，webpack默认对
复制链接

扫一扫