vue3学习过程中的一些小记录

 CompositionAPI常见函数

ref()

• ref用来定义：基本数据类型。 ref也可以用来定义对象或数组复杂数据类型，它内部会自动通过reactive转为代理对象
• ref通过object.defineProperty()的get和set来实现响应式（数据劫持）
• ref定义的数据：操作数据需要.value，读取数据时模板使用不需要.value

reactive()

• reactive用来定义：对象或数组复杂数据类型
• reactive通过使用proxy来实现响应式（数据劫持），并通过Reflect反射操作源对象内部的数据
• reactive定义的数据：操作读取直接使用

 readonly()

readonly() 让传入的,普通对象,reactive返回的对象,ref的对象,变成只读的 本质就是被包裹的会返回原始对象的只读代理，proxy的set方法进行劫持并且不能对其进行修改

isProxy()

isProxy() 检查对象是否由reactive或readonly创建的proxy

isReactive()

isReactive() 检查对象是否是由reactive创建的响应代理。如果该代理是readonly创建，但包裹了由reactive创建的另一个代理，它也会返回true

isReadonly()

isReadonly() 检查对象是否由readonly创建的只读代理

toRow()

toRow() 返回reactive或readonly代理的原始对象

shallowReactive()

shallowReactive() 创建一个响应式代理，它跟踪其自身property的响应性，但不执行嵌套对象的深层响应式转换(深层还是原生对象，第一层是响应式其他不是)

shallowReadonly()

shallowReadonly() 创建一个proxy,使其自身的property为只读的，但不执行嵌套对象的深度只读转换（深层还是可读可写的）

 unref()

 如果参数是一个ref，则返回内部值，否则返回参数本身，返回原始值不是响应式

 isRef()

判断值是否是一个ref对象

shallowRef() 

创建一个浅层的ref对象

 triggerRef()

手动触发和shallowRef相关联使用 

const info =shallowRef({name:"why"})
//下面的修改不是响应式
const changeInfo =()=>{

        info.value.name = "coderwhy"
        //手动触发更新
        triggerRef(info)

} 

computed 

 ref

<div ref="titleRef"></div>

const titleRef=ref(null) 

生命周期 

provide/inject

provide传入的数据是响应式的inject也是响应式的

watch/ watchEffect

// watchEffect：传入的函数默认会直接执行 执行过程中，会自动收集依赖，只有收集的依赖发生变化函数会再次执行

const stopWatch = watchEffect(()=>{

        console.log("-------",counter.value, name.value)

        if(counter.value >= 10){

                stopWatch()

        }

}）

    // 第一个参数: 要监听的响应式变量(数据源)
    // 第二个参数：执行的回调函数
    // 第三个参数: 配置(例如deep深度监听/immediate是否立即监听等)
    // 注意：当监听一个对象时,第一个参数数据源必须是函数且返回一个值即 "() => 对象.要监听的属性"
    watch(() => sum.value, (New, Old) => {
      console.log(`新值:${New} ——— 老值:${Old}`)
    }, { deep: true,immediate:true })

router

router-link其他属性

• to
• active-class
• exact-active-class

前端路由是如何做到URL和内容进行映射呢 

1. Hash 模式：利用浏览器 URL 中哈希值（# 后面的部分）的变化来触发路由事件。当哈希值改变时，页面不会重新加载，通过监听哈希值变化并匹配相应的路由配置来展示对应内容。
2. History 模式：通过 pushState 和 replaceState 等方法来操作浏览器历史记录，实现 URL 的变化而无实际页面刷新，然后根据不同的路径与路由配置进行映射。

import { createRouter, createWebHistory } from "vue-router";


const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: () => import('@/views/HomeView.vue'),
      children: [
        {
          path: 'lt100',
          component: () => import('@/views/lt/lt100.vue'),
        },
        {
          path: 'lt90',
          component: () => import('@/views/lt/lt90.vue'),
        },
        {
          path: 'lt80',
          component: () => import('@/views/lt/lt80.vue'),
        },
      ]
    },
    {
      path: '/about',
      component: () => import('@/views/AboutView.vue')
    },
  ]
})


export default router

导航被触发 

在失活的组件里调用beforeRouteLeave守卫

调用全局的beforeEach守卫

在重用的组件里调用beforeRouteUpdata守卫2.2  同个动态路由参数变化 路由相同使用这个

在路由配置里调用beforeEnter

解析异步路由组件

在被激活的组件里调用beforeRouteEnter

调用全局的beforeResolve守卫2.5+

导航被确认

调用全局的afterEach 钩子

触发DOM更新

调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入

vuex

1.使用mapGetters

const {message:messageFn}=mapGetters(["message"])
const message  = computed(messageFn.bind({$store:store})

2.直接结构，并且包裹成ref

consy {message}=toRefs(store.getters)

3.针对某一个getters属性使用computed

const message = computd(()=>store.getters.message)

Vue3

1.获取数据嵌套过多

stores的数据通过ref代理的对象属性嵌套过多，想通过.value的方式获取数据会丢失响应式，使用computed包裹一些监听数据变成响应式  

2. 获取组件根元素上的真实dom

获取组件根元素上的真实dom去做一些操作 

<detail-infos ref="infos" :top-infos="mainPart.topModule"/>

let infos=ref()

console.log(infos.value.$el)

3.点击按钮页面滚动到指定位置

window.scrollTo需要跳转到屏幕的位置，vue3里面可以拿到元素的真实dom去跳转

detailRef.value.scrollTo({//跳转的元素
    top: infos.value.$el.offsetTop,//跳转的位置
    behavior: "smooth"//默认没有动画
})

4.请求的数据数组累加

 数组追加数据直接采用push(...arr)的方式，避免for添加

async fetchHouselistData() {
    const res = await getHonHouselist()
    this.houselist.push(...res.data)
}

 5.隐藏滚动条样式

::-webkit-scrollbar

<style lang="less" scoped>
.categories{
    display: flex;
    overflow-x: auto;
    IIIaheight: 80px;
    padding: 0 10px;
    margin-top: 8px;
        &::-webkit-scrollbar{
           display:none;
        }
}
</style>

6.选中算法

 对歌词或者滚动屏幕tab指定对应位置的算法

const values = [100, 300,500,800, 1000]

let currentvalue = 50
let currentIndex = values.length-1

for (let i =0; i < values.length; i++) {
    const value = values[i]
    if (value > currentvalue) {
        currentIndex = i- 1
        break
    }
}

console.log(currentIndex)