Vue3笔记——（尚硅谷张天禹Vue笔记)

Vue3

Vue3简介

1.Vue3简介

.2020年9月18日，Vue.js发布3.0版本，代号: One Piece(海贼王)。耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者

. github上的tags地址: https://github.com/vuejs/vue-next/releases/tag/v3.0.0

2.Vue3带来了什么

.性能的提升

.打包大小减少41%

.初次渲染快55%，更新渲染快133%。内存减少54%

3.拥抱TypeScript

. vue3可以更好的支持TypeScript

4.新的特性

1.Composition API(组合API)

. setup配置

. ref与reactive

. watch与watchEffect

. provide与inject

. ...

2.新的内置组件

. Fragment

. Teleport

. suspense

3.其他改变

. 新的生命周期钩子

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

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

. ...

使用vue-cli创建工程

1.使用vue-cli 创建

官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本,确保@vue/cli版本在4.5.o以上

vue --version

## 安装或者升级你的@vue/cli

npm install -g @vue/cli

## 创建

vue create vue_test

## 启动

cd vue_test

npm run serve

使用vite创建工程

⒉使用vite 创建

官方文档: https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网: https://vitejs.cn

.什么是vite? ——相对于webpack,新一代前端构建工具。

.优势如下:

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

。轻量快速的热重载(HMR)。

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

##创建工程

npm init vite-app <project-name>

npm init vite-app vue3_test_vite

##进入工程目录

cd <project-name>

##安装依赖

npm install

##运行

npm run dev

分析Vue3的工程结构

分析vue-cli所创建出的vue3工程

关闭语法检查：vue3自带的vue.config.js中的内容直接替换为vue2的写法也行，如下：
module.exports = {
lintOnSave:false,//关闭语法检查
}

App.vue中vue3中template标签中可以没有根标签括起来

main.js

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

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

app.mount('#app')

setTimeout(() => {    
    app.unmount('#app')
}, 1000);

/* 类似vue2中的如下方式的创建vm挂载Vue到app挂载点,但main.js中不兼容vue2的写法,把vue2的main.js拿来替换不能用,因为无法引入Vue
const vm = new VueElement({
    render:h =>h(App)
})
vm.$mount('app') */

vue3的开发者工具

Vue3开发者工具,可在极简插件中下载，选那个vue图标右下角带圆角矩形的

极简插件_Chrome扩展插件商店_优质crx应用下载

别使用谷歌浏览器下载，会自动删除下载的文件

初识setup

是常用Composition API 组合式API

拉开序幕的setup

1.理解: vue3.0中一个新的配置项，值为一个函数。

2.setup是所有Composition API(组合API)“表演的舞台”。

3.组件中所用到的:数据、方法等等，均要配置在setup中。

4.setup函数的两种返回值:

1.若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )

2.若返回一个渲染函数:则可以自定义渲染内容。(了解)

5.注意点:

1.尽量不要与Vue2.x配置混用

. Vue2.x配置(data、methos、computed...）中可以访问到setup中的属性、方法。

·但在setup中不能访问到Vue2.x配置(data、methos、computed...)。

·如果有重名, setup优先。

2.setup不能是一个async函数，因为返回值不再是return的对象，而是promise,模板看不到return对象中的属性。(后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合)

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>性别：{{sex}}</h2>
  <h2>vue2和vue3的数据a冲突的时候的以vue3的setup为主{{a}}</h2>
  <button @click="sayHello">说话（Vue3配置的sayHello方法）</button><br/><br/>
  <button @click="sayWelcome">说话（Vue2配置的sayWelcome方法）</button><br/><br/>
  <button @click="test1">测试一下在vue2中读取vue3中的数据和方法</button><br/><br/>
  <button @click="test2">测试一下在vue3中读取vue2中的数据和方法</button>
</template>

<script>
import {h} from "vue"
export default {
  name: 'App',
  data() {
    return {
      sex:"男"  ,
      a:100
    }
  },
  methods:{
    sayWelcome(){
      alert('欢迎来到尚硅谷学习'); 
    },
    test1(){//在vue2中读取vue3是可以的
      console.log(this.sex)
      console.log(this.name)
      console.log(this.age)
      console.log(this.sayHello)
    }
  },
  setup(){  // setup是所有Composition API(组合API)“表演的舞台”。组件中所用到的:数据、方法等等，均要配置在setup中。
    //data直接往这里面写 ，变量用let，常量用const
    let name = "张三";
    let age = 18;
    let a = 200;
    //方法也直接写function
    function sayHello(){
      alert(`我叫${name}，我${age}岁了，你好啊`)//使用``加${}传数据
    };

    function test2(){//在vue3中读取vue2，读取不到
      console.log(this.name)
      console.log(this.age)
      console.log(this.sex)  // undefined
      console.log(this.sayWelcome)  // undefined
    }

    //setup的return若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )
    return{
      name,
      age,
      sayHello,
      test2,
      a,
    }
    // 若返回一个渲染函数:则可以自定义渲染内容。(了解)  会覆盖掉template中的所有内容
    // return()=>{ return h("h1","尚硅谷")}
    /* return()=> h("h1","尚硅谷") */

  }
}
</script>

ref函数处理基本数据类型

除了html中标签中ref属性，vue3多了一个ref函数。
ref加工后的数据就是一个对象RefImpl，reference implement引用实现，引用实现的对象简称引用对象。里面有个value属性，为实现数据响应式的，通过还是get和set做的响应式在__proto__原型对象中的。像vue2中的_data中的东西放在了vm上。

App.vue

<template>
  <h1>一个人的信息</h1>
  <!-- ref引用对象，在模板中不用name.value，模板自动会解析加上.value -->
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {h} from "vue"
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    /* let name = "张三";
    let age = 18; */
    // 把普通数据变成一个响应式的数据
    let name = ref("张三")
    let age = ref(18)

    function changeInfo(){
      /* name = '李四'
      age = 48 */
      // 由于name和age为ref函数得到的引用对象，通过get和set做的响应式，所以我们要通过.vaue
      name.value = '李四'
      age.value = 48
    }

    return{
      name,
      age,
      changeInfo
    }


  }
}
</script>

ref函数处理对象类型的数据

对于ref函数处理的对象类型，没有直接变为RefIMpl应用对象，而是变为了Proxy代理对象。是内部求助的reactive函数，这个函数封装了proxy。

App.vue

<template>
  <h1>一个人的信息</h1>
  <!-- ref引用对象，在模板中不用name.value，模板自动会解析加上.value -->
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h3>手机品牌：{{phone.brand}}</h3>
  <h3>手机颜色：{{phone.color}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {h} from "vue"
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    /* let name = "张三";
    let age = 18; */
    // 把普通数据变成一个响应式的数据
    let name = ref("张三")
    let age = ref(18)
    // ref函数处理对象类型
    let phone = ref({
      brand:"redmi", 
      color:"red"
    })

    function changeInfo(){
      /* name = '李四'
      age = 48 */
      // 由于name和age为ref函数得到的引用对象，通过get和set做的响应式，所以我们要通过.vaue
      name.value = '李四'
      age.value = 48
      phone.value.brand="xiaomi" //ref函数对象类型的属性修改数据
      phone.value.color="green"
    }

    return{
      name,
      age,
      changeInfo,
      phone
    }


  }
}
</script>

reactive函数

reactive函数
。作用:定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数)
。语法: const 代理对象= reactive(源对象)接收一个对象(或数组)，返回一个代理对象〈Proxy的实例对象，简称proxy对象)
。 reactive定义的响应式数据是"深层次的”。
。内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

App.vue

<template>
  <h1>一个人的信息</h1>
  <!-- ref引用对象，在模板中不用name.value，模板自动会解析加上.value -->
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h3>手机品牌：{{phone.brand}}</h3>
  <h3>手机颜色：{{phone.color}}</h3>
  <h3>hobby：{{hobby}}</h3>
  <h3>测试的数据d：{{a.b.c.d}}</h3>
  <button @click="changeInfo">修改数据</button>
</template>

<script>
import {h} from "vue"
import {ref,reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    // 把普通数据变成一个响应式的数据
    let name = ref("张三")
    let age = ref(18)
    // reactive将对象变为响应式的
    let phone = reactive({
      brand:"redmi", 
      color:"red"
    })
    let a = reactive({
      b:{
        c:{
          d:666
        }
      }
    })
    let hobby = reactive(['看喜羊羊','看灰太狼','看光头强'])

    function changeInfo(){
      name.value = '李四'
      age.value = 48
      phone.brand="xiaomi" //active函数对象类型的属性修改数据
      phone.color="green"
      a.b.c.d=999
      hobby[0] = '看熊出没'
    }

    return{
      name,
      age,
      changeInfo,
      phone,
      a,
      hobby
    }


  }
}
</script>

Vue2的响应式原理的回顾

vue2.x的响应式

. 实现原理:

。对象类型:通过object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。

。数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。

object.defineProperty(data， 'count ', {

get(){},

set(){}

})

. 存在问题:

。新增属性、删除属性,界面不会更新。

。直接通过下标修改数组,界面不会自动更新。

Vue2项目中的App.vue，来看vue2的响应式存在的问题

<template>
  <div>
      <h1>我是Vue2的写法</h1>
      <h2 v-show="person.name">姓名：{{person.name}}</h2>
      <h2>年龄：{{person.age}}</h2>
      <h2>爱好：{{person.hobby}}</h2>
      <h2 v-show="person.sex">性别：{{person.sex}}</h2>
      <button @click="addSex">添加一个sex属性</button>
      <button @click="deleteName">添加一个name属性</button>
      <button @click="updateHobby">修改第一个爱好的名字</button>
  </div>
</template>
<script>
import Vue from 'vue'
export default {
  name:"App",
  data() {
    return {
      person:{
        name:'张三',
        age:18,
        hobby:["看喜羊羊",'看灰太狼','看光头强']
      }
    }
  },
  methods:{
    addSex(){
      /* console.log(this.person.sex) //undefined
      this.person.sex='女'
      console.log(this.person.sex) //'女'  确实新增了sex属性了，但页面不更新，defineProperties监测不到 */
      this.$set(this.person,"sex",'女') //可通过这种和下面这种方式加上这个属性 
      // Vue.set(this.person,"sex",'女')
    },
    deleteName(){
      /* console.log(this.person.name) // '张三'
      delete this.person.name
      console.log(this.person.name)// undefined 确实删除了name，但页面中监测不到，页面还是不变 */
      //this.$delete(this.person,"name")
      Vue.delete(this.person,"name")
    },
     updateHobby(){
      // this.person.hobby[0] = '看大大怪' // 这样修改确实能修改，但页面监测不到，页面上的数据不变
      //this.$set(this.person.hobby,0,"看大大怪")
      // 或使用数组的方法，如push shift splice等，这些方法为vue对普通方法的封装，可以监测到
      this.person.hobby.splice(0,1,'看小小怪')
     }
  }
}
</script>

Vue3的响应式原理Proxy

Vue3中不存在vue2中的添加或属性或修改数组元素的不是响应式的页面不变的问题

Vue3中的App.vue

<template>
  <h1>一个人的信息</h1>
  <!-- ref引用对象，在模板中不用name.value，模板自动会解析加上.value -->
  <h2 v-show="person.name">姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2 v-show="person.sex">性别：{{person.sex}}</h2>
  <h3>手机品牌：{{person.phone.brand}}</h3>
  <h3>手机颜色：{{person.phone.color}}</h3>
  <h3>hobby：{{person.hobby}}</h3>
  <button @click="changeInfo">修改数据</button>
  <button @click="addSex">添加一个sex属性</button>
  <button @click="deleteName">删除一个name属性</button>

</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    let person = reactive({
      name:"张三",
      age:18,
      phone:{
        brand:"redmi", 
        color:"red"
      },
      hobby:['看喜羊羊','看灰太狼','看光头强']
    })

    function changeInfo(){
      person.name = '李四'
      person.age = 48
      person.phone.brand="xiaomi" //active函数对象类型的属性修改数据
      person.phone.color="green"
      person.hobby[0] = '看熊出没'   //直接通过数组下标修改元素也是可以响应式的，页面也会发生变化
    }
    function addSex(){
      person.sex = '男' // 添加一个不存在的属性，页面可以发生变化，做了响应式，reactive的原因。
    }
    function deleteName(){
      delete person.name
    }

    return{
      person,
      changeInfo,
      addSex,
      deleteName
    }


  }
}
</script>

Object.defineProperties、new Proxy()模拟vue2和vue3的响应式原理

响应式原理.html

<!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 : "张三",
            age : 18
        }
        //模拟vue2中实现响应式
        //#region
        /* let p = {}
        Object.defineProperties(p,"name",{
            configurable:true, //声明为可配置的，就允许被删除了
            get(){ //有人读取的时候调用
                return person.name
            },
            set(value){
                console.log("有人修改了name属性，发现了，要去更新界面!")
                person.name = value
            }
        })
        Object.defineProperties(p,"age",{
            get(){ //有人读取的时候调用
                return person.age
            },
            set(value){
                console.log("有人修改了age属性，发现了，要去更新界面!")
                person.age = value
            }
        })
        // 然后再f12控制台中，person.name = '李四' person.sex = '男' delete person.name 之类操作查看结果 */
        //#endregion


        //模拟vue3中实现响应式
        const p = new Proxy(person,{ //就会进行代理，person中的属性都会有get和set了，下面代码可以里面的api做响应式
            //有人读取p的某个属性式调用
            get(target,propName){
                console.log(`有人读取了p身上的${propName}属性`)
                return target[propName]
            },
            // 有人修改了p的某个属性，或给p追加某个属性时调用
            set(target,propName,value){
                console.log(`有人修改了p身上的${propName}属性，我要去更新页面了！`)
                target[propName] = value
            },
            //有人删除p的某个属性时调用
            deleteProperty(target,propName){
                console.log(`有人删除了p身上的${propName}属性，我要去更新页面了！`)
                return delete target[propName]
            }

        })
        // f12中person.name='李四'等操作即可
    </script>
</body>
</html>

Vue3响应式原理Reflect

Reflect反射的方式，容错性更好，我们修改上面的Vue3的模拟中的操作

Vue3的响应式.html

<!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 : "张三",
            age : 18
        }
        //模拟vue2中实现响应式
        //#region
        /* let p = {}
        Object.defineProperties(p,"name",{
            configurable:true, //声明为可配置的，就允许被删除了
            get(){ //有人读取的时候调用
                return person.name
            },
            set(value){
                console.log("有人修改了name属性，发现了，要去更新界面!")
                person.name = value
            }
        })
        Object.defineProperties(p,"age",{
            get(){ //有人读取的时候调用
                return person.age
            },
            set(value){
                console.log("有人修改了age属性，发现了，要去更新界面!")
                person.age = value
            }
        })
        // 然后再f12控制台中，person.name = '李四' person.sex = '男' delete person.name 之类操作查看结果 */
        //#endregion


        //模拟vue3中实现响应式
        //#region
        const p = new Proxy(person,{ //就会进行代理，person中的属性都会有get和set了，下面代码可以里面的api做响应式
            //有人读取p的某个属性式调用
            get(target,propName){
                console.log(`有人读取了p身上的${propName}属性`)
                // return target[propName]
                return Reflect.get(target,propName)
            },
            // 有人修改了p的某个属性，或给p追加某个属性时调用
            set(target,propName,value){
                console.log(`有人修改了p身上的${propName}属性，我要去更新页面了！`)
                // target[propName] = value
                Reflect.set(target,propName,value)
            },
            //有人删除p的某个属性时调用
            deleteProperty(target,propName){
                console.log(`有人删除了p身上的${propName}属性，我要去更新页面了！`)
                // return delete target[propName]
                return Reflect.deleteProperty(target,propName)
            }
        })
        //#endregion

        //#region
        /* //Reflect.definedProperty反射对象去操作
        let obj = {a:1,b:2}
        //除了obj.a = 666 还能Reflect.set(obj,'a',666)的方式修改a Reflect.deleteProperty(obj,'a')的方式删除a
        //通过Object.defineProperty去操作
        Object.defineProperty(obj,'c',{
            get(){
                return 3
            }
        })
        Object.defineProperty(obj,'c',{
            get(){
                return 4
            }
        })
        //如上Object.defineProperty对obj定义追加了c重复了，就会报错，这样容错性不太好，需要try-catch包裹起来
        //但使用如下Reflect.definedProperty反射对象去操作后，重复后就不会报错
        const x1 = Reflect.defineProperty(obj,'c',{
            get(){
                return 3
            }
        })
        const x2 = Reflect.defineProperty(obj,'c',{
            get(){
                return 4
            }
        })
        //可通过if-else判断
        if(x2){
            console.log("某某操作成功了")
        }else{
            console.log("某某操作失败了")
        } */
        //#endregion

    </script>
</body>
</html>

实现原理:

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

。通过Reflect(反射)︰对源对象的属性进行操作。

。MDN文档中描述的Proxy与Reflect:

.Proxy: https:/ldeveloper.mozilla.org/zh-CN/docs/WeblJavaScript/Reference/Global_Objects/Proxy

.Reflect: https:/ldeveloper.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

reactive和ref的对比

. 从定义数据角度对比:

。ref用来定义:基本类型数据。

。 reactive用来定义:对象(或数组)类型数据。

。备注: ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象。

. 从原理角度对比:

。ref通过 object.definePropertv()的get与set来实现响应式(数据劫持)。

。reactive通过使用Proxy来实现响应式(数据劫持)﹐并通过Reflect操作源对象内部的数据。

. 从使用角度对比:

。ref定义的数据:操作数据需要.value，读取数据时模板中直接读取不需要.value 。

。reactive定义的数据:操作数据与读取数据:均不需要.value。

setup的两个注意点

setup的两个注意点

. setup执行的时机

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

. setup的参数

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

。context: 上下文对象

` attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于[this .$attrs 。

` slots: 收到的插槽内容,相当于this.$slots 。

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

vue2中的props传参，父组件写的参数，子组件props:[]没声明的参数，就会被$atts捡漏。vue2中slots父组件中写的额插槽的内容，会放在$slot中作为虚拟节点。
set第一个参数需要props声明，第二个参数用到的emit需要在上面声明给emits
vue3中使用具名插槽尽量用v-slot

App.vue

<template>
  <Demo msg='你好' school='尚硅谷' @hello='showHelloMsg'>
    <span>尚硅谷</span>
  </Demo>
</template>

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

Demo.vue

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

<script>
import { reactive } from 'vue'
export default {
    name:'Demo',
    props:['msg','school'],
    emits:['hello'],
    setup(props,context) {
        // console.log("-----setup-----",props)
        // console.log("---setup---",context)
        // console.log("---setup---",context.attrs)//相当于vue2中的$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>

<style>

</style>

Vue3computed计算属性

App.vue

<template>
  <Demo/>
</template>

<script>
import Demo from "./components/Demo.vue"
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/>
  <!-- <span>全名：{{fullName}}</span> -->
  <span>全名：{{person.fullName}}</span>
  <br/>
  全名：<input type="text" v-model="person.fullName">
</template>

<script>
import { reactive ,computed} from 'vue'
export default {
    name:'Demo',
    /* computed:{ // 在vue3中是可以像vue2中写计算属性的。但不推荐。
        fullName(){
            return this.person.firstName + '-' + this.person.lastName
        }
    }, */
    setup() {
        let person = reactive({
            firstName:'张',
            lastName:"三"
        })
        // 计算属性-简写（没有考虑计算属性被修改的情况)
        /* let fullName = computed(()=>{
            return person.firstName + "-" + person.lastName
        }) */
        /* person.fullName = computed(()=>{
            return person.firstName + "-" + person.lastName
        }) */
        // 计算属性的完整写法（考虑读和写）
        person.fullName = computed({
            get(){
                return person.firstName + '-' +person.lastName
            },
            set(value){
                const nameArr = value.split('-')
                person.firstName=nameArr[0],
                person.lastName=nameArr[1]
            }
        })
        

        return {
            person
        }
    } 
}
</script>

<style>

</style>

watch监视ref定义的数据

Demo.vue

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='!'">修改信息</button>
</template>

<script>
import { ref, watch } from 'vue'
export default {
    name:'Demo',
    /* watch:{// vue3中也可使用vue2中的watch，不过不推荐
        sum(newValue,oldValue){//简写的方式，详细写法见vue2中的watch
            console.log('sum的值变化了',newValue,oldValue)
        }
    }, */
    setup() {
        let sum = ref(0)
        let msg = ref('你好啊')

        //情况1，监视ref所定义的一个响应式数据
        /* watch(sum,(newValue,oldValue)=>{
            console.log("sum变化了",newValue,oldValue)
        }) */

        //情况2，监视ref所定义的多个响应式数据  可写多个watch在vue3中
        /* watch(sum,(newValue,oldValue)=>{
            console.log("sum变化了",newValue,oldValue)
        })
        watch(msg,(newValue,oldValue)=>{
            console.log("msg变化了",newValue,oldValue)
        }) */
        /* watch([sum,msg],(newValue,oldValue)=>{ // newValue,oldValue分别为数组
            console.log("sum或msg变化了",newValue,oldValue)
        }) */

        watch(sum,(newValue,oldValue)=>{
            console.log("sum变化了",newValue,oldValue)
        },{immediate:true})//可加第三个参数为配置 但deep:true在vue3中有小问题

        return {
            sum,
            msg
        }
    } 
}
</script>

<style>

</style>

App.vue中引用注册并渲染这个Demo.vue

watch监视reactive定义的数据

watch函数

。与Vue2.x中watch配置功能一致。

两个小“坑":

。监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视(deep配置失效)。

。监视reactive定义的响应式数据中某个属性时: deep配置有效。

Demo.vue

<template>
  <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 { reactive, ref, watch } from 'vue'
export default {
    name:'Demo',
    setup() {
        let person = reactive({
            name:'张三',
            age:18,
            job:{
                j1:{
                    salary:20
                }
            }
        })
        
        //情况三:监视reactive所定义的一个响应式数据的全部属性，注意，此处无法正确的获取oldValue,这是vue3的小bug
        watch(person,(newValue,oldValue)=>{   //vue3中默认就开启了深度监视了，所以salary修改也能显示，且关不掉这个深度监视
            console.log('person发生变化了',newValue,oldValue);
        })
        
        //情况四：监视reactive所定义的一个响应式数据中的某个属性
        watch(()=>person.age,(newValue,oldValue)=>{   //vue3中默认就开启了深度监视了，所以salary修改也能显示，且关不掉这个深度监视
            console.log('person的age发生变化了',newValue,oldValue);
        })

        //情况五:监视reactive所定义的一个响应式数据中的某些属性
        watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{   //vue3中默认就开启了深度监视了，所以salary修改也能显示，且关不掉这个深度监视
            console.log('person的age或name发生变化了',newValue,oldValue);
        })

        //特殊情况  ()=>person.job 如果改job下的子属性，需要开启深度监视deep:true
        watch(()=>person.job,(newValue,oldValue)=>{   //vue3中默认就开启了深度监视了，所以salary修改也能显示，且关不掉这个深度监视
            console.log('person的job发生变化了',newValue,oldValue);
        },{deep:true})


        return {
            person
        }
    } 
}
</script>

<style>

</style>

App.vue中引用注册并渲染这个Demo.vue

watch时的value问题

ref()对基本类型，.value就是基本类型，但ref对对象类型，.value的是proxy代理对象。
所以watch为ref普通属性直接写，但watch为ref的对象时，修改person里面的属性，用person.value，还可在后面加上deep:true属性

watchEffect函数

watchEffect函数

. watch的套路是:既要指明监视的属性，也要指明监视的回调。

. watchEffect的套路是:不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

. watchEffect有点像computed:

。但computed注重的计算出来的值（回调函数的返回值)，所以必须要写返回值。

。而watchEffect更注重的是过程（回调函数的函数体)，所以不用写返回值。

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, watchEffect } from 'vue'
export default {
    name:'Demo',
    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>

<style>

</style>

App.vue中引用注册并渲染这个Demo.vue

Vue3生命周期钩子

vue2生命周期钩子前6个都一样，最后beforeDestroy和destroyed与vue3的beforeUnmount和unmounted不一样.vue2中即使没写el，也能执行beforeCreate和created这两步，但vue3得都有才能开始执行beforeCreate。vue3也能通过配置项的形式引用生命周期钩子，也可通过组合式api的形式去使用生命周期钩子

Vue3.0也提供了Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下:

。beforeCreate ===> setup()

。created =======> setup()

。beforeMount =======> onBeforeMount

。mounted =======> onMounted

。beforeUpdate ===> onBeforeUpdate

。updated =======> onUpdated

。beforeUnmount ==> onBeforeUnmount

。unmounted =====> onUnmounted

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:'Demo',
    setup() {
        let sum = ref(0)
        
        //通过组合式api的形式去使用生命周期钩子 优先级setup的高于配置项的
        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>

<style>

</style>

App.vue

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

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

自定义hook

.什么是hook?——本质是一个函数，把setup函数中使用的Composition APlI进行了封装。
·类似于vue2.x中的mixin。
·自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。

本来在Demo.vue中写的鼠标打点的方法，但可能其他组件也需要使用改鼠标打点的功能，要么将这段代码复制粘贴，或者我们可以在src下建一个hooks文件夹，创建userPoint.js文件，然后在这里写那些代码，然后返回出去，然后Demo.vue中再引入

usePoint.js

import {reactive,onMounted, onBeforeUnmount} from 'vue'

// function savePoint(){
export default function (){

    //实现鼠标打点的数据
    let point = reactive({
        x:0,
        y:0
    })

    //实现鼠标打点的方法
    function savePoint(event){
            point.x = event.pageX
            point.y = event.pageY
            console.log(event.pageX,event.pageY);
    }

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

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

    return point
}

// export default savePoint

Demo.vue

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

<script>
import usePoint from '../hooks/usePoint'
import { ref,reactive,onMounted, onBeforeUnmount} from 'vue'
export default {
    name:'Demo',
    setup() {
        let sum = ref(0)


        /* let point = reactive({
            x:0,
            y:0
        })

        function savePoint(event){
                point.x = event.pageX
                point.y = event.pageY
                console.log(event.pageX,event.pageY);
        }

        onMounted(()=>{
            window.addEventListener("click",savePoint)
        })

        onBeforeUnmount(()=>{
            window.removeEventListener("click",savePoint)
        }) */
        

        //然后复用
        let point = usePoint()

        return {
            sum,point
        }
    },
    
}
</script>

<style>

</style>

toRef与toRefs

toRef：将一个不是ref的变成ref

. 作用:创建一个ref对象，其value值指向另一个对象中的某个属性。

· 语法:const name = toRef(person , ' name ')

. 应用:要将响应式对象中的某个属性单独提供给外部使用时。

. 扩展: toRefs 与toRef功能一致，但可以批量创建多个ref对象，语法: toRefs(person)

Demo.vue

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

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

        /* const name1 = person.name
        console.log('%%%%%%',name1);
        const name2 = toRef(person,'name')  // 这里并不是又复制了一份，而是这里读取的指向的还是上面的let person里面的
        console.log('@@@@@',name2);  */

        const x = toRefs(person)  //将person中所有属性变成ref引用对象
        console.log(x);
        
        return {
            /* person,
            name:toRef(person,'name'),
            age:toRef(person,'age'),
            salary:toRef(person.job.j1,'salary'), */
            //name:ref(person.name)  //用ref的话，之后修改的就不是上面的person中的name了，而是新的ref，所以不能这么写

            ...toRefs(person)
        }
    } 
}
</script>

<style>

</style>

App.vue中引入即可

其他组合式API

不常用

shallowReactive与shallowRef

App.vue中导入注册渲染Demo.vue. shallowReactive:只处理对象最外层属性的响应式（浅响应式)。

. shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。

. 什么时候使用?

。如果有一个对象数据，结构比较深,但变化时只是外层属性变化===> shallowReactive。

。如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===>shallowRef。

Demo.vue

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

<script>
import {ref,reactive, toRef, toRefs,shallowReactive,shallowRef} from 'vue'
export default {
    name:'Demo',
    setup() {
        //let person = shallowReactive({   //浅层次的reactive，只有第一层可响应式，即下面的name和age有响应式，但salary没有响应式
        let person = reactive({
            name:'张三',
            age:18,
            job:{
                j1:{
                    salary:20
                }
            }
        })
        // let x = shallowRef({ //shallowRef和ref区别为，当值为对象时，shallowRef只能修改一层，如下x的y属性就没有响应式
        let x = ref({
            y:0
        })
        return {
            ...toRefs(person),
            x
        }
    } 
}
</script>

<style>

</style>

readOnly与shallowReadOny

readonly:让一个响应式数据变为只读的（深只读)。

shallowReadonly:让一个响应式数据变为只读的（浅只读）

应用场景:不希望数据被修改时。

Demo.vue

<template>
    <h4>当前求和为：{{sum}}</h4>
    <button @click="sum++">点我+1</button>
  <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 {ref,reactive, toRef, toRefs,shallowReactive,shallowRef, readonly, shallowReadonly} from 'vue'
export default {
    name:'Demo',
    setup() {
        let person = reactive({
            name:'张三',
            age:18,
            job:{
                j1:{
                    salary:20
                }
            }
        })
        let sum = ref(0)

        // person = readonly(person) //不让任何人修改这个数据，就可以用readonly，并且用person接收覆盖了原来的person
        person = shallowReadonly(person) //底有第一层年龄和姓名改不了，但薪资可改的

        // sum = readonly(sum)
        // sum = shallowReadonly(sum)


        return {
            ...toRefs(person),
            sum
        }
    } 
}
</script>

<style>

</style>

toRaw与markRaw

. toRaw:

。作用:将一个由reactive生成的响应式对象转为普通对象。

。使用场景:用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新.

. markRaw":

。作用:标记一个对象，使其永远不会再成为响应式对象。

。应用场景:

1.有些值不应被设置为响应式的，例如复杂的第三方类库等。

2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

Demo.vue

<template>
    <h4>当前求和为：{{sum}}</h4>
    <button @click="sum++">点我+1</button>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪水：{{job.j1.salary}}</h2>
  <h2>手机：{{person.phone}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">增长薪资</button>
  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addPhone">给人添加一个手机</button>
  <button @click="person.phone.brand+='!'">换手机品牌</button>
  <button @click="person.phone.color+='@'">换手机颜色</button>
</template>

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

        function showRawPerson(){
            const p  = toRaw(person)  // 将将一个由reactive生成的响应式对象转为普通对象。ref的行不通。
            console.log(person);
            console.log(p);
        }
 
        function addPhone(){
            /* let phone = {brand:"小米",color:"red"}
            person.phone = phone //追加的内容为响应式的 */

            let phone = {brand:"小米",color:"red"}
            person.phone = markRaw(phone) //使用markRaw标记后这个数据永远不做响应式了，修改时数据确实改了，但页面不变化
        }

        return {
            ...toRefs(person),
            sum,
            person,//把person也交出去，后期添加person属性可直接用person.的方式获取值
            showRawPerson,
            addPhone
        }
    } 
}
</script>

<style>

</style>

App.vue中引用Demo.vue

customRef自定义ref

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

通过一个防抖的案例：即输入框中输入内容，显示的h4标签过1秒再显示。

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()  // 2 通知vue追踪value的变化，(提前和get商量一下，让他认为这个value是有用的)
            return value
          },
          set(newValue){
            console.log(`有人把myRef这个容器中数据改为了${newValue}`);
            clearTimeout(timer)  //防抖
            //value = newValue
            // trigger()  // 1 通知vue去重新解析模板
            timer = setTimeout(() => {
            value = newValue
              trigger()  // 1 通知vue去重新解析模板
            }, delay);
          }
        }
      })
    }
    // let keyWord = ref("hello")// 使用vue提供的ref
    let keyWord = myRef("hello",500)// 使用vue提供的ref

    return {
      keyWord
    }
  },
}
</script>

provide与inject

。作用:实现祖与后代组件间通信

。套路:父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据

App.vue

<template>
  <div class="app">
    <h3>我是App组件（祖）</h3>
    <Child/>
  </div>
</template>

<script>
import { provide, reactive, toRefs } from 'vue'
import Child from "./components/Child.vue"
export default {
  name: 'App', 
  components:{
    Child
  },
  setup(){
    let phone = reactive({brand:"小米",color:"red"})
    provide('phone',phone)
    return {...toRefs(phone)}
  }
}
</script>
<style>
.app{
  background-color: grey;
  padding: 10px;
}
</style>

Child.vue

<template>
  <div class="child">
    <h3>我是Child组件（子）,{{phone.brand}}--{{phone.color}}</h3>
    <Sun/>
  </div>
</template>

<script>
import { inject } from 'vue'
import Sun from './Sun.vue'
export default {
  name: 'Child', 
  components:{
    Sun
  },
  setup(){
    let phone = inject('phone')
    return{phone}
  }
}
</script>
<style>
.child{
  background-color: skyblue;
  padding: 10px;
}
</style>

Sun.vue

<template>
  <div class="sun">
    <h3>我是Sun组件（孙）,{{phone.brand}}--{{phone.color}}</h3>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'Sun', 
  setup(){
    let phone = inject('phone')
    return{phone}
  }
}
</script>
<style>
.sun{
  background-color: orange;
  padding: 10px;
}
</style>

响应式数据的判断

响应式数据的判断API

isRef:检查一个值是否为一个ref 对象

isReactive:检查一个对象是否是由reactive创建的响应式代理

isReadonly:检查一个对象是否是由readonly 创建的只读代理

isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理

App.vue

<template>
    <h3>我是App组件（祖）</h3>
</template>

<script>
import { isProxy, isReactive, isReadonly, isRef, provide, reactive, readonly, ref, toRefs } from 'vue'
export default {
  name: 'App', 
  setup(){
    let phone = reactive({brand:"小米",color:"red"})
    let sum = ref(0)
    let phone2 = readonly(phone)

    console.log(isRef(sum));//true
    console.log(isReactive(phone));//true
    console.log(isReadonly(phone2));//true
    console.log(isProxy(phone));//true
    console.log(isProxy(phone2));//true readOnly处理后的也是proxy


    provide('phone',phone)
    return {...toRefs(phone)}
  }
}
</script>
<style>
</style>

组合式API的优势

Composition API组合式API，Options API配置式API

Options API存在的问题：使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。

2.Composition API的优势：我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。还可借助hook函数发挥组合式API的威力。

新的组件

Fragment与Teleport

1.Fragment

。在Vue2中:组件必须有一个根标签

。在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中。好处:减少标签层级,减小内存占用

2.Teleport。什么是Teleport?

Teleport是一种能够将我们的组件html结构移动到指定位置的技术。

案例：传统的方式写弹窗会将外几层的组件全都撑开。使用teleport指定to='html'或to='body'就可将这段代码的东西传送到html标签或body标签中，也可加遮罩层

App.vue

<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Child/>
  </div>
</template>

<script>
import Child from "./components/Child.vue"
export default {
  name: 'App', 
  components:{
    Child
  }
}
</script>
<style>
.app{
  background-color: grey;
  padding: 10px;
}
</style>

Child.vue

<template>
  <div class="child">
    <h3>我是Child组件</h3>
    <Sun/>
  </div>
</template>

<script>
import Sun from './Sun.vue'
export default {
  name: 'Child', 
  components:{
    Sun
  },
}
</script>
<style>
.child{
  background-color: skyblue;
  padding: 10px;
}
</style>

Son.vue

<template>
  <div class="sun">
    <h3>我是Sun组件</h3>
    <Dialog/>
  </div>
</template>

<script>
import Dialog from './Dialog.vue'
export default {
  name: 'Sun', 
  components:{Dialog}
}
</script>
<style>
.sun{
  background-color: orange; 
  padding: 10px;
}
</style>

Dialog.vue

<template>
  <div>
    <button @click="isShow = true">点我弹个窗</button>
<!--     <div v-if="isShow" class="dialog">
        <h3>我是一个弹窗</h3>
        <h4>一些内容</h4>
        <h4>一些内容</h4>
        <h4>一些内容</h4>
        <button @click="isShow = false">关闭弹窗</button>
    </div> -->
        <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>
.dialog{
    width: 300px;
    height: 300px;
    background-color: green;
    
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.mask{/* 遮罩层样式，点被其遮住的元素的点不了 */
    position: absolute;
    top: 0 ;bottom: 0;left: 0;right: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
</style>

Suspense组件

网速快的时候，静态引入和动态引入一样，但网速慢的时候，静态引入是App和Child组件一起出来（最后引入取决于组件套娃中最后出来的那个组件出来后才显示），动态引入是App和Child谁加载完谁出来。但动态引入当某个先出来展示，某个组件加载慢1秒中后才出来就会用户体验不好，页面有抖动，可以用Suspense将子标签Child标签包起来，然后再Child组件还未加载好的时候先用一个loading替换

App.vue

<template>
  <div class="app">
    <h3>我是App组件</h3>
    <!-- <Child/> -->
    <Suspense>
      <template v-slot:default>
        <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.vue'))  //动态引入  异步引入
export default {
  name: 'App', 
  components:{
    Child
  }
}
</script>
<style>
.app{
  background-color: grey;
  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(){ //因为App.vue中使用了Suspense，且引入Child组件时为异步引入，所以这里的setup可返回Promise对象
    let sum = ref(0)
    let p = new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve({sum})
        }, 3000);
    })
    return await p
  }
}
</script>
<style>
.child{
  background-color: skyblue;
  padding: 10px;
}
</style>

其他

全局API的转移

. Vue 2.x有许多全局API和配置。

。例如:注册全局组件、注册全局指令等。

//注册全局组件

Vue. component( ' MyButton ', {

data: () =>({

count: 0}),

template: '<button @click="count++">clicked {{ count }} times.</button>'

})

//注册全局指令

Vue.directive( 'focus ', {

inserted : el => el.focus()

}

. Vue3.0中对这些API做出了调整:

。将全局的API，即:Vue.xxx调整到应用实例(app ) 上

        2.x全局APl (vue ) => 3.x 实例APl( app)

        Vue.config.xxxX => app.config.xxXx

Vue.config.productionTip => 移除

        Vue.component => app.component

        Vue.directive => app.directive

Vue.mixin => app.mixin

        Vue.use => app.use

        Vue.prototype => app.config.globalProperties

2.其他改变

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

。过度类名的更改:

o Vue2.x写法

.v-enter,

.v-leave-to {

opacity: 0;

}

.v-leave,

.v-enter-to {

opacity: 1;

}

o Vue3.x写法

.v-enter-from，

.v-leave-to {

opacity: 0;

}

.v-leave-from,

.v-enter-to {

opacity: 1;

}

移除keyCode作为v-on 的修饰符，同时也不再支持config.keyCodes

移除v-on.native修饰符

移除了过滤器filter

. . . . . .

Vue3笔记——（尚硅谷张天禹Vue笔记)

Vue3

Vue3简介

使用vue-cli创建工程

使用vite创建工程

分析Vue3的工程结构

vue3的开发者工具

初识setup

ref函数处理基本数据类型

ref函数处理对象类型的数据

reactive函数

Vue2的响应式原理的回顾

Vue3的响应式原理Proxy

Vue3响应式原理Reflect

reactive和ref的对比

setup的两个注意点

Vue3computed计算属性

watch监视ref定义的数据

watch监视reactive定义的数据

watch时的value问题

watchEffect函数

Vue3生命周期钩子

自定义hook

toRef与toRefs

其他组合式API

shallowReactive与shallowRef

readOnly与shallowReadOny

toRaw与markRaw

customRef自定义ref

provide与inject

响应式数据的判断

组合式API的优势

新的组件

Fragment与Teleport

Suspense组件

其他

全局API的转移

相关文章