大海贼时代结束！！！

vue3开始！！！

setup初体验

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

2.vue2里面没有了 this 

3. 1）访问变量先定义

const msg = '1'

2）然后在return里面返回 变量名

3）在template 中进行渲染

4.案例demo

<template>
  <h2>{{ msg }}</h2>
  <button @click="btn">点一下</button>
</template>
<script>
export default {
  setup() {
    const msg = '1'
    const btn = () => {
      console.log("ss")
    }
    return {
      msg,
      btn
    }
  }
}
</script>

serup语法糖

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

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

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

<template>
  <h1>{{ msg }}</h1>
  <button @click="appDate">点击出现js文件的内容</button>
  <hello></hello>
</template>
<script setup>
import { appDate } from './appDate.js'
// 一个模块
import hello from './components/hello.vue'
const msg = "标题"

</script>

ref 的使用

1.在setup里面定义的变量，对其不可以直接进行修改，需要先ref的处理

2.1）先引入  import { ref } from 'vue'

2）ref使用就是将值包起来，会生成一个 refimpl对象

    let num = ref(0)
    let str = ref("原字符串")

 3）操作数据需要加上   变量名.value才可以访问到对象里面的值  

4）如果变量是一个对象也同理，需要变量名.value.具体的名字

3.总结demo

<template>
  <h1>薪资{{ num }}</h1>
  <button @click="add">点击加薪</button>
  <h1>姓名：{{ object.name }}</h1>
  <h1>年龄：{{ object.age }}</h1>
  <button @click="objectData">点击修改个人信息</button>
</template>
<script>
// 引入ref
import { ref } from 'vue';
export default {
  setup() {
    // ref的基础用法 
    // 1.先引入 import
    // 2.ref(0) 将值修改成refimpl对象
    // 3.访问对象里面的value
    // 定义一个薪资值
    let num = ref(10)
    let add = () => {
      num.value += 1000
    }
    // 对象形式的定义一个对象
    let object = ref({
      name: "张三",
      age: 32
    })
    // 对对象进行修改   一定要  .value来获取对象里面的值
    let objectData = () => {
      object.value.name = "王五",
        object.value.age = "30"
    }
    return {
      // 返回用到的变量名和方法名
      num,
      add,
      object,
      objectData
    }
  }
}
</script>

reactive 修饰复杂的类型

1.不可以定义基本类型只可以定义引用类型

2.可以将一个数组直接放到 reactive

    let object = reactive({
      name: "张三",
      age: 32
    })

3.return 返回只需要返回数组的名字

    return {
      // 返回用到的变量名和方法名
      object,
      objectData
    }

4.在上面定义的引用插值表达时需要指定要变量名

<template>
  <h1>姓名：{{ object.name }}</h1>
  <h1>年龄：{{ object.age }}</h1>
  <button @click="objectData">点击修改个人信息</button>
</template>

5总体的demo

<template>
  <h1>姓名：{{ object.name }}</h1>
  <h1>年龄：{{ object.age }}</h1>
  <button @click="objectData">点击修改个人信息</button>
</template>
<script>
// 引入ref
import { reactive, ref } from 'vue';
export default {
  setup() {
    // reactive 修饰复杂的类型
    // 不可以定义基本类型只可以定义引用类型

    let object = reactive({
      name: "张三",
      age: 32
    })
    // reactive 不需要加value
    let objectData = () => {
      object.name = "王五",
        object.age = "30"
    }
    return {
      // 返回用到的变量名和方法名
      object,
      objectData
    }
  }
}
</script>

toRef与toRefs 的不同

1.

重新航海！！！

Vue2选项式Api Vue3组合式Api

<template>
  <h4> {{ name }} </h4>
</template>
<script>
export default {
  setup() {
    // 注册变量
    let name = "张三"
    // 导出
    return {
      name
    }
  }
}
</script>

ref的使用

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

<template>
  <h4> {{ name }} </h4>
  <button @click="updateName">修改name</button>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    // 注册变量
    let name = ref("张三")

    const updateName = () => {
      console.log(name);
      name.value = '张四'
    }
    // 导出
    return {
      name,
      updateName
    }
  }
}
</script>

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

<template>
  <div>
    姓名：{{ counts.name }} <br />
    年龄：{{ counts.age }}<br />
    爱好：{{ counts.hoopy }}<br />
    喜欢：{{ counts.like }}<br />
  </div>
  <button @click="updateworld">魔法</button>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    let counts = reactive({
      name: "小明",
      age: 10,
      hoopy: ['乒乓球', '篮球', '足球'],
      like: {
        name: "篮球",
        time: "10年"
      }
    })
    const updateworld = () => {
      counts.name = '小用'
      counts.age = 23
      counts.hoopy[2] = "橄榄球"
      counts.like.name = "橄榄球",
        counts.like.time = "30年"
    }
    // 导出
    return {
      counts,
      updateworld
    }
  }
}
</script>

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的 数据双向绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let person = {
            name: "张三",
            age: 23
        }

        // Proxy 代理 拦截对象 
        // Reflect 反射 对数据进行操作
        const p = new Proxy(person, {
            /**
             * 第一个参数 Proxy 化的person对象
             * 第二个参数 propName 修改的那个属性
             * */
            get(target, propName) {
                console.log("get读取到了");
                return Reflect.get(target, propName)
            },
            // value  修改的值
            set(target, propName, value) {
                console.log("set修改了");
                Reflect.set(target.propName, value)
            },
            deleteProperty(target, propName) {
                console.log("数据删除了经过了");
                return Reflect.deleteProperty(target, propName)
            }
        })



    </script>
</body>

</html>

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'],
   // 插槽 
       <template v-slot:school>
         <h1>尚硅谷school</h1>
       </template>
   // 插槽使用 
    <slot name="school"></slot>

6. 计算属性

   <template>
     <h1>计算属性</h1>
     <input type="text" v-model="person.firstName"> <br>
     <input type="text" v-model="person.lastName"> <br>
     <input type="text" v-model="person.sumName">
   </template>
   <script>
   import { computed, reactive } from 'vue'
   export default {
     setup() {
       let person = reactive({
         firstName: "张",
         lastName: "三"
       })
       // 计算属性的渐变方法  不能修改
       // person.sumName = computed(() => {
       //   return person.firstName + "-" + person.lastName
       // })
   
       // 计算属性  可以修改
       person.sumName = computed({
         get() {
           return person.firstName + '-' + person.lastName
         },
         set(value) {  //修改的值
           let sumValue = value.split('-') // 转化成字符串
           // console.log(sumValue);
           person.firstName = sumValue[0]
           person.lastName = sumValue[1]
         }
       })
       return {
         person
       }
     }
   }
   </script>

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({ // 深层响应式
           * const person = shallowReactive({ // 浅层响应式
           * const person = ref({ // 可以对对象响应式 
           * const person = shallowRef({ // 限制ref能对对象的响应式
           * 
          */

10. , toRef, toRefs

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