vue3

Vue3

1 新建项目

1.1 vue-cli创建

vue -V 查看vue版本，必须高于4.5.0

启动测试

cd vue3_test

npm run serve

运行成功

1.2 vite创建

命令

1.3 分析工程结构

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

/* //创建应用实例对象--app(类似于之前Vue2中的vm,但app比vm更“轻”)
const app = createApp(App)
//挂载
app.mount('#app') */
createApp(App).mount('#app')

App.vue

2 常用的Composition API

2.1 setup

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="sayHello">说话</button>
</template>

<script>

export default {
  name: 'App',
  //此处只是测试一下setup，暂时不考虑响应式的问题
  setup() {
    let name = '张三'
    let age = 20

    //方法
    function sayHello() {
        alert(`我叫${name},我年龄是${age}`)
    }

    //返回一个对象（常用）
    return {
      name,
      age,
      sayHello
    }
  }
}
</script>

2.2 ref处理基本类型

修改基本类型

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    let name = ref('张三')
    let age = ref(18)

    //方法
    function changeInfo() {
      name.value = '李四'
      age.value = 48
    }

    //返回一个对象（常用）
    return {
      name,
      age,
      changeInfo
    }
  }
    
}
</script>

测试原理

修改对象类型

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>薪水：{{job.salary}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type: '前端工程师',
      salary: '30k'
    })

    //方法
    function changeInfo() {
      name.value = '李四'
      age.value = 48,
      console.log(job.value)
      job.value.type = '后端工程师',
      job.value.salary = '60k'
    }

    //返回一个对象（常用）
    return {
      name,
      age,
      job,
      changeInfo
    }
  }
    
}
</script>

2.3 reactive

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>薪水：{{job.salary}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'App',
  setup() {
    let name = ref('张三')
    let age = ref(18)
    let job = reactive({
      type: '前端工程师',
      salary: '30k'
    })

    //方法
    function changeInfo() {
      name.value = '李四'
      age.value = 48,
      console.log(job)
      job.type = '后端工程师',
      job.salary = '60k'
    }

    //返回一个对象（常用）
    return {
      name,
      age,
      job,
      changeInfo
    }
  }
    
}
</script>

数组类型

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>薪水：{{job.salary}}</h3>
  <h3>爱好：{{hobby}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'App',
  setup() {
    let name = ref('张三')
    let age = ref(18)
    let job = reactive({
      type: '前端工程师',
      salary: '30k'
    })
    let hobby = reactive(['抽烟','喝酒','打游戏'])

    //方法
    function changeInfo() {
      name.value = '李四'
      age.value = 48,
      console.log(job)
      job.type = '后端工程师',
      job.salary = '60k',
      hobby[0] = '学习'
    }

    //返回一个对象（常用）
    return {
      name,
      age,
      job,
      changeInfo,
      hobby
    }
  }
    
}
</script>

全部用reactive实现

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h3>工作种类：{{person.job.type}}</h3>
  <h3>薪水：{{person.job.salary}}</h3>
  <h3>爱好：{{person.hobby}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '30k'
      },
      hobby: ['吃饭','睡觉']
    })

    //方法
    function changeInfo() {
      person.name = '李四'
      person.age = 48,
      person.job.type = '后端工程师',
      person.job.salary = '60k',
      person.hobby[0] = '学习'
    }

    //返回一个对象（常用）
    return {
      person,
      changeInfo
    }
  }
    
}
</script>

2.4 vue3的响应式原理

vue2的响应式

vue3的响应式

利用reactive解决vue2中存在的问题

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2 v-show="person.name">姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2 v-show="person.sex">性别：{{person.sex}}</h2>
  <h3>工作种类：{{person.job.type}}</h3>
  <h3>薪水：{{person.job.salary}}</h3>
  <h3>爱好：{{person.hobby}}</h3>
  <button @click="changeInfo">修改人的信息</button>
  <button @click="addSex">添加一个sex属性</button>
  <button @click="deleteName">删除一个name属性</button>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '30k'
      },
      hobby: ['吃饭','睡觉']
    })

    //方法
    function changeInfo() {
      person.name = '李四'
      person.age = 48,
      person.job.type = '后端工程师',
      person.job.salary = '60k',
      person.hobby[0] = '学习'
    }

    function addSex(){
        person.sex = '男'
    }
    function deleteName(){
      delete person.name
    }

    //返回一个对象（常用）
    return {
      person,
      changeInfo,
      addSex,
      deleteName
    }
  }
    
}
</script>

vue3实现原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
          name: 'John',
          age: 30
        }

        //模拟Vue2中实现响应式
        //#region
        /* let p = {}
        Object.defineProperty(p, 'name', {
          configurable: true,
          get() {//有人读取name时调用
            return person.name;
          },
          set(val) {//有人修改name时调用
            console.log('有人修改了name属性，我发现了，我要去更新界面！');
            person.name = val;
          }
        });

        Object.defineProperty(p, 'age', {
          configurable: true,
          get() {//有人读取age时调用
            return person.age;
          },
          set(val) {//有人修改age时调用
            console.log('有人修改了age属性，我发现了，我要去更新界面！');
            person.age = val;
          }
        }); */
        //#endregion


        //模拟Vue3中实现响应式
        //#region
        const p = new Proxy(person,{
          //有人读取p的某个属性时调用
          get(target,propName){
            console.log(`有人读取了p身上的${propName}属性`)
            //propName 是一个变量,target[propName] 相当于从对象中取propName变量对应的值
            return Reflect.get(target,propName)
          },
          //有人修改p的某个属性时调用、或给p追加某个属性时调用
          set(target,propName,value){
            console.log(`有人修改了p身上的${propName}属性属性，我发现了，我要去更新界面！`);
            Reflect.set(target,propName,value)
          },
          //有人删除p的某个属性时调用
          defineProperty(target,propName){
            console.log(`有人删除了p身上的${propName}属性属性，我发现了，我要去更新界面！`);
            return Reflect.defineProperty(target,propName)
          }
        })
        //#endregion

       let obj = {a:1,b:2}
       //通过Object.defineProperty去操作
       /* 这个地方会报错，所以使用try,catch */
       try {
          Object.defineProperty(obj, 'c', {
            get(){
              return 3
            }
          })

          Object.defineProperty(obj, 'c', {
            get(){
              return 4
            }
          })
        
       } catch (error) {
          console.log(error);
       }

       //通过Object.defineProperty去操作
       /* 代码不会报错，只会返回true和false */
       const x1 = Reflect.defineProperty(obj, 'c', {
            get(){
              return 3
            }
        })

       const x2 = Reflect.defineProperty(obj, 'c', {
            get(){
              return 4
            }
        })

        if(x2){
          console.log('某某某操作成功了！');
        }else{
          console.log('某某某操作失败了！');
        }
    </script>
</body>
</html>

2.5 reactive对比ref

2.6 setup的两个注意点

App.vue

<template>
  <Demo></Demo>
</template>

<script>
  import Demo from './components/Demo'
  export default {
    name: 'App',
    components: {
      Demo
    }
  }
</script>

Demo.vue

<template>
  <h1>一个人的信息</h1>
  <h2 v-show="person.name">姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  beforeCreate() {
    console.log('---beforeCreate---');
  },
  setup() {
    console.log('---setup---',this)
    let person = reactive({
      name: '张三',
      age: 18
    })

    //返回一个对象（常用）
      return {
        person
    }
    
  }
}
</script>

运行结果

App.vue

<template>
  <Demo @hello="showHelloMsg" msg="你好啊" school="sgg">
    <template v-slot:qwe >
      <span>sgg</span>
    </template>
    <template v-slot:ase >
      <span>sgg</span>
    </template>
  </Demo>
</template>

<script>
  import Demo from './components/Demo'
  export default {
    name: 'App',
    components: {
      Demo
    },
    setup() {
      function showHelloMsg(value) {
        alert(`你好啊，你触发了Hello事件，我收到了参数是：${value}!`)
      }

      return {
        showHelloMsg
      }

    }
  }
</script>

Demo.vue

<template>
  <h1>一个人的信息</h1>
  <h2 v-show="person.name">姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <button @click="test">测试触发一下Demo组件的Hello</button>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  props: ['msg','school'],
  emits:['hello'],
  setup(props,context) {
    // console.log('---setup---',props)
    // console.log('---setup---',context)
    // console.log('---setup---',context.attrs) //相当于Vue2中的$attrs(父组件向子组件中传值，如果子组件不用props接收，就会放到attrs中,类似于捡漏)
    // console.log('---setup---',context.emit)//触发自定义事件的
    console.log('---setup---',context.slots) //插槽

    //数据
    let person = reactive({
      name: '张三',
      age: 18
    })

    //方法
    function test() {
      context.emit('hello',666)
    }

    //返回一个对象（常用）
      return {
        person,
        test
    }
    
  }
}
</script>

2.7 计算属性与监视

computed函数

App.vue

<template>
  <Demo></Demo>
</template>

<script>
  import Demo from './components/Demo'
  export default {
    name: 'App',
    components: {
      Demo
    },
  }
</script>

Demo.vue

<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.fullName">
</template>

<script>
import {reactive,computed} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据
    let person = reactive({
      firstName: '张',
      lastName: '三'
    })

    //计算属性--简写（没有考虑计算属性被修改的情况）
    /* person.fullName = computed(() => {
      return person.firstName + '-' +person.lastName
    }) */

    //计算属性--完整写法（考虑读和写）
    person.fullName = computed({
      get() {
        return person.firstName + '-' +person.lastName
      },
      set(val) {
        let arr = val.split('-')
        person.firstName = arr[0]
        person.lastName = arr[1]
      }
    })

    //返回一个对象（常用）
      return {
        person
    }
    
  }
}
</script>

watch函数

App.vue

<template>
  <Demo></Demo>
</template>

<script>
  import Demo from './components/Demo'
  export default {
    name: 'App',
    components: {
      Demo
    },
  }
</script>

Demo.vue

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>{{msg}}</h2>
  <button @click="msg += '!'">修改信息</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪资：{{person.job.j1.salary}}</h2>
  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import {ref,reactive,watch} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据
    let sum = ref(0)
    let msg = ref('你好')
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    //情况一：监视ref所定义的一个响应式数据
    /* watch(sum,(newValue,oldValue)=>{
      console.log('sum变了',newValue,oldValue)
    },{immediate:true}) */

    //情况二：监视ref所定义的多个响应式数据
    /* watch([sum,msg],(newValue,oldValue)=>{
      console.log('sum或者msg变了',newValue,oldValue)
    },{immediate:true})  *//* immediate :一上来先执行一次 */

    /* 
      情况三：监视reactive所定义的一个响应式数据的全部属性
        注意1：此处无法正确的获取oldValue
        注意2：强制开启了深度监视（deep配置无效）  ---我测试了一下，好像deep=false的情况下,可以监视不到修改了
    */
    /* watch(person,(newValue,oldValue)=>{
      console.log('person变了',newValue,oldValue)
    },{deep:false})  //此处的deep配置无效 */


    //情况四：监视reactive所定义的一个响应式数据的某个属性
     /* watch(() => person.name,(newValue,oldValue)=>{
      console.log('person.name变了',newValue,oldValue)
    }) */

    //情况五：监视reactive所定义的一个响应式数据的某些属性
    /* watch([() => person.name,() => person.age],(newValue,oldValue)=>{
      console.log('person的name或者age变了',newValue,oldValue)
    }) */

    //特殊情况
    watch(() => person.job,(newValue,oldValue)=>{
      console.log('person.job变了',newValue,oldValue)
    },{deep:true}) //此处由于监视的是reactive所定义的对象中的某个属性（属性的值是一个对象）,所以deep配置有效



    //返回一个对象（常用）
      return {
        sum,
        msg,
        person
    }
    
  }
}
</script>

情况二：监视ref所定义的多个响应式数据

情况三出现的问题

watchEffect函数

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>{{msg}}</h2>
  <button @click="msg += '!'">修改信息</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪资：{{person.job.j1.salary}}</h2>
  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import {ref,reactive,watch,watchEffect} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据
    let sum = ref(0)
    let msg = ref('你好')
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    //监视
    /* watch(sum,(newValue,oldValue) => {
      console.log('sum的值变化了',newValue,oldValue)
    },{immediate: true}) */

    watchEffect(() => {
      const x1 = sum.value
      const x2 = person.job.j1.salary
      console.log('watchEffect所指定的回调执行了')
    })



    //返回一个对象（常用）
      return {
        sum,
        msg,
        person
    }
    
  }
}
</script>

2.8 生命周期

App.vue

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo"></Demo>
</template>

<script>
  import {ref} from 'vue'
  import Demo from './components/Demo'
  export default {
    name: 'App',
    components: {
      Demo
    },
    setup() {
      let isShowDemo = ref(true)
      return {
        isShowDemo
      }
    },
  
  }
</script>

Demo.vue

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
</template>

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据
    let sum = ref(0)

     //通过组合式API的形式去使用生命周期钩子
     onBeforeMount(() => {
        console.log('------onBeforeMount----')
      }),
      onMounted(() => {
        console.log('------onMounted----')
      })
      onBeforeUpdate(() => {
        console.log('------onBeforeUpdate----')
      })
      onUpdated(() => {
        console.log('------onUpdated----')
      })
      onBeforeUnmount(() => {
        console.log('------onBeforeUnmount----')
      })
      onUnmounted(() => {
        console.log('------onUnmounted----')
      })


    //返回一个对象（常用）
      return {
        sum
    }
    
  },
  
    //通过配置项的形式使用生命周期钩子
    //#region 
    /* beforeCreate() {
      console.log('----beforeCreate----')
    },
    created() {
      console.log('----created----')
    },
    beforeMount() {
      console.log('----beforeMount----')
    },
    mounted() {
      console.log('----mounted----')
    },
    beforeUpdate() {
      console.log('----beforeUpdate----')
    },
    updated() {
      console.log('----updated----')
    },
    beforeUnmount() {
      console.log('----beforeUnmount----')
    },
    unmounted() {
      console.log('----unmounted----')
    } */
    //#endregion
}
</script>

2.9 自定义hook函数

App.vue

<template>
  <Demo></Demo>
</template>

<script>
  import {ref} from 'vue'
  import Demo from './components/Demo'
  export default {
    name: 'App',
    components: {
      Demo
    }
  }
</script>

usePoint.js

类似于java中封装了一个函数

import {reactive,onMounted,onBeforeUnmount} from 'vue'
  export default function (){
  //实现鼠标“打点”相关的数据
  let point = reactive({
    x: 0,
    y: 0
  })

  //实现鼠标“打点”相关的方法
  function savePoint(event) {
    point.x = event.pageX
    point.y = event.pageY
  }

  //实现鼠标“打点”相关的生命周期钩子
  onMounted(() => {
      window.addEventListener('click', savePoint)
  })

  onBeforeUnmount(() => {
      window.removeEventListener('click', savePoint)
  })

  return point
}

Demo.vue

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前点击时鼠标的坐标为: x ： {{point.x}}  , y: {{point.y}}</h2>
</template>

<script>
import {ref} from 'vue'
import userPoint from '../hooks/usePoint'
export default {
  name: 'App',
  setup() {
    //数据
    let sum = ref(0)
    let point = userPoint()
    //返回一个对象（常用）
    return {
        sum,
        point
    }
    
  }
}
</script>

2.10 toRef

App.vue

<template>
  <Demo></Demo>
</template>

<script>
  import {ref} from 'vue'
  import Demo from './components/Demo'
  export default {
    name: 'App',
    components: {
      Demo
    }
  }
</script>

Demo.vue

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive,toRef,toRefs} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    //返回一个对象（常用）
    return {
        //toRef的作用是指向person中属性的引用地址，类似于浅拷贝
        /* name:toRef(person, 'name'),
        age:toRef(person, 'age'),
        salary:toRef(person.job.j1, 'salary') */

        /* 使用toRefs进行整体返回，但是只能暴露第一层的属性 */
        ...toRefs(person)
    }
    
  }
}
</script>

3 其他的Composition API

3.1 shallowReactive和shallowRef

Demo.vue

<template>
  <h4>当前的x值是: {{x.p}}</h4>
  <button @click="x.p++">点我x+1</button>
  <hr>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive,toRef,toRefs,shallowReactive,shallowRef} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据  shallow：浅层次的
    // let person = shallowReactive({ //只考虑第一层数据的响应式
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    // let x = shallowRef(0) 如果是基本数据类型，shallowRef和ref没有区别
    let x = shallowRef({  //如果是对象类型，shallowRef的value仍然是object，不是proxy对象，所以无法进行响应式
      p: 0
    })

    //返回一个对象（常用）
    return {
        /* 使用toRefs进行整体返回，但是只能暴露第一层的属性 */
        ...toRefs(person),
        x
    }
    
  }
}
</script>

3.2 readonly与shallowReadonly

Demo.vue

<template>
  <h4>当前求和为：{{sum}}</h4>
  <button @click="sum++">点我x+1</button>
  <hr>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive,toRefs,ref,readonly,shallowReadonly} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据
    let sum = ref(0)
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    /* 数据不能修改，页面也不会刷新，作用场景例子：使用别人给的数据，不能修改 */
    person = readonly(person)  //不允许所有值修改
    //person = shallowReadonly(person) //不允许第一层数据修改
    sum = readonly(sum) //不允许值修改
    //sum = shallowReadonly(sum) //不允许第一层数据修改

    //返回一个对象（常用）
    return {
        /* 使用toRefs进行整体返回，但是只能暴露第一层的属性 */
        ...toRefs(person),
        sum
    }
    
  }
}
</script>

3.3 toRaw和markRaw

Demo.vue

<template>
  <h4>当前求和为：{{sum}}</h4>
  <button @click="sum++">点我x+1</button>
  <hr>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}</h2>
  <h2>车信息：{{person.car}}</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addCar">给人添加一台车</button>
  <button @click="person.car.name += '!'">车换名</button>
  <button @click="changePrice ">车增值</button>
</template>

<script>
import {reactive,toRefs,ref,toRaw,markRaw} from 'vue'
export default {
  name: 'App',
  setup() {
    //数据
    let sum = ref(0)
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    function showRawPerson() {
      let p = toRaw(person)
      console.log(p)
    }

    function addCar() {
      let car = {name:'宝马',price: 40}
      person.car = markRaw(car)
    }

    function changePrice() {
      person.car.price++
      console.log(person.car.price)
    }

    //返回一个对象（常用）
    return {
        /* 使用toRefs进行整体返回，但是只能暴露第一层的属性 */
        ...toRefs(person),
        sum,
        person,
        showRawPerson,
        addCar,
        changePrice
    }
    
  }
}
</script>

3.4 customRef

作用：创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制。

实现防抖

App.vue

<template>
  <input type="text" v-model="keyWord">
  <h3>{{keyWord}}</h3>
</template>

<script>
  import {ref,customRef} from 'vue'
  export default {
    name: 'App',
    setup() {
      //自定义一个ref---名为：myRef
      function myRef(value,delay) {
          let timer
          return customRef((track,trigger) => {
              return {
                get(){
                  console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`);
                  track() //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
                  return value
                },
                set(newValue) {
                  console.log(`有人把myRef这个容器中的数据改为了${newValue}`)
                  clearTimeout(timer)
                  timer = setTimeout(() => {
                    value = newValue
                    trigger() //通知Vue去重新解析模板
                  }, delay);
                }
              }
          })
      }
      // let keyWord = ref('hello') 使用Vue提供的ref
      let keyWord = myRef('hello',500) //使用程序员自定义的ref

      return {
        keyWord
      }
    }
  }
</script>

3.5 provide 和 inject

App.vue

<template>
  <div class="app">
     <h3>我是App组件（祖）, {{name}} --- {{price}}</h3>
     <Child></Child>
  </div>
</template>
<script>
  import {reactive,toRefs,provide} from 'vue'
  import Child from './components/Child.vue'
  export default {
    name: 'App',
    components: {
      Child
    },
    setup() {
      let Car = reactive({name: '奔驰',price: '40W'})
      provide('car', Car) //给自己的后代组件传递数据
      return {
        ...toRefs(Car)
      }
    }
  }
</script>
<style>
  .app{
    background-color: gray;
    padding: 10px;
  }
</style>

Child.vue

<template>
  <div class="child">
     <h3>我是Child组件（子）</h3>
     <Grandson></Grandson>
  </div>
</template>
<script>
  import Grandson from './Grandson.vue'
export default {
  name: 'Child',
  components: {
    Grandson
  }
}
</script>
<style>
  .child{
    background-color: skyblue;
    padding: 10px;
  }
</style>

Grandson.vue

<template>
  <div class="grandson">
     <h3>我是Grandson组件（孙）, {{car.name}} -- {{car.price}}</h3>
  </div>
</template>
<script>
  import {inject} from 'vue'
  export default {
    name: 'Grandson',
    setup() {
      let car = inject('car')

      return {
        car
      }
    }
  }
</script>
<style>
  .grandson{
    background-color: orange;
    padding: 10px;
  }
</style>

3.6 响应式数据的判断

App.vue

<template>
  <div class="app">
     <h3>我是App组件</h3>
  </div>
</template>
<script>
  import {ref,reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy} from 'vue'
  export default {
    name: 'App',
    setup() {
      let car = reactive({name: '奔驰',price: '40W'})
      let sum = ref(0)
      let car2 = readonly(car)

      console.log(isRef(sum))
      console.log(isReactive(car))
      console.log(isReadonly(car2))
      console.log(isProxy(car))
      console.log(isProxy(car2))

      return {
        ...toRefs(car)
      }
    }
  }
</script>
<style>
  .app{
    background-color: gray;
    padding: 10px;
  }
</style>

4 Composition API的优势

5 新的组件

5.1 Fragment

5.2 Teleport

App.vue

<template>
  <div class="app">
     <h3>我是App组件</h3>
     <Child></Child>
  </div>
</template>
<script>
  import Child from './components/Child.vue'
  export default {
    name: 'App',
    components: {
      Child
    },
  }
</script>
<style>
  .app{
    background-color: gray;
    padding: 10px;
  }
</style>

Child.vue

<template>
  <div class="child">
     <h3>我是Child组件</h3>
     <Grandson></Grandson>
  </div>
</template>
<script>
  import Grandson from './Grandson.vue'
export default {
  name: 'Child',
  components: {
    Grandson
  }
}
</script>
<style>
  .child{
    background-color: skyblue;
    padding: 10px;
  }
</style>

Grandson.vue

<template>
  <div class="grandson">
     <h3>我是Grandson组件</h3>
     <Dialog></Dialog>
  </div>
</template>
<script>
  import {inject} from 'vue'
  import Dialog from './Dialog.vue'
  export default {
    name: 'Grandson',
    components: {
      Dialog
    },
  }
</script>
<style>
  .grandson{
    background-color: orange;
    padding: 10px;
  }
</style>

Dialog.vue

<template lang="">
  <div>
    <button @click="isShow = true">点我弹窗</button>
    <teleport to='body' >
      <div v-if="isShow" class="mask">
        <div class="dialog">
          <h3>我是一个弹窗</h3>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <button @click="isShow = false">关闭弹窗</button>
      </div>
      </div>
    </teleport>

  </div>
</template>
<script>
  import {ref} from 'vue'
 export default {
  name: 'Dialog',
  setup() {
    let isShow = ref(false)
    return {
      isShow,
    }
  }
}
</script>
<style >
  .mask{
    position: absolute;
    top: 0; bottom: 0; left:0 ; right: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .dialog{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 300px;
    height: 300px;
    background-color: green;
  }
</style>

5.3 Suspense

App.vue

<template>
  <div class="app">
     <h3>我是App组件</h3>
     <Suspense>
        <template v-slot:default>
          <Child></Child>
        </template>
        <template v-slot:fallback>
          <h3>加载中...</h3>
        </template>
     </Suspense>
  </div>
</template>
<script>
  // import Child from './components/Child.vue' //静态引入
  import {defineAsyncComponent} from 'vue' 
  const Child = defineAsyncComponent(() => import('./components/Child')) //动态引入/异步引入
  export default {
    name: 'App',
    components: {
      Child
    },
  }
</script>
<style>
  .app{
    background-color: gray;
    padding: 10px;
  }
</style>

Child.vue

<template>
  <div class="child">
     <h3>我是Child组件</h3>
     {{sum}}
  </div>
</template>
<script>
  import {ref} from 'vue'
export default {
  name: 'Child',
  async setup() {
    let sum = ref(0)
    let p = new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve({sum})
      }, 1000)
    })
    return await p
  }
}
</script>
<style>
  .child{
    background-color: skyblue;
    padding: 10px;
  }
</style>

6 其他

6.1 全局API的转移

6.2 其他改变