setup组合api

setup（）

相当于created生命周期
需要return返回，在模块中使用

return {
	count,
	addCount,
	list
				
};

组合api特点

1、setup编写的代码更加直观，接近原生js

<template>
	<div>
            <h1>组合api</h1>
            <button @click="count+=5">{{count}}</button>
            <button @click="addCount(10)">添加</button>
        </div>
</template>
<script>
	import {ref} from 'vue'
        export default {
            const count = ref(10);
            const addCount = function(n) {
                count.value += n;
            }
        }
</script>

可以实现按钮点击加5的功能

2、setup 组合式api 按需加载

如上面的程序,需要ref就导入,按需导入

3、setup中没有this （降低耦合性提高复用）

reactive的用法

const list = reactive([
	"Vue", "React", "Angular"
])

定义个引用类型响应式数据,默认值是[...],可以在页面中输出

watch 监听数据

watch(count, (nval, oval) => {
    if (nval > 50) {
        console.log(oval);
        Notify({
            type: 'success',
            message: '可以买进了！'
	});
    }
})

当数字大于50时,提示"可以买进了！"

computed计算

const count2 = computed(()=>count.value*2)

从现有的count值x2,返回

const age = computed({
	get(){return count.value},
            set(v){
                count.value = v;
		if(v>100){
                    count.value = 100;
		}
		if(v<0){
                    count.value = 0;
                }		
            }
})

声明age,并将范围限制在0-100

watchEffect监听效果

const stop = watchEffect(() => {
    localStorage.setItem("count", count.value);
    localStorage.setItem("list", JSON.stringify(list))
})

可以将数据存储在本地,并实时更新
为按钮添加stop后,再点击就不再存储到本地

默认setup中相当于created

const joks = reactive([]);
    axios.get("https://520mg.com/mi/list.php")
    .then(res=>{
        joks.push(...res.data.result)
    })

可以直接使用axios将网址中的内容输出

节点引用

const inpRef = ref(null);
    onMounted(() => {
        console.log(inpRef.value);
	inpRef.value.addEventListener("click",function(){
            var str = inpRef.value.innerText;//获取文本内容
            str = str.split('').reverse().join('');//翻转
            inpRef.value.innerText = str;//重置赋值
	})
        console.log($store.state.goods);
    })

元素的ref属性绑定inpRef后内容翻转

生命周期

如上方代码,onMounted,即在生命周期前加on
onBeforeCreate/onCreated
onBeforeMount/onMounted
onBeforeUpdate/onUpdated
onBeforeUnmount/onUnmounted

getCurrentInstance 全局配置(一般不用)

const app = getCurrentInstance().appContext;
const $store = app.config.globalProperties.$store;

setup使用路由

导入

import {useRoute,useRouter} from 'vue-router'

js写入

const router = useRouter();
const route = useRoute();

等同于this. $router 和 this.$ route

返回窗口宽高

写入js文件中

//显示窗口宽高
import { ref,onMounted,onBeforeUnmount } from "vue"
function  useWin() {
	//定义一个响应式数据size 是窗口的宽高
	const size = ref({
		w:window.innerWidth,
		h:window.innerHeight
	})
	function onResize(){
		size.value = {
			w:window.innerWidth,
			h:window.innerHeight
		}
	}
	onMounted(() => {
		window.addEventListener("resize",onResize)
	})
	onBeforeUnmount(() => {
		window.removeEventListener("resize",onResize)
	})
	//监听变化
	return size;
}
export {useWin};

在需要的页面引入就可以获取页面宽高

setup的参数

使用 setup 函数时，它将接收两个参数：props，context

<script>
    export default{
        props:["num"],
	setup(props,context){
            console.log("props传入参数",props);
            console.log("attrs",context.attrs);
            context.emit("addNum",15)
        }
    }
</script>

setup语法糖

<script setup>
	import HelloWorld from '@/components/HelloWorld.vue'
	import {ref} from 'vue';
	const count = ref(100);
	const setCount = function(v){
		count.value += v;
	}
</script>

script中加入setup之后可以不用return导出

vue3组合api,setup的使用，还不来了解一下