VUE3知识点setup函数取代了beforeCreate,created.其他生命周期比如beforeMounted都

>vue生命周期改变

setup函数取代了beforeCreate,created.其他生命周期比如beforeMounted都换成了onMounted(),onBeforeMount(),onBeoreUpdate,onUpdated,onBeforeUnmount,onUnmounted

使用生命周期函数需要在setup函数中使用。setup函数中使用onMounted函数中请求数据。

> setup函数与响应式钩子ref ,reactive,ToRef,ToRefs

setup就是一个钩子函数，是com api的入口函数，对应beforeCreate和created.在里面定义data,methods等属性。 ref与reactive存在是为了追踪响应式变化。

ref用于包装原始值类型，ref返回一个带有.value属性的对象。在setup中使用ref响应式数据，需使用.value获取。
template中ref包装对象会被自动展开。所以在模板中不需要.value。
reactive用来返回一个响应式对象。本身就是对象，所以不需要包装。使用属性不需要加.value
props是响应式，ES6解析会破坏响应式。props不需要在setup函数中return，直接模板使用即可。
toRefs可以进行解构。toRefs可以理解为批量包装props对象。 const {name}=toRefs(props) console.log(name.value) .
toRef可以理解为多了一个参数，允许对key进行包装。 const {name}=toRef(props,'name') console.log(name.value) .

eg:

const msg = ref("hello,vue3");
    const count = ref(0);
    const updateCount = function () {
      count.value++;
    };
  
    const user = reactive({
      aname: "wang",
      age: 23,
      wife: "zhao",
      firstName: "韩",
      lastName: "志伟",
    });
    const state2 = toRefs(user);

setup函数-2 setup(props,context) context主要暴露三个属性，attrs,slots,emits.

setup(props, { emit }) reactive可以优化程序，如果要return 一个对象的话，那么在template模板之中就要用data.a,data.b。使用结构解析又会破坏双向绑定，所以不能用...data ...toRefs(data) == name 模板中使用{{name}}

const data=reactive({"name":"张三"}) return { ...toRefs(data)}

emits派发事件可以对参数进行验证

emits: {
    sonClick: (value: any) => {
      if (value === 1) {
        return true;
      } else {
        return false;
      }
    },
  },

> 观测数据-computed

computed就是箭头函数返回即可

const fullName = computed(() => user.firstName + user.lastName);
const fullName2 = computed({
  get() {
    return user.firstName + "qwewe" + user.lastName;
  },
  set(val: string) {
    const names = val.split("_");
    user.firstName = names[0];
    user.lastName = names[1];
  },
});

> 观测数据-watch

watch,watchEffect vue2中watch是一个对象，vue3是一个函数需要引入。 watch(a,(newVal,oldVal)=>{})
watch接受两个参数，第一个监听的参数，第二回调函数。

watch函数.1.参数 2.回调函数 3.配置 wacth(user,({firstName})=>{ fullName=firstName+'a' },{ immediate: true, deep: true }) 监听多个数据，使用数组。

watchEffeact方法可以监听数据变化时发生回调，不需要指定参数，以回调函数中引用的参数为准。

watchEffect的使用场景为：

监听多个参数的变化
不需要指定参数
立即执行函数

wacthEffect(()=>{fullName=firstName+'a' } )

    watch(
      user,
      ({ firstName, lastName }) => {
        fullName3.value = firstName + "___" + lastName;
      },
      {
        immediate: true,
        deep: true,
      }
    );
    
    watch([() => user.firstName, () => user.lastName], () => {
      console.log("我执行了哦");
    });

vue3+ts vue3+router

路由需要先引用 useRouter,useRoute const route=useRoute() const router=useRouter()

vuex 组合式API

1.访问getter和setter，需要创建computed引用以保留响应性，

setup(){
const store=useStore()
return{
count: computed(()=>store.state.count) 
}
}

2.访问mutation,action 使用mutation, action需要在setup钩子函数中调用commit,dispatch函数。

import {useStore} from 'vuex'
setup(){
const store=useStore()
return{
increment:()=>store.commit('increment')
}