vue3面试题

const var  let之间的用法区别 ？

const 用来定义常量， 使用时必须赋值， 只能在块作用域里访问，不能修改

var 用来定义变量，没有块的概念，可以跨块访问，不能跨函数访问

let 用来定义变量，只能在块作用域内访问，不能跨块访问 不能跨函数访问。

ref的主要作用是什么？

ref 将普通的数据类型包装成响应式对象，通过 .value的属性来访问该值，当值被修改时会触发视图的更新

reactive 的主要作用是什么？

reactive 将一个对象转换成响应式对象，当对象的属性被修改时会触发视图的更新。

ref与reactive的区别？

ref和reactive是vue3推出的主要API之一，用于响应式数据的创建

template模板中使用的数据和方法，都需要通过setup函数return出去才可以使用

reactive函数只能接收引用数据类型

ref函数可以接收原始数据类型和引用数据类型

ref创建响应式数据，在模板中可以直接使用，在js中通过.value的形式才能使用

ref函数底层还是reactive 进行了封装，增强了对原始数据类型的处理

vue3的script setup的用法？

script setup是vue3的语法糖 运行性能更好， 组合式API的写法   特性如下：

        属性和方法无序返回，可以直接使用

        引入组件时，会自动注册，无需通过Components手动注册

        使用defineProps接收父组件传递的值

        useAttr获取属性，useSlots获取插槽，defineEmits获取自定义事件

        默认不会暴露任何属性，如果有需要可使用defineExpose

vue3.0的响应式原理？

vue3使用了es6的proxy和reflect相互配合实现数据响应式，解决了vue2中视图不能自动更新的问题

proxy是深度监听，可以实现监听对象和数组内的任意元素，实现实时更新。

初始化阶段：形成对应的proxy对象

get依赖收集阶段：

set派发更新阶段: 属性改变的时候

vue3组件通信方式？

pros

$emit

expose /ref

$attr

v-model

provide/ inject 

vuex/pinia

mitt

vue3中 setup使用props组件

setup是一个组件选项，它是组合API的入口，它接受两个参数

{Data} props

{SetupContext} context

主要用途是 子组件与父组件之间传值。 所有申明了的prop 不管父组件是否向其传值，都会出现在prop对象中。其中没有传入的可选的prop的值是undefined

在<script setup> 中必须使用defineProps API来申明props 

子组件 Testprops.vue

<script setup lang="ts">
import { toRefs } from 'vue'
const props = defineProps({
    text:String
})
const {text} = toRefs(props)
</script>

<template>
    <div>
        {{text}}
    </div>
</template>

vue3的新特性有哪些?

1性能提升

2 更好的支持typescript

3 新增composition API

4 新增组件

        fragment 不再限制template只有一个根节点

        teleport传送门，允许我们将控制的内容送到任意的DOM中

        Suspense 等待异步组件时渲染一些其他内容，有更好的用户体验

5 Tree-shaking 支持摇树优化

        真正需要的模块打包在内，体积只有原来的一半，加载速度更快

6 Custom Renderer API 自定义渲染器

        实现DOM方式进行webGL编程

vue3中新增Composition API和Options API的区别？

用法样例

onmounted 函数用法 

setup函数取代以前的选项API 在setup 函数中可以使用onmounted 等选项API 推荐做法是将onmounted函数和其他选项API 封装在新的函数中。

<template>
    <div> {{ message }} </div>
</template>

<script>
import { onMounted , ref} from 'vue'

export default {
    data() {
        return{
            message: ''
        }
    },

    // 钩子调用 fetchData 方法 
    onMounted(fetchData)，

    methods:{
        async fetchData() {
        const res = await fetch('https://api.example.com/data')
        this.message = message;
        }
    }
}
</script>

使用onMounted(fetchData) 钩子调用了 fetchData 方法   当组件挂载后， 该方法会被自动调用，从而获取数据并更新 message 的值。

v-model 的用法

v-model 是vue内置的API指令，负责监听用户输入事件已更新数据。

v-model指令可以在表单 input textarea select 元素上创建双向数据绑定。

基本使用

输入框输入什么 页面就显示什么 数据实时更新。

<template>
<input type"text" v-model="message"/>
<h2> {{ message }}
</template>