标签: COMPARE | JeacsonBlog

一、Vue3 与 Vue2 在对象数据响应式上的区别

在 vue2 中，所有数据在底层都是通过使用Object.defineProperty()进行劫持后实现数据响应的。这使得如果一个数据为对象时，vue 无法对这个对象里面的元素进行监听，导致对象里的值无法实现响应式。

let o = {};

Object.defineProperty(o, 'prop1' {
    //使属性可删除
    configurable: true,
    //有人读取o的某个属性时调用
    get() {
        return object.prop1;
    },
    //有人修改o的某个属性时调用
    set(value) {
        object.prop1 = value;
    }
})

Object.defineProperty(o, 'prop2' {
    //使属性可删除
    configurable: true,
    //有人读取o的某个属性时调用
    get() {
        return object.prop2;
    },
    //有人修改o的某个属性时调用
    set(value) {
        object.prop2 = value;
    }
})
......

Vue3 与 Vue2 在渲染函数上的区别

在编写vue代码时，我们一般会首先在template标签中编写html代码。当我们进行代码编译时，VUE首先会根据代码内的各个标签将代码转换为若干个虚拟DOM节点，也就是VNode (VirtualDomNode)，然后它会将多个 Vnode 结合，将其转化为VirtalDOM，最后VDOM才会被渲染成真实的DOM。大部分的情况都会是如此。

但是如果我们可以跳过代码转换节点的过程，直接编写生成vnode的代码，会使得浏览器编译代码的效率更高。此时我们可以在script标签内使用渲染函数render(), 并在其中调用VUE中的函数h()。h函数中调用了createElement函数（Vue3中使用的是createVnode函数）进行结点的创建，但是只是在这之上进行了传入参数的条件判断，所以我们也可以称其为createElement函数/createVnode函数。

Vue3 与 Vue2 在watch上的区别

在VUE2中，watch作为选项存在。我们可以通过使用 watch 选项在每次响应式属性发生变化时触发函数。

export default {
  data() {
    return {
      question1: ''，
      question2: ''，
    }
  },
  watch: {
    // 每当 question1 改变时，这个函数就会执行 (简写方式)
    question1(newValue, oldValue) {
      console.log('question1 Changed!', newValue, oldValue);
    }，
    question2: {
        deep: true,// 开启深度监听
        immediate: true, // 开启时立即监听
        handler(newValue, OldValue) {
            console.log('question2 Changed!', newValue, oldValue);
        }
    }
  },
}