vue3基础

vue3里面可以用vue2里面的东西但是不建议用

vue3是按需引入的，不像vue2的Vue实例很臃肿什么都有，createApp()是一个应用实例对象和Vue实例对象很相似但是少了很多东西。

vue3新出了一个setup(){}函数里面的变量和方法必须要return出去html上才可以拿到。

setup会在beforeCreated之前执行一次，this是undefined

props:[]// 接收数据
emits:[]// 接收方法
setup(props,context){
  // props使用	
  // context意思是指向上下文	.emit() 触发方法	.slots插槽	.attrs父组件没接收的数据或方法
  let name = ref('孙悟空')
  
  return {
    name
  }
}

vue3新出了定义响应式数据的方法，vue3的数据响应式基本类型还是基于Object.defineProperty，但是引用类型不是了修改为基于es6的Proxy，vue3不存在修改，添加，对象或数组造成数据修改但是页面不被渲染的情况

import {ref,reactive} from 'vue'

ref定义响应式数据，ref定义的数据必须要.value才可以拿到，但是在html中不需要会自动.value
ref定义引用类型的时候是求助了reactive来进行数据响应式
let name = ref('孙悟空')// name.value
let obj = ref({name:'孙悟空',age:'500多',})// obj.value.name
let arr = ref([1,2,3,4,5])// arr.value[0]

reactive定义响应式对象，只能对引用类型进行响应式，基本类型会报错，不需要.value来获取数据
let person = reactive({
  name:'',
  age:'',
})// people.name
let arr = reactive([1,2,3,4])// arr.[0]

vue3中的reactive数组包装响应式失效问题，接口返回数据，赋值给数组后，页面上的数据并没有更新。

列如：
let arr = reactive([])
arr = res.data// res.data假如成接口返回的数据
reactive声明的响应式对象被arr代理，操作代理对象需要有代理对象的前缀，此时的res直接把值赋值给了arr，使得arr失去了响应式。在vue3使用Proxy，对于对象或数组都不能直接将整个数据赋值。

方法一
reactive({
    list:[]
})

方法二
ref([])

方法三
使用vue封装的方法，如：push，UNshift

vue3中的计算属性computed是一个api需要引入

import {computed} from 'vue'

setup(){
  let calculation = computed({// 完整写法
    get(){},
    set(value){}
  })
  let calculation = computed(()=>{// 简写
    return 
  })
}

vue3的watch

import {watch} from 'vue'

watch(变量,(newValue,oldValue) => {
  
},{immediate:true})

watch([变量,变量],(newValue,oldValue) => {
  
},{immediate:true})

vue3watch监视reactive对象newValue、oldValue都是最新的，强制开启了deep:true无法关闭

watch(()=>变量.key,(newValue,oldValue) => {// 监视对象里面的某一个值
  // 无需开启deep
},{immediate:true})

watch([()=>变量.key,()=>变量.key],(newValue,oldValue) => {// 监视对象里面的某一个值
  // 无需开启deep
},{immediate:true})

如果是对象里面包裹对象，而且只监视对象里面的某个对象的时候需要加deep:true，否者无效。
ref定义的基本数据类型在watch的时候不需要.value，因为watch要监视的是一个保存数据的一个结构不是数据本身
ref定义的引用类型watch的时候必须要.value否则检测不到或者可以加deep，一般不会用ref来定义引用类型

vue3里面的watchEffect

import { watchEffect } from 'vue'

// 监听不确定的值
// 监听的是watchEffect回掉函数里面用到的变量
// 有点像computed、但是computed注重是计算出来的值必须要写return，而watchEffct更注重过程不需要写return
watchEffect(() => {
  // 默认开启了immediate
  // 在里面用到的都会被监听
})

vue3的声明周期

// vue3改了两个生命周期
// 销毁之前和销毁完成、改、卸载之前和卸载完成
// setup执行在boforcreated之前，而且在setup中写生命周期vue没给准备boforcreated、created的api。
// 剩下的在setup中写都是在前面加了on，如果api和配置项都写了声明周期，api的优先级高。
onBoforMounted(()=>{})// 组合式api写法

Vue3里面多了hook

// 可以封装一个方法、而且可以使用setup里面的api、如生命周期、computed、uerRouter

vue3暴露变量方法

toref、torefs// 暴露方法
//定义数据方法
shallowref、shallowreactive// shallow == 浅层 
readonly// 只读的、shallowreadonly// 只有第一层是只读
toRow// 还原响应式对象、markRow// 标记成为不成为响应式的数据	// Row == 初始
customRef((track,trigger)=>{ // 自定义ref、回调函数要求返回一个对象
  // track() 追踪 通知追踪数据变化
  // trigger() 从新解析模板 就是更改之后在调用一下get
  return {
    get(){
      track()
      return value
    },  
    set(newValue){
      value = newValue
      trigger()
    }
  }
})
// 给后代组件传递数据
provide('car',car)// 给后代组件传递数据
let car = inject('car')// 获取
isRef、isReactive、isReadonly、isProxy// 查询类别
  <teleport to="body"></teleport>// 瞬移、移动
import {defineAsyncComponent} from 'vue'
components: {// 定义一个异步组件、异步引入
  MAsynComp: defineAsyncComponent(() => import('./AsynComp.vue')),
},
  defineAsyncComponent(()=>{// 定义一个异步组件、异步引入
    return import('路径')//  一个回调函数
  })
<Suspense>
    <template v-slot:default>
<组件 />
</template>
<template v-slot:fallback>
  <h3>加载中...</h3>
</template>
</Suspense>