vue3.0的setup组合式api的使用，和vue单页面使用setup

57 阅读 0 评论 38 点赞

我是靠谱客的博主大方小馒头，最近开发中收集的这篇文章主要介绍vue3.0的setup组合式api的使用，和vue单页面使用setup，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

vue3.0的一个新特性组合式api，setup。
此方法接受俩个参数props，context俩个参数。
其一props组件接收的值，
其二是一个普通的javascript的对象，可以使用一些vue的方法slots，attrs，emit等，
因为，setup实在组件创建之前，所以无法访问data，computed，methods等
手脚架上使用props
因为props是响应式的，所以我们在用es6解构的时候不能直接解构需要使用 toRef

	<template>
		<div>{{age}}</div>
	</template>
	import { toRef } from 'vue'
	export default{
		name:'index',
		props:{
			name:String,
			age:Number
		},
		setup(props){
			// 不需要解构的时候
			console.log(props.name)
			//需要解构的时候
			let {name} = toRef(props);
			console.log(name.value);   //在这里就可以使用props里的值了
		},
	}

手脚架上使用context

	<template>
		<div>{{age}}</div>
	</template>
	import { toRef } from 'vue'
	export default{
		name:'index',
		// setup(context){   // 不需要解构的时候
		setup({slots,emit}){  //需要解构的
			// 不需要解构的时候
			console.log(context.slots)
			//需要解构的
			console.log(slots);
		},
	}

现在我们已经知道了setup的基础知识，用法。那这个组合式api的意义是干嘛的。有啥作用吗。
简单的理解就是提取公共的方法或某个功能。让其他页面也可以引用使用这个方法或某个功能。
下面让我们看看怎么去写
公用的方法我们新建一个文件
funList.js

	import {ref}  from 'vue'
	export default function operation(age){
		let num = ref(age)
		const addAge = () =>{
			num.value += 1;
		}
		const minus = () =>{
			num.value -= 1;
		}
		return {
			num,
			addAge,
			minus	
		}
	}

下面就是使用的时候。

	<template>
		<div>{{num}}</div>    //11
	</template>
	import funList from '@/api/funList'     //在这边引入js
	export default{
		name:'index',
		props:{
			age:10,
		},
		setup(props){
			const {num,addAge,minus} = funList(props);   //这边解构获取js抛出的值。
			//在setup里也可以使用生命周期钩子，和监听属性watch，计算属性computed。
			onMounted(){addAge();}   //再setup里使用mounted的话需要加上on: 前缀，像onMounted
			let name = ref('lly');
			watch('name',(newValue,oldValue) =>{
				console.log(newValue);
			});
			let Number = ref(0);
			computed(() =>{Number.value+1});
			Number.value++;
			console.log(Number.value) // 1
			console.log(twiceTheCounter.value) // 2			
			return {
				num,
				addAge,
				minus
			}
		}
	}

上面使用公共的方法，其他页面也可以这样使用。当然也可以更丰富的方法。
当然上面说到setup里的生命周期和监听等都可以在公共方法的位置去使用。比如我们修改之前的方法看一下。

	import {ref,watch}  from 'vue'
	export default function operation(age){
		let num = ref(age)
		const addAge = () =>{
			num.value += 1;
		}
		const minus = () =>{
			num.value -= 1;
		}
		watch('num',(newValue,odlValue) =>{
			console.log(newValue);
		})
		return {
			num,
			addAge,
			minus	
		}
	}

以上就是setup一些基本的使用了，更多强大的内容就由你们自己扩展了。

单页面使用vue3.0和setup
首先我们先把vue3.0的js下载下来。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	    <script src="./src/vueglobal.js"></script> 
	</head>
	<body>
	    <div id="app">
	        {{num}}
	        <rets></rets>
	    </div>
	</body>
	</html>
	<script>
		let counter = { 
	        setup(){
	        	cosnt num = 10;
	            return {
	                num,
	            }
	        },
    	}   
    	let app = Vue.createApp(counter);
    	//创建全局组件
	    app.component('rets',{    
	        template:`<div>{{num}}</div>`,
	        setup(){
				const num = 20;
				return {
					num
				}
	        },
	        data(){
	            return{
	
	            }
	        }
	    })
	    app.mount('#app')
	</script>

上面是vue3.0的使用方法。下面让我们看看怎么写setup

	let ref = Vue.ref;
	let monuted = Vue.onMounted;
	let watch = Vue.watch;
	let counter = { 
	        setup(){
	        	let num = ref(10);
	        	monuted(){
	        		num++;	
	        	}
	        	watch('num',(newValue,odlValue) =>{
	        		console.log(newValue);
	        	})
	            return {
	                num,
	            }
	        },
    	}   
    	let app = Vue.createApp(counter);
	    app.mount('#app')