vue3

vue3带来了什么？

  1.性能的提升

          打包大小减少41%

          初次渲染快55%，更新渲染快133%

          内存减少54%

  2.源码的升级

          使用proxy代替definProperty实现响应式

          重写虚拟DOM的实现和Tree-Shaing

 3.拥抱TypeScript

     vue3更好的支持TypeScript

 4.新特性

1.Composition API

              setup配置

                    ref与reactive

                    watch与watchEffect

                    provide与inject

2.新的内置组件

                    Fragment

                    Teleport

                    Suspense

         3 其他改变

                     新的生命周期钩子

                     data选项应始终被声明为一个函数

                     移除keyCode支持v-on的修饰符

什么是vite？

    新一代前端构建工具

    优势如下：

           开发环境中，无需打包操作，可快速的冷启动

           轻量快速的热重量（HMR）

           真正的按需编译，不在等待整个应用编译完成

ref函数?

作用：定义一个响应式数据

      语法：const xxx = ref(initvalue)

        创建一个包含响应式数据的引用对象（reference对象）

                JS中操作数据：xxx.value

        模板中读取数据：不需要.value，直接：

{{xxx}}

   备注：接收数据可以是基本类型 也可以是对象类型

                基本类型 响应式依然靠Object.defineProperty()的get和set

                对象类型 内部求助了reactive函数

reactive函数

 作用：定义一个对象类型的响应式数据（基本类型别用他，用ref函数）

   语法：const 代理对象 = reactive(被代理对象) 接受一个对象或数组，返回一个代理对象（proxy对象）

      reactive定义的响应式数据是深层次的

      内部基于es6的proxy实现，通过代理对象操作源对象内部数据都是响应式的

vue3响应式原理

        通过Proxy(代理):拦截对象中的任意属性的变化，包括：属性值的读写。属性的添加 删除等

        通过Reflect(反射):对被代理的属性进行操作

        new Proxy(data,{

        拦截读取属性值

              get(target,prop){

         return Reflect.get(target.prop)

       }

        拦截设置属性值或添加新属性

       set(target,prop,value){

         return Reflect.set(target,prop,value)

       }

        拦截删除属性 

       deleteProperty(target,prop){

          return Reflect.deleteProperty(target,prop)

        }

      //此示例有MDN提供

    })

reactive与ref的区别

    1.从定义角度对比：

            ref用来定义基本类型数据

            reactive用来定义对象或数组类型数据

            ref也可以定义对象或数组类型数据，它内部会通过reactive转为代理对象

    2.从原理角度对比：

            ref是通过Object.defineProperty的get和set方法来实现响应式

            reactive通过Proxy来实现响应式，并通过Reflect操作源对象内部数据

3.从使用场景对比：

            ref操作数据需要.value，读取数据时模板中可直接读取不需要,value 

            reactive操作数据与读取数据都不需要.value

setup的两个注意点

   1.setup执行的时机

              在beforeCreate之前执行一次，this是undefined

    2.setup的参数

               props:值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

               emit:  分发自定义事件的函数，相当于this.$emit

               context：上下文对象

                            attrs： 值为对象，包含：组件内部传递过来，但没有在props配置中声明属性，相当于this.$attrs

                            slots: 收到的插槽内容，相当于this.$slots

vue3 computed的两种写法

1.只读写法：

            let xx = computed(()=>{}}

   2.可修改写法（完整写法）

             let xx = computed({

             get(){}

             set(){}

           })

vue3 watch的写法

           let arr = ref('12')

           let res = ref('1')

           let data = reactive({

                num：1，

                                str:'1'

                                list:{

                   a:1        

                }

            })

     监听ref所定义的响应式数据时不用.value

1.监听ref定义的一个响应式数据

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

                immediate立即执行