vue2与vue3面试题之区别

vue2与vue3面试题之区别

01：数据双向绑定（ new proxy() 替代 object.defineProperty() ）

• Vue3对响应式模块进行了重写，主要修改就是proxy替换了defineProperty实现响应式。
• Vue2使用defineProperty存在一些原因：
  • 对数组拦截有问题，需要做特殊处理
  • 不能拦截新增、删除的属性
  • defineProperty方案在初始化时候，需要深度递归遍历待处理的对象才能对它进行完全拦截，明显增加了初始化的时间。
• Proxy代理
  • 对数组进行拦截，还能对Map，Set实现拦截
  • proxy是懒处理行为，没有嵌套对象时，不会实施拦截，也使之初始化速度和内存得到改善
  • proxy存在兼容性问题，IE不支持。
• proxy属性拦截原理

function reactive( obj ) {
	return new Proxy ( obj, {
		get(target,key){},
		set(target,key,val) {},
		deleteProperty(target,key){}
	}
}

01-1 vue3双向绑定优点与vue2双向绑定的缺点

001: 在vue2之中，假如设置了obj:{a:1} 若是给obj对象添加一个b属性值，直接在methods之中使用方法 obj.b = 2，导致的问题是：数据有更新，但是视图没有更新（ 需要使用this.$set()方法去设置b属性为响应式属性值，才能支持试图更新 ）；vue3之中直接使用reactive定义对象，则当前对象为响应式对象，对于obj.b = 2 视图会更新！

002： object.defineProperty对于后期添加的属性值是不参与劫持设置为响应式属性的，这就是为什么上面obj.b没有更新视图的缘故
002： new Proxy对于后期添加的属性值是依旧走proxy内的set和get，这就是obj.b更新视图的缘故
	

01-002-code vue2与vue3 设置响应式demo

// vue2 设置响应式属性demo
    let obj = {
      a: 1,
      b: 2
    }
    let vue = {}
    for (let k in obj) {
      Object.defineProperty(vue, k, {
        get() {
          console.log('获取了')
          return obj[k]
        },
        set(value) {
          obj[k] = value
        }
      })
    }
    console.log('obj', obj) // obj {a: 1, b: 2}
    vue.c = '000'
    console.log('vue-c', vue.c) // vue-c 000 没有走 Object.defineProperty这个逻辑
    console.log('vue-a', vue.a) // 获取了 vue-a 1 打印了，由于有a属性，则走了Object.defineProperty这个逻辑

// vue3 设置响应式属性demo
    let obj = {
      a: 1,
      b: 2
    }
    let vue = {}
    vue = new Proxy(obj, {
      get(target, key, receiver) {
        console.log('获取了')
        return Reflect.get(target, key, receiver)
      },
      set(target, key, val, receiver) {
        console.log('设置了')
        return Reflect.set(target, key, val, receiver)
      },
      deleteProperty(target, key) {}
    })

    vue.c = '000'
    console.log('vue-c', vue.c) // vue-c 000 设置了 获取了 vue3之中走了new Proxy的逻辑，设置为了响应式数据

02：生命周期函数的更换

• vue2生命周期函数
  • beforeCreate、created 、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
• vue3生命周期函数
  • setup 、onBeforeMount 、 onMounted 、onBeforeUpdate 、onUpdated 、onBeforeUnmount、onUnmounted

03：vue3的新特性

• 1：Composition API 组合api

• 2：Teleport 传送组件，把dom节点挂载到body等其他标签上

• 3：Fragments 碎片化节点 （ 不需要根节点 ）

• 4：Emits Component Option自定义事件

• 5：createRenderer 渲染器

• 6：SFC State-driven CSS Variables (v-bind in style)

• 7：SFC style scoped can now include global rules or rules that target only slotted content

• 8：Suspense组件 异步组件

• 再说说框架特性：

  • 更快：
    重写虚拟DOM（编译优化内容的存储、type属性支持更加多样）
    编译器优化：静态提升、patchFlags、block（区块）等
    基于Proxy的响应式系统（了解Vue3的响应式原理）
    更小：更好的摇树优化
    更容易维护：TypeScript + 模块化
    更容易扩展：
    独立的响应式模块
    自定义渲染器

04：缓存组件与更新组件

• 使用keep-alive去缓存组件
  • include与exclude 包含和排除
    
• 更新组件
  • activated钩子函数之中进行更新
  • beforeRouterEnter

05：ref和reactive的区别

• ref一般用于定义普通数据类型和dom节点，使用 .value去取值 （ toRefs 结构数据，变成响应式数据）
• reactive一般用于定义复杂数据类型，使用的时候，直接取值即可

06：watch和watchEffect的区别

• watch
  • 侦测一个或者多个响应式数据，并在数据源变化时再调用一个回调函数
• watchEffect
  • 立即运行一个函数，被动地追踪它的依赖，当这些依赖改变时重新执行该函数

07：修改数组下标 不会影响视图

• 数据是修改的，但是视图没有变化的
  • 原因：vue2是使用ObjectDefineProperty来实现的，只监听data数据存在的变量，对于循环添加新值的时候，监听不到，因此造成数据发生变化，视图没有发生变化
  • vue3 则不会有这样的问题，因为proxy会一直监听整个数据

08：定义数据的不一样

• vue2 再data之中定义
• vue3 则是再setup之中，使用ref、reactive等定义数据

09：父子传值的不一样

• vue2 父传子，直接props，子传父，采用Emitting Events，this.$emit(‘事件’,参数)
• vue3 父传子，直接props，子传父，采用Emitting Events，但需要从vue之中解构出defineEmits，再defineEmits(['事件名称‘])
  • const emit = defineEmits([“change-handerAdd”, “change-handerStep”]);
  • emit(“change-handerAdd”, id);

10：指令与插槽不同

• 插槽
  • vue2 使用slot是直接使用slot的。
  • vue3 使用插槽必须为 v-slot
• v-for与v-if指令
  • vue2的时候 v-for指令优先级比v-if高，先执行v-for再执行v-if，而且不推荐一起使用
  • vue3则再v-for之中使用的时候，把v-if当成一个判断语句，不会互相冲突的
• vue移除了filter（过滤器）、也移除了keyCode作为v-on的修饰符、v-on.native修饰符