VUE3学习笔记——setup

一、简介

1、setup是vue3中的一个全新的配置项，值为一个函数；

2、setup是所有CompositionAPI（组合API）的基础，组件中所用到的数据、方法等都需要在setup中进行配置；

需要注意的：

① vue3支持向下兼容，vue2中的data、methods配置项在vue3中都能够使用，但是尽量不要将vue3中的配置项和vue2.x配置项混用；

② vue2.x配置（data、methods、computed等）中可以访问setup中的属性、方法，但是在setup中不能访问vue2.x配置（data、methods、computed等）；

③ 如果vue2.x配置与vue3配置存在重名，则以setup优先；

④ setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性；

二、如何在setup中定义数据

1、import { ref, reactive } from "vue"

2、ref和reactive区别

① 从定义数据方面：
ref：通常用来定义基本类型数据
reactive：定义对象（或者数组）类型数据
ref也可以用来定义对象或者数组类型的数据，内部会通过reactive转为代理对象
② 从原理方面：
ref通过Object.defineProperty()的get和set实现数据代理。
reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。
③ 从使用方面：
ref操作数据需要.value，template模板中不需要。
reactive都不需要.value

3、代码

// 写法一
<script lang="ts">
import { ref, reactive } from 'vue'
export default defineComponent {
  name: '组件名字',
  // 执行setup时，组件实例还没创建，this是undefined
  setup() {
    const num = ref(1)
    const form = reactive({
      name: "",
      age: 0
    }

    return {
      num,
      form
    }
}

</script>

// 写法二
<script lang="ts" setup>
import { ref, reactive } from 'vue'
const num = ref(1)
const form = reactive({
  name: "",
  age: 0
}
</script>

三、如何在setup中定义方法

// 写法一
<script lang="ts">
import { ref, reactive } from 'vue'
export default defineComponent {
  name: '组件名字',
  // 执行setup时，组件实例还没创建，this是undefined
  setup() {
    const num = ref(1)
    const form = reactive({
      name: "",
      age: 0
    }

    const onSubmit = ()=> {
      console.log(num.value)
      console.log(form.age)
    }

    return {
      num,
      form,
      onSubmit
    }
}

</script>

// 写法二
<script lang="ts" setup>
import { ref, reactive } from 'vue'
const num = ref(1)
const form = reactive({
  name: "",
  age: 0
}

const onSubmit = ()=> {
  console.log(num.value)
  console.log(form.age)
}
</script>

四、如何在setup中使用computed

与Vue2中computed配置功能一致

1、import { computed } from "vue";

2、 代码

// 简写
let fullName = computed(()=>{
  return per.firstName + per.lastName;
});

// 完整写法
let fullName2 = computed({
// 读
  get(){
    return per.firstName + per.lastName;
  };
// 写
  set(value){
    const nameArr =value.split("-")
    per.firstName = nameArr[0];
    per.lastName = nameArr[1];
  }
})

总结：计算属性两种用法

① 给computed传入函数，返回值就是计算属性的值
② 给computed传入对象，get获取计算属性的值，set监听计算属性改变。这种写法适用于需要读写计算属性的情况

五、如何在setup使用watch

1、import { watch} from "vue";

参数问题
第一个参数：要监视的内容
第二个参数：监视的值：newValue、oldValue
watch的第三个参数为相关配置
immediate：是否立即监听
deep：深度监听

 2、监听单个数据

//watch 监听单个数据
watch(num,(newVal,oldVal)=>{
  console.log("num的值发生变化:"，num.value)
});

3、监听多个数据

// watch 监听多个数据
watch([num, num2],(newVal,oldVal)=>{
  console.log("监视多个内容!"，newVal，oldVal);
});

 4、tips

① 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）

/*监视reactive定义的响应式数据
若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue!!
若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 */
watch(per,(newValue,oldValue)=>{
  console.log("per变化了"，newValue,oldValue);
 },
 { immediate: true, deep:false }
 //此处的deep配置不再奏效
);

② 监视reactive定义的响应式数据中某个或某些属性时：deep配置无效

//监视reactive定义的响应式数据中的某些属性
watch([()=>per.firstName,()=> per.lastName](newValue, oldValue)=>{
  console.log("per的值变化了:"newValue, oldValue);
 },
 { fimmediate: true, deep:false }
  //此处的deep配置无效
});

六、如果在setup使用store

<script lang="ts" setup>
// 首先引入文件
import { useUserStore } from '@project/store/modules/user';

// 定义
const userStore = useUserStore();

// 使用
const regionCode = computed(() => {
  return userStore.userInfo?.region_code;
});
</script>