vue3.2+setup语法糖的基础

2020年09月18日，Vue 3.0 正式发布，代号 One Piece（海贼王），同时 Vue3 支持 Vue2 的大多数特 性，github上的tags地址：github.com/vuejs/vue-n…

Vue 3 在 2022 年 2 月 7 日成为新的默认版本，以前还能说是对新技术、新特性的观望，而现在面试都直问 vue3 源码了，所以vue3的学习势在必行了，以下是vue3的基础内容，掌握后，相信用vue3开发项目基本没有问题

Vue2的停止维护时间是2023年12月31日

前置介绍

在 vue3.2 中，我们只需在script标签中添加setup。就可以做到，组件只需引入不用注册，属性和方法也不用 return 就可以在 template 中使用，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得，最重要的一点，vue3中没有this了, 要用函数式编程的思想去写代码，(也就是各种hooks【钩子函数】)，所以想学习的话在 setup 语法糖下进行即可

创建一个基本的vue3项目

npm init vue@latest

点击查看其他方式创建的VUE3项目方式

使用工具

<script setup lang="ts"> + 
VSCode编辑器 + 
Vue - Official （提示vue3语法的，之前叫Volar） +
TypeScript Vue Plugin (Volar)
</script>

在vscode编辑器中安装 Vue - Official 插件后（Vue3），注意禁用 vetur插件（Vue2），否则2个插件会有冲突

ref 和 reactive

• ref: 用来给基本数据类型绑定响应式数据，访问时需要通过 .value 的形式， tamplate 会自动解析,不需要 .value
• reactive: 用来给 复杂数据类型 绑定响应式数据，直接访问即可

ref内部其实也是调用 reactive 来实现的

<template>
  <div>
    <p>{{title}}</p>
    <h4>{{userInfo}}</h4>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
type Person = {
    name: string;
    age: number;
    gender?: string;
};
const title = ref<string>("兄弟，我是字符串");
const userInfo = reactive<Person>({
  name: '我是name',
  age: 18
})
</script>

toRef、toRefs、toRaw、unref、markRow、shallowReactive、shallowRef、customRef

toRef(将响应式对象中的某个属性单独提供给外部使用,近似于解构)

ref是不会去更改原数据的，ref本质是拷贝原数据，而toRef会修改原数据

toRef 如果原始对象是非响应式的,数据会变,但不会更新视图

<template>
  <div>
     <button @click="puobj">测试ref包裹普通对象的效果</el-button>
     <div>年龄：{{ puObjDate }}</div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRef } from 'vue'

const obj_putpng = {
    name: '我是原始值name',
    age: 18,
}

const puObjDate = toRef(obj_putpng, 'age')

const puobj = () => {
    puObjDate.value++
    console.log('obj_putpng:', obj_putpng, 'puObjDate:', puObjDate)
}
</script>

可以看到，点击按钮，当原始对象是非响应式时，使用toRef 的数据改变，但是试图并没有更新

<template>
  <div>
    <button @click="change">按钮</button>
    {{state}}
  </div>
</template>

<script setup lang="ts">
import { reactive, toRef } from 'vue'

const obj = reactive({
  name: '我是原始值name',
  age: 18
})

const state = toRef(obj, 'age')

const change = () => {
  state.value++
  console.log('obj:', obj, 'state:', state);
}
</script>

当我们把 obj 用 reactive 包裹，再使用 toRef，点击按钮时，可以看到视图和数据都变了

toRef返回的值是否具有响应性取决于被解构的对象本身是否具有响应性

• 响应式数据经过toRef返回的值仍具有响应性，非响应式数据经过toRef返回的值仍没有响应性。

toRefs(批量创建多个 ref 对象)

toRefs相当于对对象内每个属性调用toRef，toRefs返回的对象内的属性使用时需要加.value,主要是方便我们解构使用

<template>
  <div>
    <button @click="change">按钮</button>
    name--{{name}}---age{{age}}
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'

const obj = reactive({
  name: '我是name',
  age: 18
})

let { name, age } = toRefs(obj)

const change = () => {
  age.value++
  name.value = '我是修改后的name'
  console.log('obj:', obj);
  console.log('name:', name);
  console.log('age:', age);
}
</script>

简单理解就是批量版的toRef,(其源码实现也正是通过对象循环调用了toRef)

toRef 和 toRefs的相同和不同

toRef 和 toRefs 都是复制

• 它们复制的其实就是引用 + 响应式 ref

toRef和 加toRefs的区别：

• toRef: 复制 reactive 里的单个属性并转成 ref
• toRefs: 复制 reactive 里的所有属性并转成 ref

toRaw

ref/reactive数据类型的特点:
每次修改都会被追踪,都会更新UI界面,但是这样其实是非常消耗性能的
所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候,
我们就可以通过toRaw方法拿到它的原始数据,对原始数据进行修改
这样就不会被追踪,这样就不会更新UI界面,这样性能就有提高了

toRaw将响应式对象修改为普通对象
作用：将一个由reactive生成的响应式对象转为普通对象 (也就是拿到响应式对象的原始值)
使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新

• toRaw包裹reactive类型的响应式对象

<template>
  <div>
    <button @click="change">按钮</button>
    <div>原始obj：{{ obj.age }} {{ obj.name }}</div>
    <div>reactive包裹后的obj: {{ state.age }} {{ state.name }}</div>
    <div>toRow包裹后的reactive: {{ data.age }} {{ data.name }}</div>
</div>
</template>

<script setup lang="ts">
import { reactive, toRaw } from 'vue'

const obj = {
    name: '我是初始值name',
    age: 18,
}
const state = reactive(obj)
// state和obj的关系:
// 是引用关系, state的本质是一个Proxy对象,在这个Proxy对象中引用了obj 所以 
// 如果修改了obj的name的值 state里面的值也改变了

const data = toRaw(state)
// console.log(obj === data) // true
// console.log(obj === state) // false

const change = () => {
	data.name = '我是改变后的name值'
	data.age = 19
	console.log('obj :', obj, 'state :', state, 'data:', data)
}
</script>

结论：toRaw包裹的reactive数据，修改toRaw包裹后形成的新数据的值，所有关联的数据都会改变，但是视图的数据并不会更新，同时toRaw包裹后形成的新数据不是响应式数据，只是一个基本的原始数据

但是在此期间，如果页面中，有任何的一个响应式数据进行了修改，那么页面所有数据都会刷新，从而获取最新的数据显示在页面中

• toRaw包裹ref类型的响应式对象，没有效果(toRaw对ref类型的响应式数据无效)

<template>
  <div>
    <button @click="change">按钮</button>
    {{data}} // 我是字符串
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw } from 'vue'

const refStr = ref('我是字符串')
const data = toRaw(refStr) // 包裹ref类型的响应式数据

const change = () => {
  data.value = '我是字符串改变了222'
  console.log(data.value) // 我是字符串改变了222
}
// 按钮点击后 refStr、data数据都变成了【我是字符串改变了222】，但是页面显示的数据依然是【我是字符串】
</script>

结论：toRaw包裹的ref类型的响应式数据，修改toRaw包裹后形成的新数据的值，所有关联的数据都会改变，但是视图的数据并不会更新，同时toRaw包裹后形成的新数据不是响应式数据，只是一个基本的原始数据

unref

unref类似于toRef，unref的本质就是解包，把{value: Proxy || 基本数据}解成{Proxy || 基本数据}，unref对toRefs创造的对象的各个属性也起作用，因为各个属性也是ref对象

由于Vue3的开发原则是尽量不要直接修改内部值，对ref来讲就是尽量不要修改Proxy，如果某些场景下非要直接修改Proxy，需要用unref临时将ref还原为Proxy，与toRef一样，修改完Proxy之后并不需要重新执行ref

下例中，点击button1和button2，两个按钮都会有反应:

<template>
    <div>
      <button @click="r.b.c++">count is: {{ r.b.c }}</button>
      <button @click="s.b.c++">count is: {{ s.b.c }}</button>
    </div>
</template>
    
<script setup>
    import { ref, unref } from "vue";

    // let r = ref({a: 1, b: {c: 2}});
    let r = reavtive(
       {
           a: 1, 
           b: {
               c: 2
           }
       }
    );
    let s = unref(r);

</script>

非响应式数据，通过unref包裹，值可以修改，但是页面的数据不会改变

<template>
    <button  @click="edit">点击修改status数据</button>
    <div>{{ unrefStr.age }}</div>
</template>
<script lang="ts" setup>
    // 情况一： unref包裹是reactive响应式数据，数据改变页面可以看到改变后的数据
    let aaa = reactive({ age: 18 })
    let unrefStr = unref(aaa) 
    
    // unref包裹是ref响应式数据,则返回内部值，否则返回参数本身
    // 是 `val = isRef(val) ? val.value : val` 的语法糖函数
    const refStr = ref('我是字符串')
    const unRefStr = unref(refStr)
    console.log('unRefStr', unRefStr) // 我是字符串
    
    // 情况二： unref包裹是普通数据，数据改变，但是页面看不到改变后的数据
    let aaa = { age: 18 }
    let unrefStr = unref(aaa) 

    const edit = () => {
        console.log('被点击了')
        unrefStr.age = 24
        console.log(unrefStr)
    }
</script>

toRaw与unref的区别

用这三行代码就很容易说明了

const obj = { count: 3 };
const state = ref(obj);
console.log(toRaw(state.value) === toRaw(unref(state))); // true

说明：

1. 当变量state为ref对象时，state.value === unref(state)为真，两边都是Proxy对象，也说明，想得到ref的Proxy，有2种方式：.value或者unref，完全等价

2. 当变量state为ref对象时，toRaw(state.value) === toRaw(unref(state))两边都是原始值
   (1) 想获得ref对象的原始值且原始值为引用类型时，有2种方式，toRaw(state.value)或者toRaw(unref(state))

   (2) 想获得ref对象的原始值且原始值为基本类型，也有2种方式，state.value或者unref(state)

   (3) 所以，toRaw并不是对ref没用，ref想得到原始对象就得用toRaw

3. toRaw对ref对象无效，必须作用于ref.value

markRow

作用：标记一个对象，使其永远不会再成为响应式对象
应用场景：
1.有些值不应被设置为响应式的，例如复杂的第三方类库等
2.当渲染具有不可变数据源的大列表时，跳过响应式数据可以提高性能
3.在动态渲染组件的时候我们就可以使用 markRaw 包裹

markRaw 的使用场景

很多时候，我们会遇见这样的场景
有一个响应式对象person
这个响应式对象有很多的属性
但是呢？个别属性是不需要响应式的。比如爱好

<template>
    <div>
        <p> 姓名： {{person.name}}</p> 
        <p> 性别： {{person.sex}}</p> 
        <p> 爱好： {{person.likes}}</p> 
        <el-button @click="change">按钮</el-button>
    </div>
</template>

<script lang="ts" setup>
import { reactive,markRaw } from 'vue'
let person:any = reactive({
    name: "小明",
    sex:'男',
});
 var likes = ['吃饭','睡觉'];
// 往响应式对象中新增一个likes属性，该属性是响应式
// 但是我们使用markRaw包裹后这个likes属性值是不具有响应式的
    person.likes = markRaw(likes);
// 因此试图是不会更新的
const change = () => {
    person.likes[0]= '我要吃饭';
    person.likes[1]= '我要睡觉';
    console.log(person);
};
</script>

<template>
    <button  @click="edit">点击修改status数据</button>
    <div>{{ user.name }}{{ user.age }}</div>
</template>
<script lang="ts" setup>
   import { reactive,markRaw } from 'vue'
   
   const status= {name:'我是初始值name',age:18};
   const statusMarkRaw = markRaw(status)
   const user = reactive(statusMarkRaw)
   const edit = () => {
         user.name= '我是改变后的name值'
         user.age=19
         console.log(user)
    }
   // 上述代码中，status被markRaw标记后，当后面将statusMarkRaw变成proxy对象时，
   // 发现调用edit方法改变user数据时，界面的user数据并不会再更新了
</script>

上述代码中，status被markRaw标记后，当后面将statusMarkRaw通过reactive去包裹后，变成proxy对象时，发现调用edit方法改变user数据时，界面的user数据并不会再更新了

结论:只要用markRaw包裹的对象,那么这个对象就不是响应式对象,则页面数据就不会发生更改

但是稍微调整一下代码：

<template>
    <div>
        <p> 姓名： {{person.name}}</p> 
        <p> 性别： {{person.sex}}</p> 
        <p> 爱好： {{person.likes}}</p> 
        <el-button @click="canChange">按钮</el-button>
        <!-- <el-button @click="onchange">按钮</el-button> -->

    </div>
</template>

<script lang="ts" setup>
import { reactive,markRaw } from 'vue'
let person:any = reactive({
    name: "小明",
    sex:'男',
    likes:['吃饭','睡觉'], // 关键点在这里，一开始就初始化好了
});
 
let likes = ['吃饭','睡觉']; // 关键点在这里，又定义了一个普通对象
person.likes = markRaw(likes); // 关键点在这里，普通对象用markRaw包裹了
let canChange = () => {
    person.name='name发生改变了'
    person.likes[0]= '我要吃饭';
    person.likes[1]= '我要睡觉';
    console.log(person.likes);
};
</script>

你会发现，页面的likes数据，再次发生了改变，好像markRaw没有生效，有谁知道为什么吗？

结论: 目前已经没有这个问题了，应该是vue团队，已经修复了

shallowReactive与shallowRef

shallowReactive:

        只处理最外层属性的响应式（浅响应式）

shallowRef：

        只处理基本数据类型的响应式，不进行对象的响应式处理

什么时候使用：

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

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

customRef

作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制
实现防抖效果：

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

<script lang="ts" setup>
import {ref,customRef} from 'vue'
    //let keyword = ref('hello')//使用vue准备好的内置ref
    
    //自定义一个myRef
    function myRef(value,delay){
        let timer
        //通过customRef去实现自定义
        return customRef((track, trigger) => {
            return {
              get() {
                track()    //告诉vue这个value值是需要被“追踪”的
                return value
              },
              set(newValue) {
                clearTimeout(timer)
                timer = setTimeout(() => {
                  value = newValue
                  trigger()    //告诉vue去更新界面
                }, delay)
              }
            }
      })
    }

    // let keyWord = ref("hello") //使用vue提供的ref
    let keyWord = myRef("hello") //使用程序员自定义的ref

</script>

computed

<template>
  <div>
    <p>{{title}}</p>
    <h4>{{userInfo}}</h4>
    <h1>{{add}}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive,computed } from "vue";
const count = ref(0)

// 推导得到的类型：ComputedRef<number>
const add = computed(() => count.value +1)

</script>

watch

vue3 watch 的作用和 Vue2 中的 watch 作用是一样的，他们都是用来监听响应式状态发生变化的，当响应式状态发生变化时，就会触发一个回调函数。

watch(data,()=>{},{})

• 参数一，监听的数据
• 参数二，数据改变时触发的回调函数（newVal,oldVal）
• 参数三，options配置项，为一个对象
• 1、监听ref定义的一个响应式数据

<script setup lang="ts">
import { ref, watch } from "vue";

const str = ref('我是字符串')

//3s后改变str的值
setTimeout(() => { str.value = '我是更改后的字符串了' }, 3000)

watch(str, (newV, oldV) => {
  console.log(newV, oldV) //我是字符串 / 我是更改后的字符串了
})

</script>

• 2、监听多个ref

这时候写法变为数组的形式

<script setup lang="ts">
import { ref, watch } from "vue";

let name = ref('我是字符串')
let age = ref(18)

//3s后改变值
setTimeout(() => {
  name.value = '我是更改后的字符串'
  age.value = 19
}, 3000)

watch([name, age], (newV, oldV) => {
  console.log(newV, oldV) // ['我是更改后的字符串', 19]  ['我是字符串', 18]
})

</script>

• 3、监听Reactive定义的响应式对象

<script setup lang="ts">
import { reactive, watch } from "vue";

let info = reactive({
  name: '我是字符串',
  age: 18
})

//3s后改变值
setTimeout(() => {
  info.age = 19
}, 3000)

watch(info, (newV, oldV) => {
  console.log(newV, oldV)  // {name: 我是字符串, age: 19} / {name: 我是字符串, age: 18}
})

</script>

当 watch 监听的是一个响应式对象时，会隐式地创建一个深层侦听器，即该响应式对象里面的任何属性发生变化，都会触发监听函数中的回调函数。即当 watch 监听的是一个响应式对象时，默认开启 deep：true

• 4、监听reactive 定义响应式对象的单一属性

错误写法：

<script setup lang="ts">
import { reactive, watch } from "vue";

let info = reactive({
  name: '我是字符串',
  age: 18
})

//3s后改变值
setTimeout(() => {
  info.age = 19
}, 3000)


watch(info.age, (newV, oldV) => {
  console.log(newV, oldV) 
})

</script>

可以看到控制台出现警告

[Vue warn]: Invalid watch source:  18 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 
  at <Index> 
  at <App>

如果我们非要监听响应式对象中的某个属性，我们可以使用 getter 函数的形式,即将watch第一个参数修改成一个回调函数的形式

正确写法：

// 其他不变
watch(()=>info.age, (newV, oldV) => {
  console.log(newV, oldV) // 19 18
})

• 5、监听reactive定义的 引用数据

<script setup lang="ts">
import { reactive, watch } from "vue";

let info = reactive({
  name: '我是字符串',
  age: 18,
  obj: {
    str: '我是对象obj里面的str属性对应的值'
  }
})

//3s后改变s值
setTimeout(() => {
  info.obj.str = 'to be or not to be'
}, 3000)

// 需要自己开启 deep:true深度监听,不然不发触发 watch 的回调函数
watch(
    // 第一个参数，确定要监听哪个属性
    () => info.obj, 
    // 第二个参数，回调函数
    (newV, oldV) => {
      console.log(newV, oldV)
    }, 
    // 第三个参数，配置项
    {
      deep: true, // 深度监听
      //immediate:true, // 初始化之前就监听
    }
)

</script>

WatchEffect

会立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。（有点像计算属性）

如果用到 a 就只会监听 a, 就是用到几个监听几个 而且是非惰性,会默认调用一次

<script setup lang="ts">
import { ref, watchEffect } from "vue";

let num = ref(0)

//3s后改变值
setTimeout(() => {
  num.value++
}, 3000)

watchEffect(() => {
  console.log('num 值改变：', num.value)
})

</script>

可以在控制台上看到，第一次进入页面时，打印出num 值改变：0,三秒后，再次打印num 值改变：1

• 停止监听

当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。

但是我们采用异步的方式创建了一个监听器，这个时候监听器没有与当前组件绑定，所以即使组件销毁了，监听器依然存在。

这个时候我们可以显式调用停止监听

<script setup lang="ts">
import { watchEffect } from 'vue'
// 它会自动停止
watchEffect(() => {})
// ...这个则不会！
setTimeout(() => {
  watchEffect(() => {})
}, 100)

const stop = watchEffect(() => {
  /* ... */
})

// 显式调用
stop()
</script>

• 清除副作用（onInvalidate）

watchEffect 的第一个参数—【effect函数】—可以接收一个参数：叫onInvalidate，也是一个函数，用于清除 effect 产生的副作用

就是在触发监听之前会调用一个函数可以处理你的逻辑，例如防抖

import { ref, watchEffect } from "vue";

let num = ref(0)

//3s后改变值
setTimeout(() => {
  num.value++
}, 3000)

watchEffect((onInvalidate) => {
  console.log(num.value)
  // 触发监听之前会调用一个函数可以处理你的逻辑
  onInvalidate(() => {
    console.log('执行');
  });
})

控制台依次输出：0 => 执行 => 1

• 配置选项

watchEffect的第二个参数，用来定义副作用刷新时机，可以作为一个调试器来使用

如果要操作“更新之后的DOM ”，就要配置 flush: 'post'

flush 取值（更新时机）：

• 1、pre 组件更新前执行（默认）
• 2、post 组件更新后执行 （这样你就可以访问更新的 DOM。这也将推迟副作用的初始运行，直到组件的首次渲染完成，和vue2中的this.$nextTick(()=>{})效果一致）
• 3、sync 强制效果始终同步触发（与watch一样使其为每个更改都强制触发侦听器，然而，这是低效的，应该很少需要）

<script setup lang="ts">
import { ref, watchEffect } from "vue";

let num = ref(0)

//3s后改变值
setTimeout(() => {
  num.value++
}, 3000)

watchEffect(
    // 第一个参数，回掉函数，同时初始化的时候一定会执行一次（收集要监听的数据，不然不知道要监听的是什么）
    (onInvalidate) => {
      console.log(num.value)
      onInvalidate(() => {
        console.log('执行');
      });
    },
    // 第二个参数，配置项
    {
      flush: "post", //此时这个函数会在组件更新之后去执行
      onTrigger(e) { //作为一个调试工具，可在开发中方便调试
        console.log('触发', e);
      },
    }
)
</script>

• 配置选项中的侦听器调试

onTrack 和 onTrigger 选项可用于调试侦听器的行为

• onTrack 将在响应式 property 或 ref 作为依赖项被追踪时被调用
• onTrigger 将在依赖项变更导致副作用被触发时被调用
  这两个回调都将接收到一个包含有关所依赖项信息的调试器事件
  建议在以下回调中编写 debugger 语句来检查依赖关系：

watchEffect(
  () => {
    /* 副作用 */
  },
  {
    onTrigger(e) {
      debugger
    }
  }
)

onTrack 和 onTrigger 只能在开发模式下工作

• 有一个问题，默认情况下，Vue会先执行组件DOM update，还是先执行watchEffect监听器？

答案就是：默认先执行watchEffect监听器，然后更新DOM

相关推荐：Vue3中 watch、watchEffect 详解

响应式数据的判断

isRef：

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

isReactive：

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

isReadonly：

        检查一个对象是否是由readonly创建的只读对象

isProxy：

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

生命周期

和 vue2 相比的话，基本上就是将 Vue2 中的beforeDestroy名称变更成beforeUnmount; destroyed 表更为 unmounted；然后用setup代替了两个钩子函数 beforeCreate 和 created；新增了两个开发环境用于调试的钩子

父子组件传参

defineProps + withDefaults（设置props的默认值的）

props的数据是禁止修改的（在子组件接收到后是禁止修改的），如果修改的话，页面数据是不会改变的，同时浏览器的控制台会报警告，但是不会阻止页面逻辑的执行

父组件传参

<template>
  <Children :msg="msg" :list="list"></Children>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import Children from './Children.vue'

const msg = ref('hello 啊，我是字符串')
const list = reactive<number[]>([1, 2, 3])
</script>

在 script setup 中，引入的组件会自动注册，所以可以直接使用，无需再通过components进行注册

子组件接收值

defineProps 来接收父组件传递的值， defineProps是无须引入的直接使用即可

<template>
  <div>
    <p>msg：{{msg}}</p>
    <p>list：{{list}}</p>
  </div>
</template>

<script setup lang="ts">

// 没有和ts关联的写法
const props =  defineProps<{
  msg: string,
  list: number[]
}>()

// 没有和ts关联的写法
const props = defineProps({ 
    list: { 
        type: Array,
        required: true,
        default: () => [], 
    }, 
})

</script>

使用 withDefaults 定义默认值

<template>
  <div>
    <p>msg：{{msg}}</p>
    <p>list：{{list}}</p>
  </div>
</template>

<script setup lang="ts">
    // 为父组件传递过来的数据，定义的数据类型
    type Props = {
      msg?: string, // msg的类型是字符串，同时不是必传项
      list?: number[] // list的类型是number类型的数组，同时不是必传项
    }

    // withDefaults 的第二个参数便是默认参数设置，会被编译为运行时 props 的 default 选项
    // 和ts关联起来的写法
    const props =  withDefaults(defineProps<Props>(), {
      msg: '我是字符串', // msg的默认值
      list: () => [4, 5, 6] // list的默认值
    })
</script>

子组件向父组件抛出事件

defineEmits

子组件派发事件

<template>
  <div>
    <p>msg：{{msg}}</p>
    <p>list：{{list}}</p>
    <button @click="onChangeMsg">改变msg</button>
  </div>
</template>

<script setup lang="ts">
type Props = {
  msg?: string,
  list?: number[]
}

withDefaults(defineProps<Props>(), {
  msg: '我是字符串',
  list: () => [4, 5, 6]
})

const emits = defineEmits(['changeMsg'])
const onChangeMsg = () => {
emits('changeMsg','我是改变后的字符串')
}
</script>

子组件绑定了一个click 事件 然后通过defineEmits 注册了一个自定义事件,点击按钮的时候，触发 emit 调用我们注册的事件，传递参数

父组件接收

<template>
  <Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import Children from './Children.vue'

const msg = ref('hello 啊，我是字符串')
const list = reactive<number[]>([1, 2, 3])

const changeMsg = (v: string) => {
  msg.value = v
}
</script>

defineExpose 获取子组件的实例和内部属性

在 script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。

如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。

子组件

<template>
  <p>{{name}}</p>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const name = ref('我是字符串')
const changeName = () => {
  name.value = '我是改变后的字符串'
}
// 将方法、变量暴露给父组件使用，父组件才可通过 ref API拿到子组件暴露的数据
defineExpose({
  name,
  changeName
})
</script>

父组件

<template>
  <div>
    <child ref='childRef' />
    <button @click="getName">获取子组件中的数据</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import child from './Child.vue'

// 引入的子组件ref的写法（TypeScript语法）
const childRef = ref<InstanceType<typeof child>>() // 获取子组件
// 上面的ref中不要写成 ref(null),因为在ts下会报警告，提示'childRef.value' 可能为'null'

const getName = () => {
  // 获取子组件name
  console.log(childRef.value!.name)
  // 执行子组件方法
  childRef.value?.changeName()
  // 获取修改后的name
  console.log(childRef.value!.name)
}
</script>

注意：defineProps 、defineEmits 、 defineExpose 和 withDefaults 这四个宏函数只能在 <script setup> 中使用。他们不需要导入，会随着<script setup>的处理过程中一起被编译。

插槽

在 Vue2 的中一般中具名插槽和作用域插槽分别使用slot和slot-scope来实现，如：

父组件

<template>
  <div>
    <p style="color:red">父组件</p>
    <Child ref='childRef'>
      <template slot="content" slot-scope="{ msg }">
        <div>{{ msg }}</div>
      </template>
    </Child>
  </div>
</template>

<script lang="ts" setup>
import Child from './Child.vue'
</script>

子组件

<template>
  <div>child</div>
  <slot name="content" msg="hello 啊，我是字符串!"></slot>
</template>

在 Vue3 中将slot和slot-scope进行了合并统一使用，使用 v-slot， v-slot:slotName 简写 #slotName

父组件

<template>
  <div>
    <p style="color:red">父组件</p>
    <Child>
      <template  v-slot:content="{ msg }">
        <div>{{ msg }}</div>
      </template>
    </Child>
  </div>
</template>

<script lang="ts" setup>
import Child from './Child.vue'
</script>

<!-- 简写 -->
<Child>
  <template #content="{ msg }">
    <div>{{ msg }}</div>
      </template>
</Child>

实际上,v-slot 在 Vue2.6+ 的版本就可以使用。

异步组件

通过 defineAsyncComponent 异步加载

<template>
  <Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children>
</template>

<script setup lang="ts">
import { ref, reactive,defineAsyncComponent } from 'vue'
// import Children from './Children.vue'
const Children = defineAsyncComponent(() => import('./Children.vue'))
</script>

Suspense

Suspense 允许应用程序在等待异步组件时渲染一些其它内容,在 Vue2 中，必须使用条件判断(例如 v-if、 v-else等)来检查数据是否已加载并显示一些其它内容；但是，在 Vue3 新增了 Suspense 了，就不必跟踪何时加载数据并呈现相应的内容。

他是一个带插槽的组件，只是它的插槽指定了default 和 fallback 两种状态。

Suspense 使用：

• 1、使用 <Suspense></Suspense> 包裹所有异步组件相关代码
• 2、<template v-slot:default></template> 插槽包裹异步组件
• 3、<template v-slot:fallback></template> 插槽包裹渲染异步组件渲染之前的内容

<template>
  <Suspense>
    <template #default>
      <!-- 异步组件-默认渲染的页面 -->
      <Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children>
    </template>
    <template #fallback>
      <!-- 页面还没加载出来展示的页面 -->
      <div>loading...</div>
    </template>
  </Suspense>
</template>

<script setup lang="ts">
import { ref, reactive, defineAsyncComponent } from 'vue'
const Children = defineAsyncComponent(() => import('./Children.vue'))
</script>

Teleport传送组件

Vue3 中新增的 Teleport 内置组件，先来看下官方文档是怎么解释的：

是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM

Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术

主要解决的问题：将Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响，例如：elementui-plus中的模态框）

通俗解释： teleport 是一个内置组件，我们都知道 HTML 是由层级关系的，Vue3 中的组件也是有层级关系的。 假如在父组件中引用了一个子组件，那么渲染成页面后这个子组件 HTML 也是必然被父组件 HTML 包含的。 但是如果把子组件放置到了 teleport 组件中，那么我们就可以指定该子组件渲染到父组件之外的其它 DOM 节点下，比如 body 或者其它的 DOM 等等。这就有点类似与“传送”了。

语法代码如下：

其中 to 就是“传送”的目的地了，即需要把包裹的内容传送到何处去

<Teleport to="body">
</Teleport>

to 允许接收值：
期望接收一个 CSS 选择器字符串或者一个真实的 DOM 节点。
提示：
<Teleport> 挂载时，传送的 to 目标必须已经存在于 DOM 中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。
如果目标元素也是由 Vue 渲染的，你需要确保在挂载 <Teleport>

< Teleport > 只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系

也就是说，如果 < Teleport > 包含了一个组件，那么该组件始终和这个使用了 < teleport > 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。 这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方

禁用Teleport的传送功能

在某些场景下可能需要视情况禁用 < Teleport >，我们可以通过对 < Teleport > 动态地传入一个 disabled prop 来处理这两种不同情况（ disabled 属性接收一个 Boolean 值，true 代表不允许传送，false 代表传送）

 <template>
  <div class="app">
    app组件
    // 关键点在这里:disabled="true"
    <Teleport to="body" :disabled="true">
      <p>我是被 teleport 包裹的元素</p>
      <p>{{ message }}</p>
    </Teleport>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup(){
    const message = ref('我是在 App 组件内部');
    return {
      message,
    }
  } 
}
</script>

多个元素传送给一个节点

多个 < Teleport > 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上

<!-- index.html -->
<body>
  <div id="app"></div>
  <div id="customDom"></div>
</body>

<template>
  app组件
  <Teleport to="#customDom">
    <p>我是被 teleport 包裹的一号元素</p>
  </Teleport>
  <Teleport to="#customDom">
    <p>我是被 teleport 包裹的二号元素</p>
  </Teleport>
</template>

结果如下：

如何使用：

<template>
  <!-- 插入至 body -->
  <Teleport to="body">
    <Children></Children>
  </Teleport>
  <!-- 默认 #app 下 -->
  <Children></Children>
</template>
<script lang="ts" setup>
import Children from './Children.vue'
</script>

keep-alive 缓存组件

• 作用和vue2一致，只是生命周期名称有所更改
• 初次进入时： onMounted ==> onActivated
• 退出时触发： onDeactivated
• 再次进入：只会触发 onActivated

事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中

provide/inject

provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

父组件

<template>
  <Children></Children>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'
import Children from "./Children.vue"

const msg = ref('hello 啊，我是字符串')

provide('msg', msg)
</script>

子组件

<template>
  <div>
    <p>msg：{{msg}}</p>
    <button @click="onChangeMsg">改变msg</button>
  </div>
</template>

<script setup lang="ts">
import { inject, Ref, ref } from 'vue'

const msg = inject<Ref<string>>('msg',ref('hello啊！'))
const onChangeMsg = () => {
  msg.value = '我是改变后的字符串'
}
</script>

如果你想要传入的值能响应式的改变，需要通过ref 或 reactive 添加响应式

v-model 升级

v-model 在vue3可以说是破坏式更新，改动还是不少的

我们都知道，v-model 是props 和 emit 组合而成的语法糖,vue3中 v-model 有以下改动

• 变更：value => modelValue
• 变更：update:input => update:modelValue
• 新增：一个组件可以设置多个 v-model
• 新增：开发者可以自定义 v-model修饰符
• v-bind 的 .sync 修饰符和组件的 model 选项已移除

子组件

<template>
  <div>
    <p>{{msg}}，{{modelValue}}</p>
    <button @click="onChangeMsg">改变msg</button>
  </div>
</template>

<script setup lang="ts">

type Props = {
  modelValue: string,
  msg: string
}
defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'update:msg'])

const onChangeMsg = () => {
  // 触发父组件的值更新
  emit('update:modelValue', '我是更新后的字符串name')
  emit('update:msg', '我是更新后的字符串msg')
}
</script>

父组件

<template>
  // v-model:modelValue简写为v-model
  // 绑定多个v-model
  <Children v-model="name" v-model:msg="msg"></Children>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Children from "./Children.vue"

const msg = ref('hello啊，我是字符串msg')
const name = ref('我是字符串name')
</script>

自定义指令

1、自定义指令的生命周期

• created 元素初始化的时候
• beforeMount 指令绑定到元素后调用 只调用一次
• mounted 元素插入父级dom调用
• beforeUpdate 元素被更新之前调用
• update 这个周期方法被移除 改用updated
• beforeUnmount 在元素被移除前调用
• unmounted 指令被移除后调用 只调用一次

2、实现一个局部自定义拖拽指令(vue3.2的版本)

<template>
  <!-- 使用自定义指令的时候 直接 v-move 就可以 -->  
  <div v-move class="box">
    <div class="header"></div>
    <div>
      内容
    </div>
  </div>
</template>
 
<script setup lang='ts'>
import { Directive } from "vue";

// 定义一个局部自定义指令，只在当前的vue页面有效
// 局部自定义指令的命名必须以`v`开头
const vMove: Directive = {
  mounted(el: HTMLElement) {
    let moveEl = el.firstElementChild as HTMLElement;
    const mouseDown = (e: MouseEvent) => {
      //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
      console.log(e.clientX, e.clientY, "起始位置", el.offsetLeft);
      let X = e.clientX - el.offsetLeft;
      let Y = e.clientY - el.offsetTop;
      const move = (e: MouseEvent) => {
        el.style.left = e.clientX - X + "px";
        el.style.top = e.clientY - Y + "px";
        console.log(e.clientX, e.clientY, "位置改变");
      };
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", move);
      });
    };
    moveEl.addEventListener("mousedown", mouseDown);
  },
};
</script>
 
<style >
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

.header {
  height: 20px;
  background: black;
  cursor: move;
}
</style>

3、实现一个全局自定义指令，实现input框自动获取焦点(vue3.2的版本)

• 在src目录下新建一个directive文件，在此文件夹下新建一个index.js文件夹，接着输入如下内容

const directives =  (app) => {
  //这里是给元素取得名字，虽然是focus，但是实际引用的时候必须以v开头
  app.directive('focus',{
    //这里的el就是获取的元素
    mounted(el) {
      el.focus() 
     }
  })
}

//默认导出 directives
export default directives

• 在全局注册directive

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import directives from './directives' // 这里

const app = createApp(App)
directives(app)  // 这里

app.use(store).use(router).mount('#app')

• 在你需要的页面进行自定义指令的使用

<template>
  <div class="container">
    <div class="content">
      <!-- 使用 v-focus 自定义指令 -->
      <input type="text"  v-focus>
      内容
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
// const vMove:Directive = () =>{

// }
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    border-top: 5px solid black;
    width: 200px;
    height: 200px;
    cursor: pointer;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
}
</style>

如上操作一下，一个全局的自定义指令就实现了

<template>
  <div>
    <p v-uppercase>Hello, Vue 3 Custom Directive!</p>
  </div>
</template>

<script>
import { createApp } from 'vue';

const app = createApp({});

app.directive('uppercase', (el, binding) => {
  el.textContent = binding.value.toUpperCase();
});

export default app;
</script>

上述代码可以实现创建一个全局自定义指令 v-uppercase，它会将元素内的文本转换为大写

自定义 hooks

我们都知道在 vue 中有个东西叫 mixins，他可以将多个组件中相同的逻辑抽离出来，实现一次写代码，多组件受益的效果。

但是 mixins 的副作用就是引用的多了变量的来源就不清晰了，而且还会有变量来源不明确,不利于阅读，容易使代码变得难以维护。

• Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数
• Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数

useWindowResize

我们来实现一个窗口改变时获取宽高的 hook

import { onMounted, onUnmounted, ref } from "vue";

function useWindowResize() {
  const width = ref(0);
  const height = ref(0);
  function onResize() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }
  onMounted(() => {
    window.addEventListener("resize", onResize);
    onResize();
  });
  onUnmounted(() => {
    window.removeEventListener("resize", onResize);
  });
  return {
    width,
    height
  };
}

export default useWindowResize;

使用：

<template>
  <h3>屏幕尺寸</h3>
  <div>宽度：{{ width }}</div>
  <div>高度：{{ height }}</div>
</template>

<script setup lang="ts">
import useWindowResize from "../hooks/useWindowResize.ts";
const { width, height } = useWindowResize();
</script>

style v-bind CSS变量注入

<template>
  <span> style v-bind CSS变量注入</span>  
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const color = ref('red')
</script>
<style scoped>
  span {
    /* 使用v-bind绑定组件中定义的变量 */
    color: v-bind('color');
  }  
</style>

其他

1、全局API的转移

Vue2有许多全局API和配置

例如：注册全局组件、注册全局命令等。

//注册全局组件
Vue.component("MyButton",{
    data:( ) => {(
        count:0
    }),
    template:"<button @click="count++">Clicked{{count}}times</button>
})
//注册全局指令
Vue.directive("focus",{
    inserted: el => el.focus()
}
    

Vue3中对这些API做出了调整：

将全局的API，即：Vue.xxx调整到应用实例（app）上

Vue2全局API（Vue）	Vue3实例API（app）
Vue.config.xxx	app.config.xxx
Vue.config.productionTip	移除
Vue.components	app.component('全局组件名BrowseModule',引入的组件browseModule)
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

其中app.config.globalProperties 里面默认在全局下挂载了如下东西

2、其他改变

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

过度类 类名的更改, 例如：动画的过渡：

Vue2写法

.v-enter,
.v-leave-to {
    opcity:0;
}
.v-leave,
.v-leave-to {
    opcity:1;
}

Vue3写法     

.v-enter-from,
.v-leave-to {
    opcity:0;
}
.v-leave-from,
.v-leave-to {
    opcity:1;
}

移除keyCode作为v-on的修饰符（即键盘字母对应的code值，现在需要使用对应的英文单词来写）

移除v-on.native修饰符

父组件中绑定事件

<my-component
    v-on:close="handlerComponentEvent"
    v-on:click="handlerComponentClickEvent"
/>

子组件中声明自定义事件

<script>
    export default {
        emits: ["close"]
    }
</script>

移除过滤器
过滤器虽然看起来很方便，但它需要一个自定义语法，打破大括号内表达式“只是JavaScript”的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器

其他写的比较好的文章链接: voycn.com/index.php/a…
其他写的比较好的文章链接: mp.weixin.qq.com/s/VYlAJP1l9…