vue.2.x和vue3.x的差异,vue3.0的面试题

Bertha 。 2022-12-08 04:24 238阅读 0赞

在vue官网发布3.x之前，小编前端时间正好学了react基础。当学vue3.x的时候，发现好多新特性都是借鉴react的hooks特性，这也对学习vue3.x的更容易一些。所以小编推荐有时间看看react，对你的学习vue3.x的学习也会更容易一些呦~

**言归正传**：vue3.x新特性

1.  底层使用Typescript
2.  响应式底层从 Object.defineProperty 变成  Proxy
3.  hooks---参照react

**重点来啦**：vue2.x & vue3.0语法差异分析

template，style----机会没有什么差异

**script的vue2.x和vue3.x的对比**

### \#\# data ###

**vue2.x**

data() { return  {} }

实现响应式

*  定义在data中
 *  使用Vue.set实现响应式

**vue3.x**

import { reactive } from 'vue'
    
    setup (props) {
        const state = reactive({
          title: 'Hello Vue3.0'
        })
        return state
     }

实现响应式

*  从vue包中导入 toRefs 函数，导出state的时候，进行包裹。代码如下

setup (props) {
        const state = reactive({
          title: 'Hello Vue3.0'
        })
       return { ...toRefs(state), xxx }
     }

### \#\# methods ###

**vue2.x**

methods: \{ 方法 \}

**vue3.x**

*  写在setup函数中，并且要return返回方法名称
 *  记得要把返回的state数据，通过toRefs变成响应式的数据，否则不会起作用。代码如下

return {
          ...toRefs(state),
          play
     }

###  \#\# computed ###

**vue2.x**

computed: \{计算属性\}

**vue3.x**

*  写在setup函数中。代码如下

const getDoubleNum = computed(() => state.num * 2)

*   写在state中

const state = reactive({
          myName: computed(() => 'my name is HuangWei  --- vue3.x')
     })

注意：需要从vue包中导入 computed 函数，如果是写在setup函数中，最后return的时候，返回计算属性函数

### **\#\#  生命周期函数** ###

**vue2.x**

created、mounted、beforeDestory、Destoryed ... 和 data同级

**vue3.x**

写在setup函数中，onCreated、onMounted、onBeforeUnmount、onUnmounted ...

**对比**

beforeCreate\-> 使用 setup()

created\-> 使用setup()

beforeMount -> onBeforeMount

Mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestory ->onBeforeDestory

destoryed -> onDestoryed

### \#\# 组件传值 ###

**vue2.x**

父传子：props

子传父：this.$emit

兄弟组件传值： 公共bus，父组件作为中间件

**vue3.x**

父传子（爷孙传，多级之间可传值）

父组件：provide---provide('名字',值)

子组件：inject----inject('名字')

代码如下：

父组件：

<template>
    <div>
    <Son />
    </div>
    </template>
    <script>
    // 引入子组件
    import Son from '@/components/Son'
    // 引入vue函数
    import {reactive,provide} from 'vue'
    export default{
    components:{Son},
    setup(){
        const state = reactive({
            title: '你好'
        })
        provide('title',title)
        return {state}
       }
    }
    </sctipt>

子组件：

<template>
    <div>
        {
       {title}}
    </div>
    </template>
    <script>
    // 引入vue函数
    import {reactive,inject} from 'vue'
    export default{
    setup(){
        const state = reactive({
            title: inject('title')
        })
           return {state}
       }
    }
    </sctipt>

注意：都要写在  setup 函数中

### **\#\# 路由** ###

**vue2.x**

导入vue、vue-router，然后Vue.use(VueRouter)，通过 new VueRouter() 创建路由对象，里面用routes设置路由规则，最终导出

**vue3.x**

*  从vue包中，按需导入 createRouter 函数，通过 createRouter创建路由对象，里面用routes设置路由规则，最终导出
 *  编程式导航 & 路由参数获取

1.  编程式导航：从 vue-router 包中导入 useRouter 函数，然后在setup函数中用useRouter函数创建出router对象，然后就可以调用对应的push等方法实现编程式导航了
2.  路由参数获取 ：从 vue-router 包中导入 useRoute 函数，然后在setup函数中用 useRoute 函数创建出route对象，然后通过route.params.xxx、route.query.xxx 就可以获取到路由参数了

**代码如下：**

编程式导航:

<template>
    <div>
        <p @Click="goToList('in_theaters')">跳转</p>
        <p>{
       {title}}</p>
    </div>
    </template>
    <script>
    // 引入vue函数
    import {reactive} from 'vue'
    // 引入路由
    import {useRouter} from "vue-router";
    export default{
    setup(){
        const state = reactive({
            title: '你好vue3.x'
        })
           // 创建路由对象
            const router = useRouter();
             // 跳转到列表页面
            const goToList = (type) => {
             // console.log(type)
                // vue2.x this.$router.push(`/list/${type}`)
                router.push(`/list/${type}`);
            };
           return {state,goToList }
       }
    }
    </sctipt>

接收参数

<template>
    <div>
    {
       {title}}
    </div>
    </template>
    <script>
    // 引入vue函数
    import {reactive} from 'vue'
    // 引入路由
    import {useRoute} from "vue-router";
    export default{
    setup(){
        const state = reactive({
            title: '你好vue3.x'
        })
           // 创建路由对象
           const route = useRoute();
           // 接收参数
           console.log(route.params.type)
           return {state}
       }
    }
    </sctipt>

### **\#\# vuex** ###

**vue2.x**

导入vue、vuex，然后Vue.use(Vuex)，通过new Vuex.Store() 创建store对象，里面有5个属性（state、getter、mutation、action、module），并且最终导出store。

**vue3.x**

*  从vuex包中，按需导入 createStore 函数，通过 createStore() 创建store对象，里面有5个属性（state、getter、mutation、action、module）并且最终导出store。

### \#\# 其它 ###

注意：

*  setup函数在Vue3.0是一个非常重要的函数，它的执行时机是在 beforeCreate之后 和 created之前 ，很多代码都必须写在这个函数中，如果要在组件的template中使用，那么就必须在setup中return出去

**setup中的两个参数说明：**

1.  props：用于接收父组件传递过来的值，注意：必须先在setup外面props中定义好，才能通过props.xxx拿到父组件传递过来的值
2.  context：上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：

*  项目中vue2.x的语法和3.x的语法可以共存
 *  vue3.x之后，之前直接写在export default 里面的内容，现在大部分都要写在setup函数中，并且模型值、事件处理、计算属性函数要返回
 *  很多用到的内容比如：reactive、toRefs、computed、onMounted 都需要从vue包中导入

================================================================

11.24

vue3.0比vue2.0快的原因

*  diff方法的优化

vue2.0的虚拟dom是进行全量对比的

vue3.0增加了静态标记（PatchFlag）

在与上次虚拟节点进行对比的时候,只对比带有patch flag的节点

并且可以通过flag信息得知当前节点要对比的内容

hoistState静态提升

Vue2.0无论元素是否参与更新，每次都会重新创建，然后渲染

Vue3.0中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可

cacheHandlers 事件监听器缓存

默认情况下onClick会被视为动态绑定，所以每次都会去追中它的变化

但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。

ssr渲染

<template>
    <div>
        <p>{
       {count}}<p>
        <button @click="myFn"></button>
    </div>
    </template>
    <script>
    import {ref} from 'vue'
    export default{
        name: 'App',
        // setup函数是组合API的入口函数
        setup(){
            // let count = 0
            // 定义了一个名称叫做count变量，这个变量初始化值是0
            // 这个变量发生改变之后，Vue会自动更新UI
            let count = ref(0)
            // 在组合API中，如果想要定义方法，不用定义到methods中，直接定义即可
            function myFn(){
                // alert(123)
                count.value += 1;
                console.log(count.value)
            }
            // 注意点
            // 在组合api中定义的变量/方法，要想在外界使用，必须通过return{xxx}暴露出去
            return {count,myFn}    
        }
    }
    </script>

<template>
    <div>
        <ul>
            <li v-for="(stu,index) in state.stu" 
            :key="stu.id"
            @click="remStu(index)"
            >{
       {stu.name}}-{
       {stu.age}}</li>
        </ul>
    </div>
    </template>
    <script>
    import {ref, reactive} from 'vue'
    export default{
        name: 'App',
        setup(){
            // ref函数注意点：
            // ref函数只能监听简单类型的变化，不能监听复杂类型的变化（对象/数组）
            /** let state = reactive({
               stus: [
                    {id: 1,name:'zs',age:12},
                    {id: 2,name:'ls',age:12},
                    {id: 3,name:'wu',age:12},
                ]
            })
            remStu(index){
                state.stus = state.stus.filter((stu,idx) => idx !== index)
            }
            return {state,remStu}**/
            // 删除
            let {state, remStu} = useRemoveStudent();
            // 新增
            let state2 = ({
            })
            return {state,remStu}   
        }
    function useRemoveStudent(){
    let state = reactive({
               stus: [
                    {id: 1,name:'zs',age:12},
                    {id: 2,name:'ls',age:12},
                    {id: 3,name:'wu',age:12},
                ]
            })
            remStu(index){
                state.stus = state.stus.filter((stu,idx) => idx !== index)
            }
            return {state,remStu}
    }
    }
    </scritp>