vue3-script-setup

1、setup是vue3新增的生命周期函数，它的加入主要是为了vue3的组合式API得以使用。

2、setup位于beforeCreated之前，用于代替created和beforeCreated，由于setup函数执行的时候项目还没有初始化，所以不能访问data或methods中的数据，也不能使用this。

由于不能使用this，在使用很多变量上会和vue2有一定区别

// $router
this.$router; // vue2
// vue3
import { useRoute, useRouter } from 'vue-router'
const $router = useRouter();

setup语法糖中使用pinia做数据持久化

// 获取proxy, 和this类似作用
import { getCurrentInstance } 'vue';
let { proxy } = getCurrentInstance() as ComponentInternalInstance;
proxy.$router // 通过proxy获取$router

3、如果要在<script setup>中使用生命周期钩子函数，调用onXXX方法即可，例如mounted方法就是onMounted方法。

ref属性

1. 被用来给元素或者子组件注册引用信息
2. 应用在html标签上获取的是真是DOM元素，应用在组件标签上是组件实例对象
3. 使用方式，在标签中增加ref="xxx"，然后就可以通过this.$refs.xxx来获取

注意在<script setup>中，使用方式有所改变，因为不能使用this指针

<ChildVue ref="childRef" />

<script setup lang='ts'>
const childRef = ref();
onMounted(() => {
    console.log(childRef.value); // Proxy{...}
});
</script>

碰到一个错误就是使用refName.value.xxx='xx'去做修改的时候报错：'set' on proxy: trap returned falsish for property 'direction'，大概原因是修改了只读变量，如果要做修改需要将其变成可修改的变量。

let s = Object({}, steps.value);
steps.value = s; // 这样steps.value就可以修改了

如果在父组件中需要调用子组件内的方法，需要在子组件中将方法公开

const foo = () => {
  //...  
};
defineExpose({
    foo
});

然后就可以在父组件中使用

相关文章：

Vue3 script setup 语法糖详解

Vue3之script-setup全面解析

setup函数和script setup