Vue3.0——面试题、常用的Composition API（setup、ref函数、reactive函数、Vue3.0中的响应式原理、Vue3.0中组件的使用、计算属性 ）

目录

一、常用的Composition API（组合API）

1.setup

2.ref函数

3.reactive函数

4.Vue3.0中的响应式原理 （面试题）

1）vue2.0的响应式

2）vue3.0的响应式

5.Vue3.0中组件的使用

6.计算属性 

二、面试题

1、什么是组合式和选项式？

2、什么是hook？

3、hook的代码写在哪里？

4、Vue3.0中的setup函数的理解

6、Vue3.0 和 Vue2.0响应式原理

---

一、常用的Composition API（组合API）

1.setup      2.ref函数    3.reactive函数     4.Vue3.0中的响应式原理 （面试题）

5.Vue3.0中组件的使用    6.计算属性    7.监听属性    8.Vue3.0生命周期

9.Teleport     10.自定义事件    11.状态驱动的动态css    12.Suspense

2.0和3.0的代码混用了，那3.0优先级更高

比如2.0的data里面写了msg，setup返回了msg，两者同名，那setup优先级更高

1.setup

- 理解：Vue3.0中一个新的配置向，值为一个函数

- setup是所有Composition API（组合API） ”表演的舞台“

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

- setup函数的两种返回值：

  - 若返回一个对象，则对象中的数据、方法、在模板中均可直接使用（重点）

 1、setup（） 这个函数内部的变量/函数是局部的

2、这个函数的返回值，可以被当前组件的任意地方使用

3、这个函数内部不要使用this来操作组件数据

4、setup在组件加载期间只有运行一次，从创建到销毁只运行一次

setup 函数的语法糖

setup属性，会让打包工具打包时，直接帮我们把setup函数内部声明的变量/函数 return，然后组件就可以用了

<script setup>  </script>

<template>
  <div class="home">
    <h1>显示vue3.0的数据和方法</h1>
    <h2>姓名:{
  {name}}</h2>
    <h2>年龄:{
  {age}}</h2>
    <button @click="sayName()">点击测试vue3.0的方法</button>
  </div>
</template>

<script>

export default {
  setup() {
    // 现在暂时还不考虑响应式数据的问题
    // 数据 
    let name = "李国栋";
    let age = 18;

    // 方法
    let sayName = function () {
      console.log(`我的名字是${name},我的年龄是${age}`);
    }

    return {
      name, age, sayName
    }
  }

}
</script>

若返回一个渲染函数，则可以自定义渲染内容（了解）

//页面中会显示一个h1标签,标签的内容是"vue3返回渲染函数"
<script>
import {h} from 'vue'
export default {
  setup() {
    // 返回一个渲染函数
    // h相当于document.CreateElement()
    return ()=>{return h("h1","vue3返回渲染函数")}
  }
}
</script>

注意点

- 尽量不要和Vue2.x配置混用
- Vue2.x配置（data，methods，computed......）中可以访问setup中的属性，方法
- 但在setup中不能访问到Vue2.x配置(data，methods，computed......)
- 如有重名，setup优先
- setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性

2.ref函数

- 作用：定义一个响应式的数据  （）
- 语法：const xxx = ref("value")

             import { ref } from "vue" 

             name.value = "名字";

存值和取值都是用  点value  ，但是页面使用就不用点value，直接写{ {name}}

ref的返回值是一个对象，然后有个属性是value

  - 创建一个包含响应式的数据的引用对象(reference对象)
  - js中操作数据：xxx.value
  - 模板中读取数据不需要.value,直接<div>{ {xxx}}</div>

可以用箭头函数，因为这里面用不到this

- 注意
  - 接收的数据类型 ：可以是基本数据类型   也可以是 引用数据类型
  - 基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的
  - 对象类型的数据：内部“求助”了Vue3.0的一个新的函数------reactive函数

ref这个响应式是怎么设计的？

就是监听了value的改变，劫持value属性的setter、getter

因此ref一般用在基本数据，或者是引用数据的嵌套层级不深的数据上

reactive也是响应式的设计，怎么设计的呢？

跟ref一样，但是底层采用的是ES6的proxy代理了整个引用数据。比起ref，它的性能更好

<template>
  <div class="home">
    <h1>显示vue3.0的数据和方法</h1>
    <h2>姓名:{
  {name}}</h2&