vue面试题

vue2 和 3 的区别

响应式原理不同

diff算法不同

生命周期不同

Vue 2.0 和 Vue 3.0 的最大区别在于 Vue Router 的使用方式和 API 的变化。
在 Vue 2.0 中，我们需要使用 Vue.use(VueRouter) 来引入 Vue Router，然后创建一个 Router 实例，并在根组件中使用它：

在 Vue 3.0 中，Vue Router 的使用方式发生了变化。现在，我们需要使用 createRouter 工厂函数来创建路由实例，然后将其传递给根组件使用：

vue3 的静态提升 ： 所有的静态节点被提升到render函数之外 只在第一次启动时创建

tree shark 引入的模块，用不到的代码片段会被剔除

组合式apl

2 和 3 的双向绑定原理

vue3 hooks

 在hooks文件下创建useClass.js文件(一般使用use开头)

//src/hooks/useClass.js
import {reactive } from 'vue'
export default function(){
    let id = 3
    //学生信息
    let classList = reactive([
        {id:0,name:"jianwang",age:18},
        {id:1,name:"domes",age:20},
        {id:2,name:"dow",age:18},
      ])
    //添加信息
   const addClass = (name,age)=>{
    id++
    classList.push({
        id,name,age
      })
   }
   //删除信息
   const delects = (ids)=>{
        for(let [index,item] of classList.entries()){
          console.log(ids,item.id)
            if(item.id == ids)
            {
            
              classList.splice(index,1)
            } 
        }
      
   }  
   //把方法和数据返回出去
   return{
    addClass,
    delects,
    classList
   }
}

App.js中引入hooks

// src/App.js
<script setup>
//引入hooks文件
import useClass from "./hooks/useClass"
//用户填写的学生姓名与年龄
let name = "",age = 0;
//导入
const {delects,addClass,classList} = useClass()
</script>

在v3的setup中获取 this

v3常用api

v3常用的响应数据类型

v-if v-show

mvvm理解

key的作用

生命周期

vue事件修饰符