1,setup语法糖使用
注意:在setup()中不能有this
在setup中你应该避免使用 " this ", 因为它不会找到组件实例,“setup” 调用发生在 " data " property,“computed”, property 或 " methods"被解析之前,所以它们无法在 "setup"中获取,这也是为了避免setup()和其他选项式API混淆
setup(高级用法),推荐使用
<script setup lang="ts">
const props = defineProps({
title:{
type:String,
default:()=>{
reuturn "测试信息"
}
}
})
</script>
注意:使用setup()后,在引入组件时可以直接使用,不需要对引入组件进行注册
2,defineProps和defineEmits
注意:defineProprs和defineEmits都只是在
// 子组件
<template>
<p>{props.msg}</p>
<buttom @click="handleClick"></buttom>
</template>
<script setup lang="ts">
const props = defineProps({
msg:{
type: String,
default:()=>"默认值"
}
})
const emit =defineEmits['no-change","update"]
const handleClick =()=>{
emit("on-change","父组件方法被调用了")
}
</script>
// 父组件
<script setup lang="ts">
import TestPropsPmit from './comps/test-props-emit/index.vue'
import{ref} from 'vue'
const msg =ref('欢迎使用vite!')
const handleChang =(params:string)=>{
console.log(parmas)
}
</script>
3,defineExpose属性的应用
使用
<script setup lang="ts">
function testChild():void{
console.log('子组件的testChild被调用了')
}
const b =ref(2);
//统一暴露属性
defineExpose({
obj:{
name: '张三',
age:2000
},
b,
testChild
})
</script>
4,正确定义变量(字符串,对象,数组)
示例代码:
<template>
// 使用实例,方法使用变量也类似
<p>{originDate.count}</p>
</template>
<script setup lang="ts">
import {ref ,reactive } from 'vue';
const count = ref(0);
const user = reactive({name:'张三'})
const arr = reactive([1,2,3,4])
// 综合定义方法
const originData = react({
conut: 0.
user:{![在这里插入图片描述](https://img-blog.csdnimg.cn/738b4249c5814a28882a656e9aea85a2.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAamFjayZjb2Rl,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
name:'张三'
},
arr:[1,2,3,4]
})
</script>
5,watch与watchEffect比较,推荐watch监听
A:wacth和watchEffect比较都懒执行副作用,不过watchEffect比较频繁,在vue组件更新之前执行
B:watch更具体说明什么状态应该触发侦听器重新执行,watchEffect就没有那么友好
C:watch访问侦听状态变化前后的值
代码示例
// 监听多个值,单个值就跟vue2一样
watch([count,originData.user],(n,o)=>{
console.log(n[0],n[1]);
})
// 立即监听
watch([count,originData.user],(n,o)=>{
console.log(n[0],n[1]);
},{deep:true, immgiate:true})
6,在setup中的生命周期钩子