vue3 setup(详细)使用教程
文章目录
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e5d436a536c42b0bac7d21502dc6aa22.webp?x-image-process=image/format,png#pic_center)
前言:vue3.x新特性
1:为什么使用setup
当项目变大时,一个方法(methods)、一个数据(data)、一张表,相同的逻辑代码出现在多个地方,给维护带来很大的不便。 setup的出现就是为了解决这个问题。
2:创建vue3项目
开始之前首先确认vue cli 版本:Vue CLI 4.x
vue --version
安装 vue cli 4.x
npm install -g @vue/cli
创建基于vue3的项目:
vue create vue3
选择 vue3:
点击回车安装。
3:在组件中编写setup方法
<template>
<div class="hello">
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
name: "hello",
setup(msg) {
console.log(msg);
return { name:"Mr liu" };
},
};
</script>
<style scoped>
</style>
如果一切正常,你将看到此输出:
4:setup生命周期
4.1:执行时机
setup 会在 beforeCreate
之前执行。
export default {
name: "hello",
setup(msg) {
console.log(msg);
return { name:"Mr liu" };
},
beforeCreate(){
console.log("beforeCreate");
}
};
4.2:setup 包含的生命周期
- onBeforeMount——挂载开始前调用
- onMounted——挂载后调用
- onBeforeUpdate——当响应数据改变,且重新渲染前调用
- onUpdated——重新渲染后调用
- onBeforeUnmount——Vue实例销毁前调用
- onUnmounted——实例销毁后调用
- onActivated——当keep-alive组件被激活时调用
- onDeactivated——当keep-alive组件取消激活时调用
- onErrorCaptured——从子组件中捕获错误时调用
比如:onMounted
:
import { onMounted } from 'vue'
export default {
name: "hello",
setup(msg) {
onMounted(()=>{
console.log("onMounted");
})
console.log(msg);
return { name:"Mr liu" };
},
beforeCreate(){
console.log("beforeCreate");
}
};
5:setup使用ref对数据进行响应式绑定
响应式绑定:使用ref
<template>
<div class="hello">
<h1>{{ name }}</h1>
<h5>count:{{count}}</h5>
</div>
</template>
<script>
import { onMounted } from 'vue'
export default {
name: "hello",
setup(msg) {
onMounted(()=>{
console.log("onMounted");
})
console.log(msg);
//创建定时器增加count值
let count = 1;
setInterval(()=>{
count++
},1000)
return { name:"Mr liu",count:count };
},
beforeCreate(){
console.log("beforeCreate");
}
};
</script>
<style scoped>
</style>
虽然我们创建了定时器增加count
的值,但视图并未发生变化。
换成 ref 赋值:
//创建定时器增加count值
let count = ref(1);
setInterval(()=>{
count.value++
},1000)
return { name:"Mr liu",count:count };
ref
接受参数并返回它包装在一个带有value属性的对象中,然后可以使用该属性访问或改变反应变量的值
别忘了引入ref
:
import { ref,onMounted } from 'vue'
接下来视图的数据会一直变化。
6:setup使用watch和computed
6.1:对变化做出反应 watch
使用 watch 监听count
的变化:
import { ref, onMounted, watch } from "vue";
export default {
name: "hello",
setup(msg) {
onMounted(() => {
console.log("onMounted");
});
console.log(msg);
//创建定时器增加count值
let count = ref(1);
setInterval(() => {
count.value++;
}, 1000);
watch(count, (newValue, oldValue) => {
console.log(newValue,oldValue);
console.log(count.value);
});
return { name: "Mr liu", count: count };
},
beforeCreate() {
console.log("beforeCreate");
},
};
6.2:使用 computed 计算count的值:
let count2 = computed(()=>count.value*2);
return { name: "Mr liu", count: count2 };
数据将会展示出:2 4 6 8…
7:setup看起来似乎更笨重了
当代码多的时候,看起来似乎没有解决问题,反而看起来很笨重。
我们可以将代码分成多个部分并引入:
新建 mycount.js
文件:
import { ref } from 'vue'
export default function mycount(){
//创建定时器增加count值
let count = ref('1');
setInterval(()=>{
count.value++
},1000)
return{
count:count
}
}
引入 mycount
文件:
import mycount from '../../util/count';
export default {
name: "hello",
setup() {
let {count} = mycount();
return { name: "Mr liu" ,count};
},
beforeCreate() {
console.log("beforeCreate");
},
};
count的值会实时变化并更新视图。
8:关于 props 的值
父组件给子组件传值 user:'anny'
子组件setup
可以取出该值:
import mycount from '../../util/count';
export default {
name: "hello",
props:{
user:String
},
setup(msg) {
console.log(msg.user)
let {count} = mycount();
return { name: "Mr liu" ,count};
},
beforeCreate() {
console.log("beforeCreate");
},
};