Vue 2&3进阶面试题：（第八天）_vue2和3面试题-CSDN博客

本文链接：https://blog.csdn.net/m0_71805303/article/details/142369223

29.vue2.0和vue3.0区别？

1.由选项API转变为组合API。

2.vue3将全局配置挂在了app实例上而不是构造函数上，好处是应用之间的配置互不影响。

//vue2的全局config配置是直接挂在Vue构造函数上的
//例如
Vue.config.errorHandler = (err)=>console.log(err)
//vue3的全局api是在当前应用实例上修改的，不会影响其他应用
//例如
const app1 = createApp(AppComponent1)
const app2 = createApp(AppComponent2)
app1.config.errorHandler.(err)=>console.log(err,'app1')
app2.config.errorHandler.(err)=>console.log(err,'app2')

3.vue3为了减小打包体积，将很多方法都采用了具名导出的方式（如 createApp、nextTick等），这使得初始化实例的方式也有所区别。

4.需要注意的是setup返回的变量都是Ref类型，修改ref的值需要修改ref.value。

5.在setup中，reactive可以为我们集中定义属性。

6.computed接收一个函数,该函数的返回值作为计算属性的值。

7.提供了依赖和注入(provide、inject)。

8.路由写法的差别

vue3的beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的；大家都知道setup中组件实例已经创建，是能够获取到组件实例的。而beforeRouteEnter是再进入路由前触发的，此时组件还未创建，所以是无法用在setup中的；如果想在setup语法糖中使用则需要再写一个script 如下：

<script>
  export default {
    beforeRouteEnter(to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      next()
    },
  };
</script>

<script>
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    next()
  },
  beforeRouteLeave ((to, from, next)=>{//离开当前的组件，触发
    next()       
  }),
  beforeRouteLeave((to, from, next)=>{//离开当前的组件，触发
    next()      
  }),
  setup() {
    const router = useRouter()
    const route = useRoute()
    const toPage = () => {
      router.push(xxx)
    }
    //获取params 注意是route
    route.params
    //获取query
    route.query
    return {
      toPage
    }
  },
});
</script>

9.生命周期:vue3提供了在setup中使用的生命周期函数。

/*
    生命周期函数对应表
    beforeCreate -> 与setup并行
    created -> 与setup并行
    beforeMount -> onBeforeMount
    mounted -> onMounted
    beforeUpdate -> onBeforeUpdate
    updated -> onUpdated
    beforeDestroy -> onBeforeUnmount
    destroyed -> onUnmounted
  */

10.Vue3 把实现响应式原理的Object.defineProperty 换成了 Proxy。