vue2和vue3的区别

1.双向数据绑定原理不同

vue2 的双向数据绑定是利用ES5 的一个 API ，Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。

• 对数组拦截有问题，需要做特殊处理
• 不能拦截新增、删除的属性
• defineProperty方案在初始化时候，需要深度递归遍历待处理的对象才能对它进行完全拦截，明显增加了初始化的时间。

vue3 使用了 es6 的 ProxyAPI 对数据代理。

• 对数组进行拦截，还能对Map，Set实现拦截
• proxy是懒处理行为，没有嵌套对象时，不会实施拦截，也使之初始化速度和内存得到改善
• proxy存在兼容性问题，IE不支持。

相比于vue2.x，使用proxy的优势如下：

1. defineProperty只能监听某个属性，不能对全对象监听
2. 可以直接绑定整个对象，省去for in、闭包等内容来提升效率
3. 可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2.vue3支持碎片(Fragments)

换句话来说就是在组件中可以有多个根节点。

3.vue2选项式API和vue3组合式API的区别 

选项型API在代码里分割了不同的属性: data,computed属性,methods等等。

组合式API能让我们用方法（function）来分割，这样代码会更加简便和整洁。

vue2

export default {

name:'loginForm'

components:{
            "buttonComponent":btnComponent
        },
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  computed:{
      fullName(){
        return this.firstName+" "+this.lastName;     
      }
  },

  methods: {
    login () {
    }
  },
}

vue3

export default {
  props: {
    title: String
  },
  
  setup () {
    const state = reactive({ //数据
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
    })
     //方法
    const login = () => {
      // 登陆方法
    }
    return { 
      login,
      state
    }
  }

}

 

4. 建立数据data不同

vue2是把数据都放入data属性中，

vue3把数据放在setup()方法中，此方法在组件初始化构造的时候触发。

5.生命周期钩子不同

Vue2--------------vue3
beforeCreate  -> setup()
created           -> setup()
beforeMount   -> onBeforeMount
mounted         -> onMounted
beforeUpdate -> onBeforeUpdate
updated          -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed        -> onUnmounted
activated          -> onActivated
deactivated      -> onDeactivated

setup() :开始创建组件之前，在beforeCreate和created之前执行,创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
若组件被<keep-alive>包含，则多出下面两个钩子函数。
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。

6.ref和reactive的区别

ref一般用于定义普通数据类型和dom节点，使用 .value去取值 （ toRefs 结构数据，变成响应式数据）
reactive一般用于定义复杂数据类型，使用的时候，直接取值即可。
源码上的区别
1：ref若是定义的是简单数据类型，那么响应式原理走的是vue2的Object.defineProperty()的get与set方式，若是ref定义的是引用类型数据，那么响应式原理使用的proxy中Reflect.set与get
2：reactive响应式原理直接使用的是proxy处理负责数据类型，内部使用了Reflect.get与set实现响应式的。

7.watch和watchEffect的区别

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

8.修改数组下标不影响视图 

数据修改后视图无变化的原因：

vue2是使用ObjectDefineProperty来实现的，只监听data数据存在的变量，对于循环添加新值的时候，监听不到，因此造成数据发生变化，视图没有发生变化。

vue3 则不会有这样的问题，因为proxy会一直监听整个数据。

9.父子传值的不一样

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修饰符

11.vue2和vue3响应式原理区别

vue3对于vue2来说，最大的变化就是composition Api 替换了vue2的options Api
vue3的响应式原理替换为了proxy，vue2的则是Object.defineproperty。

其中proxy有着以下这些优点：
 1：对象新增的属性不需要使用$set添加响应式，因为proxy默认会监听动态添加属性和删除属性等操作
 2：消除数组上无法监听数组索引、length属性，不再进行数组原型对象上重写数组方法
 3：Object.defineproperty是劫持所有对象的属性设置为getter、setter，然后遍历递归去实现。而proxy则是代理了整个对象。
 4：vue2使用Object.defineproperty拦截对象的get和set属性进行操作。而proxy有着13种拦截方法。
 5：由vue2的响应式原理可以看出，vue底层需要对vue实例的返回的每一个key进行get和set操作，无论这个值有没有被用到。所以在vue中定义的data属性越多，那么初始化开销就会越大。而proxy是一个惰性的操作，它只会在用到这个key的时候才会执行get，改值的时候才会执行set。所以在vue3中实现响应式的性能实际上要比vue2实现响应式性能要好。

proxy原理
 - 作用：能够为另外一个对象创建代理，该代理可以拦截和重新定义该对象的基本操作(获取，设置，定义属性等)
 - proxy的两个参数： 参数1=> 要代理的原始对象； 参数2=>一个对象，这个对象定义了操作将被拦截以及如何重新定义被拦截的操作
const target = {name: "ts",age: 18};
const handler = {};
const proxy = new Proxy(target, handler); // 使用proxy代理了一个空对象 proxy对象具有响应式

const target2 = {name: "ts",age: "18"};
const handler2 = {
  get(target, key, receiver) {
    console.log(`访问属性${key}值`)
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    console.log(`设置属性${key}值`)
    return Reflect.set(target, key, value, receiver)
  }
};
const proxy2 = new Proxy(target2, handler2); // 使用proxy代理了一个handler2对象 handler2对象中设置了get和set属性
console.log('proxy2.name', proxy2.name)
proxy2.name = 'jkl';
proxy2.sex = 'male';
console.log('proxy2',proxy2);

1：Object.defineproperty 初始化的时候拦截对象，设置为get和set属性
const obj = {
  name: "wxs",
  age: 25,
};
Object.entries(obj).forEach(([key, value]) => {
  Object.defineProperty(obj, key, {
    get() {
      return value;
    },
    set(newValue) {
      console.log(`监听到属性${key}改变`);
      value = newValue;
    },
  });
});
obj.name = 11;
obj.age = 22;
obj.ak47 = "ak47";

1：输出结果 => 监听到属性name改变、监听到属性age改变

2: proxy 初始化的时候，有使用这个key值则get一下，有设置这个key值则set一下
const obj = {
    name:'wxs',
    age:25
}

const prxoyTarget = new Proxy(obj,{
    get(target,key){
        return target.key
    },
    set(target,key,value){
        console.log(`监听到属性${key}需要改成${value}`)
        target[key] = value
    }
})

prxoyTarget.name = 11
prxoyTarget.age = 22
prxoyTarget.ak47 = 'ak47'

2：输出结果 => 监听到属性name需要改成11、监听到属性age需要改成22、监听到属性ak47需要改成ak47