vue2.0与3.0

1.定义全局变量的方法变化

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
Vue.prototype.url= 'http://123'
// 之后(Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}
app.config.globalProperties.url= 'http://123'

2. 创建vue实例变化

//=======vue3.x
//使用createApp函数来实例化vue，
//该函数接收一个根组件选项对象作为第一个参数
//使用第二个参数，我们可以将根 prop 传递给应用程序
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App,{ userName: "blackLieo" })
.use(store)
.use(router)
.mount('#app')  
//由于 createApp 方法返回应用实例本身，因此可以在其后链式调用其它方法，这些方法可以在以下部分中找到。

//=======vue2.x
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.自定义指令

// 注册一个全局自定义指令 `v-focus`
//vue2.x
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
//vue3.x
const { createApp } from "vue"
const app = createApp({})
app.directive('focus', {
    mounted(el) {
        el.focus()
    }
})

4.  2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用；3.x 版本中 v-if 总是优先于 v-for 生效。

5.插槽的变化。

6.响应式 vue2.x用的是Object.defineProperty;   vue3.x用的是proxy

两者对比：

Object.defineProperty只能劫持对象的属性， 而 Proxy 是直接代理对象
由于Object.defineProperty只能劫持对象属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。
但是Proxy 直接代理对象， 不需要遍历操作

因为Object.defineProperty劫持的是对象的属性，所以新增属性时，需要重新遍历对象，
对其新增属性再次使用Object.defineProperty进行劫持。也就是 Vue2.x
中给数组和对象新增属性时，需要使用$set才能保证新增的属性也是响应式的,
$set内部也是通过调用Object.defineProperty去处理的