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

妖狐艹你老母 2023-03-13 02:07 90阅读 0赞

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

> **vue3.0的优越之处**

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

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

**第一部分 Composition API 3.0** 【optionsAPI 2.0】

1.  3.0 使用setup最后return一个对象出去，对象内成员可在全页面使用
2.  如果需要数据具有响应能力，则需要使用reactiveAPI
3.  reactiveAPI：将普通的对象包装成es6中proxy对象（响应式对象）
4.  监听一个数据的变化：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>

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