setup参数
- props
props 是响应式的,当传入新的 props 时,它将被更新。
示例如下:
//父组件
<template>
<div>
<com :num="num"></com>
<button @click="add">++</button>
</div>
</template>
<script>
import { ref } from 'vue';
import com from './components/com.vue';
export default {
name: 'App',
components: { com },
setup() {
const num = ref(1);
const add = () => {
num.value++
}
return {
num,
add
}
}
}
</script>
//子组件
<template>
<div class="hello">
{{num}}
</div>
</template>
<script>
export default {
props: {
num: Number
}
}
</script>
当点击按钮执行add方法,子组件num会自动更新。
- context
attrs:Attribute (非响应式对象,等同于 $attrs)
slots:插槽 (非响应式对象,等同于 $slots)
emit:触发事件 (方法,等同于 $emit)
expose:暴露公共 property (函数)
生命周期
选项式 API | Hook inside setup |
---|---|
beforeCreate | Not needed* |
created | Not needed* |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted |
errorCaptured | onErrorCaptured |
renderTracked | onRenderTracked |
renderTriggered | onRenderTriggered |
activated | onActivated |
deactivated | onDeactivated |
示例如下: |
<template>
<div>
</div>
</template>
<script>
import { onMounted } from 'vue';
export default {
name: 'App',
setup() {
onMounted(() => {
console.log('mounted')
})
}
}
</script>
响应式数据 ref、reactive
- ref:将一个原始数据类型(String、Number、BigInt、Boolean、Symbol、Null、Undefined)转换成一个带有响应式特性的数据类型。
- reactive:将一个对象(Object) 转换成带有响应式的特性。
示例如下:
<template>
<div>
<div>{{age}}</div>
<div>{{data.height}} {{data.weight}}</div>
<button @click="change">修改</button>
</div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {
name: 'App',
setup() {
const age = ref(18);
const data = reactive({
sex: 1,
height: 178,
weight: 110
})
const change = () => {
age.value = 20;
data.height = 180;
data.weight = 1111;
}
return {
age,
data,
change
}
}
}
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/a8731b2b3f8f0ff43bb342b6fdd74f94.gif)
可能会觉得data.xxx 的写法太麻烦,那么我们可以使用torefs来解构。
torefs:可以将一个响应型对象(reactive) 转化为普通对象(obj),同时又把该对象中的每一个属性转化成对应的响应式属性(ref)。
示例如下,效果同上:
<template>
<div>
<div>{{age}}</div>
<div>{{height}} {{weight}}</div>
<button @click="change">修改</button>
</div>
</template>
<script>
import { reactive, ref, toRefs } from 'vue';
export default {
name: 'App',
setup() {
const age = ref(18);
const data = reactive({
sex: 1,
height: 178,
weight: 110
})
const change = () => {
age.value = 20;
data.height = 180;
data.weight = 1111;
}
return {
age,
...toRefs(data),
change
}
}
}
</script>
在实际的开发过程中,给对象整体重新赋值的情况也屡见不鲜,倘若直接重新是不可以的,可以自行尝试,下面的一种比较推荐的写法,效果同上:
<template>
<div>
<div>{{content.height}} {{content.weight}}</div>
<button @click="change">修改</button>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
name: 'App',
setup() {
const data = reactive({
content:{
sex: 1,
height: 178,
weight: 110
}
})
const change = () => {
data.content ={
sex: 2,
height: 180,
weight: 120
}
}
return {
...toRefs(data),
change
}
}
}
</script>
coumputed
<template>
<div>
<div>{{age}} {{age2}}</div>
<button @click="add">++</button>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
name: 'App',
setup() {
const age = ref(18);
const age2 = computed(() => {
return age.value * 2
})
const add = () => {
age.value++
}
return {
age,
age2,
add
}
}
}
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/d0163e14215cf71b7fc6d8a51c8a9338.gif)
watch && watchEffect
watchEffect 它与 watch 的区别主要有以下几点:
- watchEffect不需要手动传入依赖
- watchEffect每次初始化时会执行一次回调函数来自动获取依赖
- watchEffect无法获取到原值,只能得到变化后的值
watch示例:
<template>
<div>
<div>{{age}} {{age2}}</div>
<div>{{data.height}} {{data2.height}}</div>
<button @click="add">++</button>
</div>
</template>
<script>
import { ref, reactive, watch } from 'vue';
export default {
name: 'App',
setup() {
const age = ref(18);
const age2 = ref(0);
const data = reactive({
height: 178
})
const data2 = reactive({
height: 0
})
/* eslint-disable */
watch([age, ()=> data.height], ([newAge, newHeight], [oldAge, oldHeight]) =>{
age2.value = oldAge;
data2.height = oldHeight;
})
/* eslint-disable */
const add = () => {
age.value++,
data.height++
}
return {
age,
age2,
data,
data2,
add
}
}
}
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/4d0270c3baa92c2ad51f5f2211aee599.gif)
watchEffect示例:
<template>
<div>
<div>{{age}} {{age2}}</div>
<div>{{data.height}} {{data2.height}}</div>
<button @click="add">++</button>
</div>
</template>
<script>
import { ref, reactive, watchEffect } from 'vue';
export default {
name: 'App',
setup() {
const age = ref(18);
const age2 = ref(0);
const data = reactive({
height: 178
})
const data2 = reactive({
height: 0
})
watchEffect(() => {
age2.value = age.value;
data2.height = data.height;
})
const add = () => {
age.value++,
data.height++
}
return {
age,
age2,
data,
data2,
add
}
}
}
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/2ef67a0e1fba179b181839911fc9337c.gif)
获取元素
获取单个元素使用ref(null),获取v-for中的ref数组需要绑定函数。
示例如下:
<template>
<div>
<div ref="name"></div>
<div v-for="(val,index) in arr" :key="index" :ref="setItemRef"></div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
name: 'App',
setup() {
const name = ref(null);
const arr = new Array(10);
const itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onMounted(() => {
name.value.innerHTML = '风舞红枫';
itemRefs.forEach((item, index) => {
item.innerHTML = index;
})
})
return {
name,
arr,
setItemRef
}
}
}
</script>
this不可用
在 setup() 内部,this 不是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。可以使用下方语句代替
const {proxy} = getCurrentInstance()