vue3.0中取消了 beforeCreate 和 created 两个周期，因为setup会在这个这个周期前执行，因此你可以在setup中进行你需要的处理。其他的生命周期全部以on开头。
import { onBeforeMount, onMounted, onBeforeUnmount, onBeforeUpdate, onDeactivated, onUnmounted, onUpdated } from '@vue/composition-api' export default { setup(){ onBeforeMount(() =>{ console.log('onBeforeMount'); }) onMounted(() =>{ console.log('onMounted'); }) onBeforeUnmount(() =>{ console.log('onBeforeUnmount'); }) onBeforeUpdate(() =>{ console.log('onBeforeUpdate'); }) onDeactivated(() =>{ console.log('onDeactivated'); }) onUnmounted(() =>{ console.log('onUnmounted'); }) onUpdated(() =>{ console.log('onUpdated'); }) } }
Mixin
vue3.0中使用函数式的API代替原有的mixin，mixin很容易引起命名重合和覆盖引入mixin的页面属性。
在vue3.0中以一个API的形式存在，当你需要时，将其引入。直接看例子
mixin.vue
<template> <div> <h3>mixins</h3> <div> <el-input v-model="searchValue" type="text" @change="onSearch"/> <div> <ul> <li v-for="name in names" :key="name.id" v-show="name.show"> {{name.value}} </li> </ul> </div> </div> </div> </template> <script> import searchName from './searchName.js' export default { setup(){ let list = [ {id: 1, value: 'vue', show: true}, {id: 2, value: 'react', show: true}, {id: 3, value: 'angular', show: true}, {id: 4, value: 'elementui', show: true}, {id: 5, value: 'ant', show: true}, {id: 6, value: 'javascript', show: true}, {id: 7, value: 'css', show: true}, ] var {onSearch, names, searchValue} = searchName(list) return { onSearch, names, searchValue } } } </script> <style> </style>
searchName.js
import {reactive, toRefs} from '@vue/composition-api' export default function searchName(names){ const state = reactive({ names: names, searchValue: '' }) const onSearch = () => { state.names.forEach(name => { name.show = name.value.includes(state.searchValue) }) } return { ...toRefs(state), onSearch } }
上面我们将搜索功能独立到一个js文件中。在 searchName.js 中定义了一些属性和方法，这里的属性也是具有响应式的，最后返回这些内容。在组件中，先引入这个js文件，调用searchName方法，传入需要的参数。在该组件中的searchValue和names两个响应式数据并非自身的所有，而是来自searchName.js中，通过下面演示可以看到，他们的确也具有响应式的特性。
EventBus
setup接收两个参数
props：等同于V2.x中的 props：{}，用于接收父组件传递的参数
ctx：上下文环境。在2.x中的this指向的是全局VUE实例，可以使用this.router、this.router、this.router、this.commit、this.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this，如果你尝试输出this，你回看到它的值是undefined。但可以通过ctx.root.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this，如果你尝试输出this，你回看到它的值是undefined。但可以通过ctx.root.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this，如果你尝试输出this，你回看到它的值是undefined。但可以通过ctx.root.root.$emit将内容挂在到 $root 上，以使得任何地方都可以访问到。
setup(props, ctx){ ... const total = computed(() =>{ let total = singleVal + doubleVal.value + state.stateVal ctx.root.$root.$emit('handleClick', {number: total }) return total }) ... } ... ctx.root.$root.$on('handleClick', (val) =>{ console.log('我是通过ctx.root.$root.$on触发的，接收的值为：' + val.number); state.otherTotal = val.number }) ...
最后附上composition-api的github：https://github.com/vuejs/composition-api
到此这篇关于你准备好迎接vue3.0了吗的文章就介绍到这了,更多相关vue3.0内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: