vue3基础API

创建项目

 vite create vite 项目名 --template 模板名

模板可参考 https://github.com/vitejs/vite/tree/main/packages/create-vite

以下内容皆使用 setup 语法糖

ref
用来给定义的基本数据类型绑定响应式数据，访问时需要加上 .value 的方式
template 会自动解析

  const title = ref('这只是一个标题')
  console.log(title.value)  // 这只是一个标题

reactive
用来给响应式数据绑定响应式数据， 可直接通过 .属性的方式进行访问
被普通解构的 reactive 会失去响应式

const mode = reactive({
 name: '张三',
 age: 18
})
console.log(mode.name)  // 张三

toRef
toRef 是根据所绑定的值来决定是否具有响应式
toRef 其实就是用来给 响应式对象解构的

const mode = reactive({
 name: '张三',
 age: 18
})
const modeName = toRef(mode, 'name')
`如果修改 mode 里被 toRef 解构出来的属性, 那么双方都会改变`
`如果只是修改被解构出来的变量，则原对象不会有影响`

toRefs
toRefs 其实就是批量解构对象
内部也是通过对象循环调用了toRef

const mode = reactive({
 name: '张三',
 age: 18
})
const { name, age } = toRefs(mode)

toRaw
将响应式对象修改为普通对象

const data = toRaw(toRawMode)

computed
计算属性

 基本写法
const sum = computed(() => o.value * 99)
 完整写法 get set 方法
const sum = computed({
 get() {
   return o.value * 99
 },
 set(newVal) {
   console.log('set')
 }
})

watch
侦听

侦听普通数据类型
如果侦听的是一个完整的 reactive 对象，则会隐式的开启深度侦听(deep: true)
watch(reactiveObj, (newVal,oldVal) => {
 console.log(newVal, oldVal)
})

侦听对象单一属性
需要将参数一以回调函数的形式传入，也需要手动开启 deep: true
如果侦听多个，就以数组形式传递

watch(() => [obj.name, obj2.name], 
 (newVal, oldVal) => {
   ....
 },
 {
   deep: true
 }
)

WatchEffect
会立即执行一次的侦听
有两个参数
参数一为 当被侦听的对象改变时 会先执行一次 function
参数二为 配置参数一 function 的触发时机 默认为 pre

watchEffect((onInvalidate) => {
 console.log(num.value， '我是被侦听的值, 我会立即执行一次, 每次被修改我都会执行一次')
 onInvalidate(() => {
   console.log('如果 num 的值被改变了, 我会先执行一次')
 })
},
{
 // 参数二 
 flush: "post", // pre 组件更新前执行,  sync 强制效果始终同步触发,  post 组件更新后执行
 onTrigger(e) { //作为一个调试工具，可在开发中方便调试
   console.log('触发', e)
 }
}
)