vue3开启大海贼时代！！！

大海贼时代结束！！！

vue3开始！！！

setup初体验

1.与vue2不同的是 定义的变量和方法都被放到一个叫 setup( )里面了

2.vue2里面没有了 this 

3. 1）访问变量先定义

const msg = '1'

serup语法糖

1.在script 加setup(语法糖) 这样就可以不用先定义变量，在返回，在使用了

2.直接就可以下面定义，上面调用了

3.在引入模块和js文件时，记得一定要加上后缀名.vue，

重新航海！！！

Vue2选项式Api Vue3组合式Api

ref的使用

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

 reactive的案例使用 定义对象类型的响应式数据 

vue2的拦截方式的缺陷

Vue2的

对象中新增一个属性  和删除一个 属性  Object.defineProperty 拦截不到出现 (数据修改了，页面不变）        曲线救国

新增属性让Vue拦截到       this.person （对象名）

1. 一个属性this.$set( this.person  ,  ' 属性名字 '  ， ' 添加的元素 ')
2. 引入 Vue实例  通过Vue.set( this.person ,  'sex'  ,  ' 女 '  )

删除属性让Vue拦截到   

1. this.$delete(this.person , ' 删除的属性名 ')
2. Vue.delete(this.person , ' 删除的属性名 ')

Vue3的 数据双向绑定

Vue3 和 Vue2 的区别 

1. setup 比  beforeCreate () 执行的还早 ， setup里面取不到 this 事 undefined
2. Vue2中props 传值 可以不接收在 this.$attrs里面获取   Vue3 不接收会发出警告，必须用props接收 在setup第一个参数中获取到值 
3. Vue3中的自定义事件子传父  Vue3中必须要用 emits 接收在setup 的第二个参数 context.emit(' ')中获取
4. Vue3中 setup的第二个参数 里面 
   1. attrs：父组件传递过来的参数，不接收到这里面了 
   2. emit：父组件自定义的方法
   3. slots：父组件在组件插槽中插入的dom元素
5. 组件的传值和自定义事件的使用和插槽

   // 组件传值接收  
   props: ['personName', 'personAge'],
   // 自定义方法接收    
   emits: ['hello'],
   // 插槽 
       
   // 插槽使用 
    

6. 计算属性

7. 监视属性
   1. Vue2的监视属性

        watch: {
          // 简易版的：
          // numberOne(newValue, oldValue) {
          //   console.log("数据", newValue, oldValue);
          // }
          numberOne: {
            handler(newValue, oldValue) {
              console.log("监听到了", newValue, oldValue);
            },
            deep: true,
            immediate: true
          }
        },

   2. Vue3的监听 Vue3的监听是一个函数的形式

          // 监听单个 第一种
          watch(numberOne, (newValue, oldValue) => {
            console.log("监听的值:", newValue, oldValue);
          })
      
          // 监听多个 第二种
          watch([StringTwo, numberOne], (newValue, oldValue) => {
            console.log("监听的值:", newValue, oldValue);
          })
      
      
          // 监听reatvie 属性的对象 
          /**
           *  oldValue失效
           *  deep: false 失效
           * */
          // watch(person, (newValue, oldValue) => {
          //   console.log("监听的值", newValue, oldValue);
          // }, {
          //   deep: false
          // })
      
          // 监听reactive 的一个属性  第一个参数设置函数  第三种
          // watch(() => person.name, (newValue, oldValue) => {
          //   console.log("监听的值:", newValue, oldValue);
          // })
      
          // 监听reactive 的多个属性                第四种
          // watch([() => person.name, () => person.age], (newValue, oldValue) => {
          //   console.log("监听的值:", newValue, oldValue);
          // })

   3. watchEffect 函数 
      1. 非惰性的，首页刷新执行！
      2. 全都监视 用谁监视谁  使用场景 只要发生修改watchEffect  的代码就执行。
8. 生命周期函数讲
   1. 销毁前（beforeDestroy )和( destroyed ) 销毁 修改成了 卸载前( beforeUnmount )，已卸载( unmounted )

9.  reactive, ref, shallowReactive, shallowRef

   1. const person = reactive({              // 深层响应式

   2. const person = shallowReactive({// 浅层响应式

   3. const person = ref({                      // 可以对对象响应式

   4. const person = shallowRef({         // 限制ref能 对对象的响应式 只能相应ref(0) 单个数据

10. readonly, shallowReadonly

    1. readonly : 将整个响应式对象修改成只读对象

    2. shallowReadonly ：将响应式对象的第一层数据 修改成只读数据

    3.     // let personReadonly = readonly(person)
           let personReadonly = shallowReadonly(person)

11. toRaw，markRaw

    1. toRaw ：将响应式对象转化成普通对象

    2. markRaw ： 将响应式对象永远转化成普通对象

       1.     function updateCar() {
                let car = {
                  name: "奔驰",
                  price: 23
                }
                person.car = markRaw(car)
              }

12. toRef, toRefs

    1.     return {
             obj,
             ...toRefs(person)  // 导出整个对象
             // name: toRef(person, 'name'), // 导出单个
             // Hname: toRef(person.hoopy, "Hname") // 导出单个
           }

13. customRef 定做

    1. 里面必须传递一个函数 有两个参数

       1. track 通知Vue来追踪Value的变化

       2. trigger 通知Vue来更新Value的变化

    2. 函数必须返回一个对象里面存放get set

    3. function myRef(value, delay) {
             let time
             return customRef((track, trigger) => {
               return {
                 get() {
                   track() // 通知Vue 来追踪value的变化
                   return value
                 },
                 set(newValue) {
                   clearTimeout(time)
                   time = setTimeout(() => {
                     value = newValue
                     trigger() // 通知Vue去重新解析模块
                   }, delay)
                 }
               }
             })
           }

14. 父组件给后代组件传值

    1.   提供：  provide( ' car ' ,  car )

    2.   注入： let obj = inject( 'car' )

15. Vue3 提供了 defineAsyncComponent 方法与 Suspense 内置组件，我们可以用它们来做一个优雅的异步组件加载方案。

    1. import { defineAsyncComponent } from 'vue';
       const childOne = defineAsyncComponent(() => import('./components/ChildOne.vue'))

       异步组件的引入方法！！！

    2. Suspense 组件无需注册直接什么 ， 里面的插槽名字是固定的