Vue3的知识点

setup中ref函数制作响应式数据，

对基本数据使用数据劫持方式创建响应式数据

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

setup内部无法通过this获取值，所以只能在参数传入props，不然setup内部无法获取外面传来的值

watch属性 一些坑：

如果监视reacive属性，强制开启深度监视
监视reactive监视对象内部的属性时，无法获取旧的值，监视对象内部时手动开启深度监视

• 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
• 监视reactive定义的响应式数据中某个属性时：deep配置有效。

监视reactive对象属性时，会开启深度监视，所以不需要.value
监视ref属性时，要求监视变量，而非变量值，所以不需要value

watchEffect有点像computed：

• 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
• 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。、

hook函数：

核心思想就是模块化封装，区别在于可以引入挺多暴露的东西
hook与minix相比，可以使用setup的componentApi，如生命周期等

hook概念在react出现比较多，这里最好搜composition function

ref

ref(person.name)就是新造了一个响应式数据，修改的不是person里的值

toRef()是引用一个，可以修改原数据的值
ref()是新建一个，新建后与原来的响应式数据关系不大
toRefs()可以解构多个数据
核心用法：
...toRefs(person),
将person对象中所有数据解构出来，即

name:(person.name)的ref对象
person的每个属性：属性的ref响应式对象

这样就会返回name，不需要使用person.name

setup(){
    let name = ref('张三');
    let mess = "sadfsadf";
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        ji:{
          salary:'50k',
        }
      }
    })
    return {
      // name, mess,person
      ...toRefs(person),
    }

 <h3>{{name}}</h3>
 <h3>{{age}}</h3>
 <h3>{{job.ji.salary}}</h3>

ref属性获取节点

<div ref="refName">

vue2中使用this.$ref.refName获取dom节点

vue3中ref可以通过
声明了一个与 ref 属性名称相同的变量 refName，然后我们通过 refName.value 的形式便获取到了该 div 元素。

<div ref="refName">
<script>
const refdom = ref(null)

// refdom.value就是该dom节点
</script>

注意事项：
1 . 变量名称必须要与 ref 命名的属性名称一致。
2. 通过 hello.value 的形式获取 DOM 元素。
3. 必须要在 DOM 渲染完成后才可以获取 hello.value，否则就是 null。——nextTick
create()周期中将DOM操作的js代码放进Vue.nextTick()的回调函数中

readonly

将响应式数据转换成只读的

person = readonly(persib)

toRaw

处理reactive对应的响应式对象
相当于新开辟了一块空间p，把源对象复制了一份给了p，所以改p的数据时源数据不会变，这是两家
给响应式对象添加任何属性都是响应式的
toRaw临时读取数据而【无需承担代理访问/跟踪的开销】

节流防抖

防抖:回城被打断就要重新来
单位时间内事件触发会被重置——每次输入把之前的settime 清掉，再创建一个新的，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。触发高频事件，n秒内事件只会执行一次，如果n秒内再次触发，则会重新计算时间

节流:技能CD,CD没好 用不了
控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现

vue2和vue3的区别：
原来是通过配置找属性、函数，现在是直接通过类来找，效率高很多，命名也简单很多

1. vue2中同一功能的数据、方法，计算属性在不同的区域内，vue3将一个功能放在hook配置中，数据、方法、生命周期都在一起

异步组件——优化

异步组件只能用在一些小模块 不能用在影响页面布局的模块上 不然有的东西先出现会很难看
说实话,异步组件,就是把组件单独打包,再用jsonp的方式加载执行. 但是一般做的都是系统管理系统,都是内网,速读不必担心.没必要用异步组件
异步组件需要使用Suspense进行占位，避免画面抖动

前端优化方法：
路由懒加载
图片懒加载