Vue3.0 发布啦，牛逼

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

前言

vue3.0 发布了，啊啊啊啊  刺激啊 （学哦）

博客平台、公众号、朋友圈基本都被传闻了，

可见 Vue3.0 的被期待程度，因为 React 16 发布的时候，也米有那么疯狂，让我有点震惊的是 Vue 有 130 万的使用者。

其实在4月的时候就已经出来，只不过在9月的时候正式发布了，前面也学习了下3.0的语法糖，现在在看看

Vue3.0 更新了什么

一个是 Composition API，另一个是对 TypeScript 的全面支持。

团队还会出一个 Vue 2.7 的版本，给予 2.x 用户一些在 3.0 版本中被删除方法的警告，这有助于用户的平稳升级。

Nuxt3 好像还在路上，但是目前看来，市面上的各大组件库还没来得及针对 Vue3.0 进行改版升级。

周边的插件如 Vue-Router、Vuex、VSCode 插件 Vetur 等都在有序的进行

vue3.0快速创建项目

1. 全局安装create-vite-app

npm i -g create-vite-app

2.创建项目目录

create-vite-app 项目名

3.运行

cd 项目名
npm install
npm run dev

4.查看

http://localhost:3000/

Vue3.0 变化在哪？

下面以代码片段的形式为大家介绍一下 Vue3.0 作出

setup 函数

  • 执行机制

setup是在创建组件实例并完成props初始化之后执行的，也是在beforeCreate钩子之前执行，无法访问option(data、comupted、methods等)选项，而option可使用setup中返回的变量。

  • 没有 this：在解析其他组件选项之前就已经调用了 setup()

  • 接受两个参数：

    • props：组件传参

    • context：执行上下文，包含三个属性方法：attrs、slots、emit

export default {
    props: {
        user: {
            type: String,
            defalut: 'Libai'
        }
    },
    setup(props, context) {
        console.log(props.user)
        console.log(context)
    }
}

  • 生命周期

其内部使用生命周期钩子需要在前面加上on

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

import { onMounted } from 'vue'
export default {
    setup() {
        // mounted
        onMounted(() => {
            console.log('Component is mounted!')
        })
    }
}

 

钩子函数stup使用
beforeCreate不支持
created不支持
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted
errorCapturedonErrorCaptured
renderTrackedonRenderTracked
renderTriggeredonRenderTriggered

  • 渲染函数

setup 还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态：

// MyBook.vue
import { h, ref, reactive } from 'vue'
export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    // Please note that we need to explicitly expose ref value here
    return () => h('div', [readersNumber.value, book.title])
  }
}

provide & inject
类似于vue2中provide与inject, vue3提供了对应的provide与inject API，实现组件传参。
provide 函数允许你通过两个参数定义 property：
  • property 的 name (<String> 类型)
  • property 的 value
<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue'
export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}
</script>
inject 函数有两个参数：
  • 要注入的 property 的名词
  • 一个默认的值 (可选)
<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    return {
      userLocation,
      userGeolocation
    }
  }
}
</script>
应用的配置项
config 是一个包含 Vue 应用程序全局配置的对象。可以在挂载应用程序之前修改下面列出的属性。
  • devtools 类型： boolean 默认值： true 如何使用：
app.config.devtools = true
是否开启 vue-devtools 工具的检测，默认情况下开发环境是 true，生产环境下则为 false。
  • errorHandler 类型： Function 默认值： undefined 如何使用：
app.config.errorHandler = (err, vm, info) => {
  // info 为 Vue 在某个生命周期发生错误的信息
}
为组件渲染功能和观察程序期间的未捕获错误分配处理程序。
  • globalProperties ???? 类型： [key: string]: any 默认值： undefined 如何使用：
app.config.globalProperties.name = '十三'
app.component('c-component', {
  mounted() {
    console.log(this.name) // '十三'
  }
})
若是组件内也有 name 属性，则组建内的属性权限比较高。
还有一个知识点很重要，在 Vue2.x 中，我们定义一个全局属性或者方法都是如下所示：
Vue.prototype.$md5 = () => {}
在 Vue3.0 中，我们便可这样定义：
const app = Vue.createApp({})
app.config.globalProperties.$md5 = () => {}
  • performance 类型： boolean 默认值： false 如何使用：
app.config.performance = true
将其设置为 true 可在浏览器 devtool 性能/时间线面板中启用组件初始化，编译，渲染和补丁性能跟踪。 仅在开发模式和支持 Performance.mark API的浏览器中工作。
Application API
全局改变的动作，都在 createApp 所创建的应用实例中，如下所示：
import { createApp } from 'vue'
const app = createApp({})
那么 app 下这些属性：
  • component 参数： 第一个参数 string 类型表示组件名，第二个参数 Function 或 Object 返回值： 只传第一个参数，返回组建。带上第二个参数则返回应用程序实例 如何使用：
import { createApp } from 'vue'
const app = createApp({})
// 注册一个 options 对象
app.component('shisan-component', {
  /* ... */
})
// 检索注册的组件
const ShiSanComponent = app.component('shisan-component')
  • config(上面第一段讲过了)
  • directive 自定义指令变化不大，还是之前那些东西，如下：
app.directive('my-directive', {
  // 挂载前
  beforeMount() {},
  // 挂载后
  mounted() {},
  // 更新前
  beforeUpdate() {},
  // 更新后
  updated() {},
  // 卸载前
  beforeUnmount() {},
  // 卸载后
  unmounted() {}
})

多数全局API都没变化，还是老的 2.x 的写法居多
Composition API
Composition API解决了什么问题？ 使用传统的 Vue2.x 配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大。
Composition API 解决了这个令人头疼的问题。 它为我们提供了几个函数，如下所示：
  • reactive
  • watchEffect
  • computed
  • ref
  • toRefs
  • hooks
reactive
import { reactive, computed } from 'vue'
export default {
 setup() {
  const state = reactive({
    a: 0
  })
  function increment() {
    state.a++
  }
  return {
    state,
    increment
  }
 }
}
 
reactive 相当于 Vue2.x 的 Vue.observable () API，经过 reactive 处理后的函数能变成响应式的数据，类似之前写模板页面时定义的 data 属性的值。
watchEffect
import { reactive, computed, watchEffect } from 'vue'
export default {
  setup() {
    const state = reactive({ a: 0 })
    const double = computed(() => state.a * 3)
    function increment() {
      state.count++
    }
    const wa = watchEffect(() => {
      // 使用到了哪个 ref/reactive 对象.value, 就监听哪个
      console.log(double.value)
    })
    // 可以通过 wa.stop 停止监听
    return {
      state,
      increment
    }
  }
}
watchEffect 被称之为副作用，立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。
 
computed
import { reactive, computed } from 'vue'
export default {
  setup() {
   const state = reactive({
    a: 0
   })
   const double = computed(() => state.a * 3)
   function increment() {
    state.a++
   }
   return {
    double,
    state,
    increment
   }
  }
}
这就比较直观了，computed 在 Vue2.x 就存在了，只不过现在使用的形式变了一下，需要被计算的属性，通过上述形式返回。
与vue2中computed功能一致，它接收一个函数并返回一个value为getter返回值的不可改变的响应式ref对象。
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 错误，computed不可改变
// 同样支持set和get属性
onst count = ref(1)
const plusOne = computed({
    get: () => count.value + 1,
    set: val => { count.value = val - 1 }
})
plusOne.value = 1
console.log(count.value) // 0
ref 和 toRefs
toRefs 提供了一个方法可以把 reactive 的值处理为 ref，也就是将响应式的对象处理为普通对象。
hooks
与 2.x 版本相对应的生命周期钩子
Vue2.x 的生命周期Vue3.x 的生命周期
beforeCreatesetup()
createdsetup()
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted
errorCapturedonErrorCaptured
Vue3.0 在 Composition API 中另外加了两个钩子，分别是 onRenderTracked 和 onRenderTriggered，两个钩子函数都接收一个 DebuggerEvent :
export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖性导致组件重新渲染
  },
}
代码封装、复用
Composition API 最核心的，就是可以把代码提取出来，把整个功能封装成一个单独的函数（模块），随处可用，也不用担心变量和方法的命名冲突。
只需在组件中导入模块，并调用它即可（模块返回的是函数），函数将返回我们定义的变量，随后我们可以从 setup 函数中使用它们。
// useCount.js
import { ref, computed } from 'vue'
function useCount() {
    let count = ref(0)
    let double = computed(() => count.value * 2)
    function increment() {
        count.value++
    }
    return {
        count,
        double,
        increment
    }
}
export default useCount
// app.vue
import useCount from './useCount.js'
export default {
    setup() {
        let { count, double, increment } = useCount()
        return { 
            count,
            double,
            increment
        }
    }
}
两者并存
option和Composition API是可以共用的，互不影响。
vue2中data、computed等选项仍然支持，但使用setup时不建议再使用vue2中的data等选项。
import { ref, computed } from 'vue'
export default {
    setup() {
        let count = ref(0)
        let double = computed(() => count.value * 2)
        function increment() {
            count.value++
        }
        return {
            count,
            double,
            increment
        }
    },
    data() {
        return {
            a: 2
        }
    },
    mounted() {
        // 可使用setup的返回值
        console.log(this)
    }
}
所以： 前端总是在路上，发展真的太疯狂了，少年加油   学起来  ！
以上是 Vue3.0 发布啦，牛逼 的全部内容，
                        来源链接：
                            utcz.com/z/374755.html
回到顶部